微信小程序的簡單總結

前言

最近學習小程序的開發，基於小程序的原生架構，寫了個小demo，基本的控件使用與網絡請求，頁面跳轉有涉及到。算是有了個初步的入門。所以有了這篇總結，一方面是做下筆記，另一方面是給大家做下分享

項目結構

如下圖所示，基於微信的工程結構，我的理解是pages每個目錄的子目錄，都是基於UI維度來管理與維護一個模塊的代碼。當你創建了一個子目錄後，在子目錄增加一個page頁面時，對應的配置文件（json文件）、視圖文件（wxml）、對於該模塊的局部樣式文件（wxss）會自動生成，另外也會在根目錄的app.json的pages屬於中，添加新創頁面的路由/路徑。（這裏有個小細節，第一個路徑是小程序打開時的第一個頁面）

其中一個pages的子目錄，是可以放多個page頁面的，但不建議這個做！一個模塊僅有一個套pages，更能表現模塊的獨立與方便後期的維護。

控件的使用

控件的使用，主要有兩點，第一是UI，這就需要熟悉CSS的語法和基礎的用法；第二是事件處理，這個基本很簡單，查看文檔，看監聽事件的屬性是那個。屬性值寫個方法的各稱，在js文件聲名該方法，添加相關業務邏輯即可。一個控件的使用，一般會處理數據的輸入/展示，還有數據的輸出，即對某個數據的操作，然後有個結果值。所以一個在page對應的js的data數據區會有定義一個變量來存在操作的數據，然後控件在用戶的操作後，會有一個結果輸出。對於picker控件，首先需要有顯示的數據集，然後有一個當前選中的索引。在控件的選擇按鈕事件，我們來更改當前選中的索引值。如下是picker選擇器的示例。

weui的使用

我一般是下載到本地，放到本地一個目錄下邊，在app.wxss中import進去

網絡API的使用

最好是做下二次封閉，使用promise，如下是個簡單的示例

const getToken = (appId, uid) => new Promise((resolve, reject) => {
  wx.request({
    url: `${autherServer}${autherPath}?uid=${uid}&appid=${appId}`,
    header: {
      'content-type': 'application/json;charset=utf-8'
    },
    method: 'GET',
    success({ data, statusCode }) {
      util.log(TAG, `獲取token的返回, data = ${data}, statusCode = ${statusCode}`)
      if (statusCode === 200) {
        resolve(data)
      } else {
        reject(data)
      }
    },
    fail(error) {
      util.log(TAG, `獲取token失敗, error = ${error}`)
      reject(error)
    }
  })
})

一些小技巧

不校驗請求域名

在微信開發者工具中，開發者可以臨時開啓“開發環境不校驗請求域名、TLS版本及HTTPS證書”，跳過服務器域名的校驗，這樣，在微信開發者工具中及手機開啓調試模式時，不會校驗服務器域名。方便開發與測試

使用求值表達來組成字符串

如下示例

      util.log(TAG, `createRoom, new region = ${region}, roomId = ${roomId}`)

頁面跳轉

 wx.navigateTo({
      url: '../roommember/roommember' //目錄頁面路由，注意不需要文件名後綴
    })

頁面標題欄的更改

在當頁面對應的js配置文件添加navigationBarTitleText以及配置其值

格式化代碼

mac下，command + A, Shift + alt + F，來格式化代碼，保持代碼風格的統一，以及減少多餘的無用的可格等