微信小程序出來(lái)也有一段時(shí)間了，之前也陸續(xù)做過(guò)demo練練手，畢竟自己的demo還是比較簡(jiǎn)單的，如今參與公司的項(xiàng)目也是一路踩坑而來(lái)。

認(rèn)識(shí)小程序

語(yǔ)言及開(kāi)發(fā)工具

首先，小程序類(lèi)Web，但不同于我所認(rèn)識(shí)的HTML，他有屬于自己的開(kāi)發(fā)語(yǔ)言及工具：

  • JavaScript: 微信小程序的 JavaScript 運(yùn)行環(huán)境即不是 Browser 也不是 Node.js。它運(yùn)行在微信 App 的上下文中，不能操作 Browser context 下的 DOM，也不能通過(guò) Node.js 相關(guān)接口訪問(wèn)操作系統(tǒng) API。
  • WXML: 作為微信小程序的展示層，并不是使用 Html，而是自己發(fā)明的基于 XML 語(yǔ)法。
  • WXSS: 用來(lái)修飾展示層的樣式。官方的描述是 “ WXSS (WeiXin Style Sheets) 是一套樣式語(yǔ)言，用于描述 WXML 的組件樣式。WXSS 用來(lái)決定 WXML 的組件應(yīng)該怎么顯示?！?/li>
  • 小程序開(kāi)發(fā)工具，開(kāi)發(fā)者可以完成小程序的 API 和頁(yè)面的開(kāi)發(fā)調(diào)試、代碼查看和編輯、小程序預(yù)覽和發(fā)布等功能。

入口文件

小程序主要包含以下三個(gè)入口文件：

  • app.js 這個(gè)文件是整個(gè)小程序的入口文件，我們主要做了網(wǎng)絡(luò)檢測(cè)、用戶信息獲取等；當(dāng)讓也可以注入公用的方法在其他頁(yè)面中去通過(guò) getApp() 調(diào)用（注：頁(yè)面中調(diào)用app.js中的方法時(shí)不需要通過(guò) require 或者 import 引入）
  • app.json 這個(gè)文件可以對(duì)小程序進(jìn)行全局配置，決定頁(yè)面文件的路徑、整體窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間、設(shè)置多tab等.
  • app.wxss 是小程序的公共樣式表

項(xiàng)目開(kāi)發(fā)

本次項(xiàng)目只負(fù)責(zé)了首頁(yè)、授權(quán)和一些公共模塊的開(kāi)發(fā)，接下來(lái)就著重從這些模塊展開(kāi)。

生命周期

當(dāng)然，微信小程序和其他前端框架類(lèi)似也是有生命周期的：

Page({
/**
* 頁(yè)面的初始數(shù)據(jù)
*/
data: {},

/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載（像首頁(yè)數(shù)據(jù)請(qǐng)求可以放在這里）
*/
onLoad: function (options) {},

/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面初次渲染完成
*/
onReady: function () {},

/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示
*/
onShow: function () {},

/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面隱藏
*/
onHide: function () {},

/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載
*/
onUnload: function () {},

/**
* 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶下拉動(dòng)作（這里添加了下拉刷新的功能）
*/
onPullDownRefresh: function () {},

/**
* 頁(yè)面上拉觸底事件的處理函數(shù)
*/
onReachBottom: function () {},

/**
* 用戶點(diǎn)擊右上角分享
*/
onShareAppMessage: function () {}
})

當(dāng)我們?cè)? data 中初始化的值需要修改時(shí)，可在各生命周期及方法中通過(guò) setData() 修改。由于小程序的入口頁(yè)面就是首頁(yè)，在首頁(yè)添加了用戶登陸和網(wǎng)絡(luò)狀態(tài)的檢測(cè)在 onLoad 中。

tabBar

tabBar即小程序的底部導(dǎo)航欄，由于微信的限制，最少2個(gè)最多5個(gè)導(dǎo)航欄，只可設(shè)置文案、圖標(biāo)。

樣式

小程序樣式采用WXSS語(yǔ)言（具有CSS大部分特性）。他也提供了一種新的單位rpx（可根據(jù)屏幕寬度自行適應(yīng)）。官方規(guī)定屏幕寬為750rpx。如在 iPhone6 上，屏幕寬度為375px，共有750個(gè)物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素，既然這樣我們也推薦了我們?cè)O(shè)計(jì)師采用iPhone6作為設(shè)計(jì)標(biāo)準(zhǔn)，即750px寬度。

但是在實(shí)際的開(kāi)發(fā)過(guò)程中如果字體大小也使用rpx做單位的話，在iPhone6 Puls上顯示文字過(guò)大，影響美觀。后經(jīng)過(guò)測(cè)試采用了px做單位，即原設(shè)計(jì)稿尺寸的一半+px，這樣可以保證文字大小在各設(shè)備中保持一致。

網(wǎng)絡(luò)狀態(tài)

在官方文檔上有明確規(guī)定，本地資源是無(wú)法通過(guò)CSS獲取的，圖片的話只能使用網(wǎng)絡(luò)資源或base64方式。首頁(yè)有個(gè)需要判斷網(wǎng)絡(luò)狀態(tài)的需求，由于斷網(wǎng)情況下無(wú)法獲取網(wǎng)絡(luò)資源，最后就使用了base64的方式。

官方獲取網(wǎng)絡(luò)狀態(tài)的API是 getNetworkType 為異步接口，通過(guò)它的返回結(jié)果再進(jìn)行下一步（是顯示無(wú)網(wǎng)絡(luò)還是調(diào)用數(shù)據(jù)列表接口），說(shuō)到這里大家都知該怎么辦了—— Promise ，具體封裝如下 

new Promise((resolve, reject) => {
  let req = wx.getNetworkType({
    success: function (res) {
      var networkType = res.networkType;
      if (networkType === 'none') {
        resolve(false)
      } else {
        resolve(true)
      }
    },
    fail() {
      reject(false)
    }
  });
})

調(diào)試

調(diào)試的時(shí)候最大的問(wèn)題呢是：無(wú)論是開(kāi)發(fā)者工具上還是手機(jī)上，記得先把緩存刪干凈再測(cè)。特別是開(kāi)發(fā)者工具每次切換host都要清理緩存，再重新打開(kāi)，而且出現(xiàn)bug的時(shí)候盡量多測(cè)幾次，進(jìn)行反復(fù)確定。不然的話，你可能會(huì)發(fā)現(xiàn)，本來(lái)測(cè)好的功能又出現(xiàn)問(wèn)題了，或者是本來(lái)有問(wèn)題的部分又沒(méi)有問(wèn)題了。