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

認(rèn)識小程序

語言及開發(fā)工具

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

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

入口文件

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

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

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

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

生命周期

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

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

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

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

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

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

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

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

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

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

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

tabBar

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

樣式

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

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

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

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

官方獲取網(wǎng)絡(luò)狀態(tài)的API是 getNetworkType 為異步接口，通過它的返回結(jié)果再進(jìn)行下一步（是顯示無網(wǎng)絡(luò)還是調(diào)用數(shù)據(jù)列表接口），說到這里大家都知該怎么辦了—— 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í)候最大的問題呢是：無論是開發(fā)者工具上還是手機(jī)上，記得先把緩存刪干凈再測。特別是開發(fā)者工具每次切換host都要清理緩存，再重新打開，而且出現(xiàn)bug的時(shí)候盡量多測幾次，進(jìn)行反復(fù)確定。不然的話，你可能會發(fā)現(xiàn)，本來測好的功能又出現(xiàn)問題了，或者是本來有問題的部分又沒有問題了。