小程序基礎
一、準備
- 開發小程序的第一步，你需要擁有一個小程序帳號，通過這個帳號你就可以管理你的小程序。
- 小程序的 AppID 相當于小程序平臺的一個身份證。
- 開發工具的使用
- 界面：模擬器（iphone6標準）、編輯器、調試器；
- 編譯：普通編譯、添加編譯模式（調試某個頁面）、
- 詳情（選擇開發版本、是否驗證合法域名）
二、代碼構成
最簡單的小程序
├── app.js
├── app.json
├── app.wxss
├── pages
│ │── index
│ │ ├── index.wxml
│ │ ├── index.js
│ │ ├── index.json
│ │ └── index.wxss
│ └── logs
│ ├── logs.wxml
│ └── logs.js
└── utils
|__project.config.json
1、JSON 配置
1.1小程序配置 app.json
用來對微信小程序進行全局配置
小程序配置 https://developers.weixin.qq.com/miniprogram/dev/framework/config.html
{
// pages 小程序所以頁面路徑列表
// window 全局的默認窗口表現
// tabBar 底部 tab 欄的表現
"pages": [
"pages/welcome/welcome",
"pages/posts/post",
"pages/movies/movies",
"pages/movies/movie-detail/movie-detail",
"pages/posts/post-detail/post-detail",
"pages/movies/more-movie/more-movie"
],
"window": {
"navigationBarBackgroundColor": "#405f80"
},
"tabBar": {
"borderStyle": "white",
"position":"bottom",
"list": [
{
"pagePath": "pages/posts/post",
"text": "閱讀",
"iconPath": "images/tab/yuedu.png",
"selectedIconPath": "images/tab/yuedu_hl.png"
},
{
"pagePath": "pages/movies/movies",
"text": "電影",
"iconPath": "images/tab/dianying.png",
"selectedIconPath": "images/tab/dianying_hl.png"
}
]
}
}
1.2 工具配置 project.config.json
小程序開發者工具個性化配置
開發者工具的配置 https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html
1.3 頁面配置 page.json
頁面的配置只能設置 app.json 中部分 window 配置項的內容，頁面中配置項會覆蓋 app.json 的 window 中相同的配置項。
頁面配置 https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E9%A1%B5%E9%9D%A2%E9%85%8D%E7%BD%AE
2.WXML
框架設計的一套標簽語言，結合基礎組件、事件系統，可以構建出頁面的結構。
數據綁定
<view> {{message}} </view>
列表渲染
<view wx:for="{{array}}"> {{item}} </view>
條件渲染
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view> <view wx:elif="{{view == 'APP'}}"> APP </view> <view wx:else="{{view == 'MINA'}}"> MINA </view>
模板
<template name="staffName"> <view> FirstName: {{firstName}}, LastName: {{lastName}} </view> </template>
事件
<view bindtap="add"> {{count}} </view>
在JS文件中聲明數據和事件
Page({
data: {
message: 'Hello MINA!',
array: [1, 2, 3, 4, 5],
view: 'MINA',
staffA: {firstName: 'Hulk', lastName: 'Hu'},
staffB: {firstName: 'Shang', lastName: 'You'},
staffC: {firstName: 'Gideon', lastName: 'Lin'}
},
add: function(e) {
this.setData({
count: this.data.count + 1
})
}
})
3.WXSS
一套樣式語言，用于描述 WXML 的組件樣式。具有 CSS 大部分特性,對 CSS 進行了擴充以及修改。
app.wxss 中的樣式為全局樣式，被在 page 的 wxss 文件覆蓋。
尺寸單位
rpx（responsive pixel）: 可以根據屏幕寬度進行自適應。規定屏幕寬為750rpx。
iPhone6 1rpx = 0.5px
iPhone6 作為視覺稿的標準。
樣式導入
@import語句可以導入外聯樣式表，@import后跟需要導入的外聯樣式表的相對路徑，用;表示語句結束。（.wxss）
內聯樣式
style：靜態的樣式統一寫到 class 中。style 接收動態的樣式，在運行時會進行解析，請盡量避免將靜態的樣式寫進 style 中，以免影響渲染速度。
<view style="color:{{color}};" />
<view class="normal_view" />
支持部分CSS選擇器
.class
#id
element
element, element
::after
::before
4.JS
WXML - 事件
1.在組件中綁定一個事件處理函數。
2.在相應的Page定義中寫上相應的事件處理函數，參數是event。
<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>
Page({ tapName: function(event) { console.log(event) } })
3.冒泡事件和非冒泡事件
4.冒泡事件列表
touchstart
touchmove
touchend
tap
...
除上表之外的其他組件自定義事件如無特殊聲明都是非冒泡事件
5.事件綁定和冒泡
- key 以bind或catch開頭
- value 是一個字符串，對應 Page 中定義同名的函數。
- bind事件綁定不會阻止冒泡事件向上冒泡，catch事件綁定可以阻止冒泡事件向上冒泡。
- 事件對象
- target 觸發事件的源組件。
- currentTarget 事件綁定的當前組件。
- dataset
- 組件定義數據，以data-開頭，多個單詞由連字符-鏈接，event.currentTarget.dataset 中會將連字符轉成駝峰elementType。
-
<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>
-
小程序的API（類型）
事件監聽 API
以 on 開頭
接受一個回調函數作為參數
wx.onCompassChange(function (res) { console.log(res.direction) })
同步 API
以 Sync 結尾
執行結果可以通過函數返回值直接獲取
try { wx.setStorageSync('key', 'value') } catch (e) { console.error(e) }
異步 API
大多數 API 都是異步 API
都接受一個 Object 類型的參數
wx.login({
success(res) {
console.log(res.code)
},
failFn,
completeFn,
Any
})
三、主要能力
小程序的啟動
1、小程序的代碼包下載到本地。
2、app.json 的 pages 字段就可以知道你當前小程序的所有頁面路徑，寫在 pages 字段的第一個頁面就是這個小程序的首頁
3、app.js 定義的 App 實例的 onLaunch 回調會被執行
App()
App() 函數用來注冊一個小程序。接受一個 Object 參數，其指定小程序的生命周期回調等。
App() 必須在 app.js 中調用，必須調用且只能調用一次。不然會出現無法預期的后果。
- onLaunch Function 生命周期回調—監聽小程序初始化 小程序初始化完成時（全局只觸發一次）
- onShow Function 生命周期回調—監聽小程序顯示 小程序啟動，或從后臺進入前臺顯示時
- onHide Function 生命周期回調—監聽小程序隱藏 小程序從前臺進入后臺時
- onError Function 錯誤監聽函數 小程序發生腳本錯誤，或者 api 調用失敗時觸發，會帶上錯誤信息
- onPageNotFound Function 頁面不存在監聽函數 小程序要打開的頁面不存在時觸發，會帶上頁面信息回調該函數
App({ onLaunch: function(options) { // Do something initial when launch. }, onShow: function(options) { // Do something when show. }, onHide: function() { // Do something when hide. }, onError: function(msg) { console.log(msg) }, globalData: 'I am global data' })
全局的 getApp() 函數可以用來獲取到小程序 App 實例。
程序與頁面
1、logs.json 配置生成一個界面
2、裝載這個頁面的 WXML 結構和 WXSS 樣式
3、最后裝載 logs.js
Page()
Page 是一個頁面構造器，注冊一個頁面。接受一個 Object 類型參數，其指定頁面的初始數據、生命周期回調、事件處理函數等。
data：
data Object 頁面的初始數據,必須是可以轉成JSON的類型
生命周期回調函數：
- onLoad Function 生命周期回調—監聽頁面加載
- onShow Function 生命周期回調—監聽頁面顯示
- onReady Function 生命周期回調—監聽頁面初次渲染完成
- onHide Function 生命周期回調—監聽頁面隱藏
- onUnload Function 生命周期回調—監聽頁面卸載
面頁事件處理函數：
- onPullDownRefresh Function 監聽用戶下拉動作
- onReachBottom Function 頁面上拉觸底事件的處理函數
- onShareAppMessage Function 用戶點擊右上角轉發
- onPageScroll Function 頁面滾動觸發事件的處理函數
- onResize Function 頁面尺寸改變時觸發，詳見 響應顯示區域變化
- onTabItemTap Function 當前是 tab 頁時，點擊 tab 時觸發
組件事件處理函數
在渲染層的組件中加入事件綁定，當事件被觸發時，就會執行 Page 中定義的事件處理函數。
setData()
直接修改 this.data 而不調用 this.setData 是無法改變頁面的狀態的，還會造成數據不一致。
生命周期
組件
視圖容器
view 視圖容器
scroll-view 可滾動視圖容器
swiper 滑塊視圖容器
基礎內容
icon 圖標
text 文字
導航
navigator 頁面鏈接
表單
多媒體(Media)
特殊
block 提供控制邏輯
API
小程序常用API接口
網絡請求
wx.request https
wx.request({ url: ‘test.php‘, //僅為示例，并非真實的接口地址 method:"GET", data: { x: ‘‘ , y: ‘‘ }, header: { ‘content-type‘: ‘application/json‘ }, success: function(res) { console.log(res.data) } })
本地緩存
通過key的形式添加緩存setStorage （異步接口）
wx.setStorage({ key:"key" data:"value" })
通過key的形式獲取緩存getStorage （異步接口）
wx.getStorage({ key: ‘key‘, success: function(res) { console.log(res.data) } })
從本地緩存中異步移除指定 key
wx.removeStorage({ key: ‘key‘, success: function(res) { console.log(res.data) } })
清理本地數據緩存
wx.clearStorage()
顯示、隱藏消息提示框
wx.showToast({ title: ‘加載中‘, icon: ‘loading‘, duration: 10000 }) setTimeout(function(){ wx.hideToast() },2000)
動態設置當前頁面的標題
wx.setNavigationBarTitle({
title: ‘當前頁面‘
})
導航
保留當前頁面，跳轉到應用內的某個頁面
wx.navigateTo({ url: ‘test?id=1‘ })
關閉當前頁面，跳轉到應用內的某個頁面
wx.redirectTo({ url: ‘test?id=1‘ })
獲取用戶信息，需要先調用wx.login 接口
wx.getUserInfo({ success: function(res) { var userInfo = res.userInfo var nickName = userInfo.nickName var avatarUrl = userInfo.avatarUrl var gender = userInfo.gender //性別 0：未知、1：男、2：女 var province = userInfo.province var city = userInfo.city var country = userInfo.country } })
獲取系統信息（異步接口）
wx.getSystemInfo({ success: function(res) { console.log(res.model) console.log(res.pixelRatio) console.log(res.windowWidth) console.log(res.windowHeight) console.log(res.language) console.log(res.version) } })
撥打電話
wx.makePhoneCall({ phoneNumber: ‘1340000‘ //僅為示例，并非真實的電話號碼 })
獲取當前的地理位置、速度
wx.getLocation({ type: ‘wgs84‘, success: function(res) { var latitude = res.latitude var longitude = res.longitude var speed = res.speed var accuracy = res.accuracy } })
重要的 var that=this
原來我們忘記了javascript 語言中 this關鍵字的用法了。在javascript語言中，this代表著當前的對象，它在程序中隨著執行的上下文隨時會變化。在本例中回調函數對象相對于showactionsheet點擊事件函數對象已經發生了變化。所以已經不是原來的頁面對象了。自然就沒有了data屬性，也沒有了data.itemLists屬性了。解決的辦法就是復制一份當前的對象。所以我們有了這個重要的語句：
var that=this;//把this對象復制到臨時變量that.
這時候我們使用that 就不會找不到原來的對象了。
console.log(that.data.itemLists[res.tapIndex]);//使用that.data 屬性
四、發布前準備和上線
- 團隊身份管理
- 預覽
- 上傳
- 版本
- 提交審核
- 發布
- 運營數據
浙公網安備 33010602011771號