背景

項(xiàng)目起始時(shí)間：2017-11-28
前端人數(shù)： 3
頁(yè)面數(shù)： 6
一期上線(xiàn)時(shí)間：2018-01-16
在我們開(kāi)發(fā)的過(guò)程中，小程序的生態(tài)也不斷變化。例如 最開(kāi)始不支持其打開(kāi)的 web 頁(yè)面調(diào)起小程序頁(yè)面，后來(lái)則新增了 JS-SDK 并在高版本的基礎(chǔ)庫(kù)里支持了這樣的功能；再例如它的 IDE 不斷優(yōu)化升級(jí)，開(kāi)發(fā)體驗(yàn)變好；頁(yè)面的5級(jí)跳轉(zhuǎn)限制，改為了10級(jí)；小程序體積限制由 1MB 擴(kuò)大為了 2MB …… 總體來(lái)說(shuō)，一直在朝著好的方向發(fā)展。

web-view 的使用

應(yīng)當(dāng)指定一個(gè)特定的路徑，用于打開(kāi)任意的在業(yè)務(wù)域名白名單內(nèi)的頁(yè)面。

頁(yè)面目錄

由于 所在頁(yè)面只會(huì)渲染 web 頁(yè)面，其他任何組件都不顯示，所以，在相應(yīng)的 HTML 里就只包含這樣的一個(gè)組件即可：

<web-view src="{{url}}"></web-view>

web-view/index.js 的主要邏輯如下：

Page({
  data: {
    url: '',
  },
  onLoad() {
    const sysInfo = wx.getSystemInfoSync();
    const version = new Version(sysInfo.SDKVersion);
    // web-view 組件是 1.6.4 基礎(chǔ)庫(kù)開(kāi)始支持的
    // 但是其 JS-SDK 卻是從 1.6.6 才開(kāi)始支持
    // 所以這里要求最低為 1.6.6
    if (version.isLowerThan('1.6.6')) {
      return wx.showModal({
        title: '提示',
        content: '當(dāng)前微信版本過(guò)低，無(wú)法在小程序內(nèi)打開(kāi)網(wǎng)頁(yè)，請(qǐng)升級(jí)到最新微信版本后重試。',
        showCancel: false,
        confirmText: '知道了',
        success() {
          wx.navigateBack();
        }
      });
    }
    // 可以拿到 URL 里的查詢(xún)參數(shù)
    if (options && options.__host) {
      let url = decodeURIComponent(options.__host || '');
      const query = Object.assign({}, options);
      delete query.__host;
      url += '?' + util.stringifyQuery(query);
      this.setData({url});
  }
})

其他頁(yè)面在想使用 web-view 時(shí)就可以這樣，方式1：

<navigator url="/pages/webview/index?__host=https://your.host.name/path/to/page&query_1=value_1&query_2=value_2">
  通過(guò)web-view打開(kāi)網(wǎng)頁(yè)
</navigator>

或者方式2:

const url = 'https://your.host.name/path/to/page?query_1=value_1&query_2=value_2';
wx.navigateTo({
  url: '/pages/webview/index__host=' + encodeURIComponent(url)
});

數(shù)據(jù)緩存

可以比較充分地使用小程序的 storage 接口，進(jìn)行本地緩存。建議緩存的數(shù)據(jù)包括：

元數(shù)據(jù)
用戶(hù)登錄后的基礎(chǔ)數(shù)據(jù)，例如 userId，token
設(shè)備ID

圖片資源

由于小程序的樣式表里無(wú)法使用相對(duì)路徑引用圖片文件，所以很多時(shí)候只好使用 base64 進(jìn)行轉(zhuǎn)碼。

常用的類(lèi)

用于網(wǎng)絡(luò)請(qǐng)求的 request.js，支持 Promise 接口
版本判斷，Version.js
時(shí)間日期格式化，類(lèi)似于 moment.js，但是要更為輕量級(jí)
URL 解析與序列化，url.js

兼容性

iOS 與 Android 平臺(tái)下，即便相同的小程序，也有許多細(xì)節(jié)上的差異。在進(jìn)行兼容性測(cè)試時(shí)需要按照 H5 的平臺(tái)兼容性進(jìn)行測(cè)試。

此外，還有微信各版本的兼容性測(cè)試。前端要基于 Version.js 判斷微信小程序 SDKVersion，以便對(duì)低版本進(jìn)行友好的提示。