1. 程式人生 > >微信小程序開發學習(一)

微信小程序開發學習(一)

接受 ext 配置 微信小程序開發 onf error n) chan thead

一、各種JSON配置

1、小程序配置app.json

為小程序全局配置,包括所有頁面路徑、界面表現、網絡超時時間、底部tab等,類比APP開發中manifest配置。

2、工具配置project.config.json

一些個性化配置,暫時沒遇到需要用到的地方。

3、頁面配置page.json

獨立定義每個頁面一些屬性,如頂部顏色、是否允許下拉刷新。不過色調感覺還是統一定義比較好,適合多個頁面情況,一般來說小程序主要是結合tab實現多頁面。

二、WXML

1、標簽名

類比HTML,不過標簽名是view、button、text 等,更貼近APP開發控件名。

2、一些屬性與表達式

網頁開發時提倡把渲染與邏輯分離,即不讓JS直接操控DOM,只需管理狀態,小程序也是同樣的思路。如:

WXML:

<text>{{msg}}</text>

JS:

this.setData({msg: ‘Hello World‘})

以上通過{{ }}的語法把一個變量綁定到界面上,即數據綁定。除此之外,還需要 if/else, for等控制能力,這些控制能力都用 wx: 開頭的屬性來表達。

三、API

1、事件監聽API

以on開頭的API用來監聽某個事件是否觸發,如:wx.onSocketOpenwx.onCompassChange等。

這類API接受一個回調函數作為參數,當事件觸發時會調用這個回調函數,並將相關數據以參數形式傳入。如:

wx.onCompassChange(function (res) {
  console.log(res.direction)
})

2、同步API

以Sync結尾的API都是同步API,如wx.setStorageSyncwx.getSystemInfoSync等。同步 API 的執行結果可以通過函數返回值直接獲取,如果執行出錯會拋出異常。如:

try {
  wx.setStorageSync('key', 'value')
} catch (e) {
  console.error(e)
}

3、異步API

這類 API 接口通常都接受一個 Object 類型的參數,這個參數都支持按需指定以下字段來接收接口調用結果:

Object參數說明

參數名 說明
success 接口調用成功的回調函數
fail 接口調用失敗的回調函數
complete 接口調用結束的回調函數(調用成功、失敗都會執行)

回調函數的參數

屬性 類型 說明
errMsg string 錯誤信息,如果調用成功返回 ${apiName}:ok
errCode number 錯誤碼,僅部分 API 支持,具體含義請參考對應 API 文檔,成功時為 0

4、一些示例

獲取用戶地理位置

wx.getLocation({
  type: 'wgs84',
  success: (res) => {
    const latitude = res.latitude // 緯度
    const longitude = res.longitude // 經度
  }
})

微信掃一掃

wx.scanCode({
  success: (res) => {
    console.log(res)
  }
})

多數API回調都為異步,異步API的執行結果需要通過Object類型的參數中傳入的對應回調函數獲取。部分異步API也會有返回值,可以用來實現更豐富的功能。

微信小程序開發學習(一)