初探微信小程序開發
發布時間：2018-05-04 15:31 所屬欄目：小程序開發教程
背景
項目起始時間：2017-11-28 web-view 的使用應當指定一個特定的路徑，用于打開任意的在業務域名白名單內的頁面。
頁面目錄
由于
<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 基礎庫開始支持的
// 但是其 JS-SDK 卻是從 1.6.6 才開始支持
// 所以這里要求最低為 1.6.6
if (version.isLowerThan('1.6.6')) {
return wx.showModal({
title: '提示',
content: '當前微信版本過低，無法在小程序內打開網頁，請升級到最新微信版本后重試。',
showCancel: false,
confirmText: '知道了',
success() {
wx.navigateBack();
}
});
}
// 可以拿到 URL 里的查詢參數
if (options && options.__host) {
let url = decodeURIComponent(options.__host || '');
const query = Object.assign({}, options);
delete query.__host;
url += '?' + util.stringifyQuery(query);
this.setData({url});
}
})
其他頁面在想使用 web-view 時就可以這樣，方式1： <navigator url="/pages/webview/index?__host=https://your.host.name/path/to/page&query_1=value_1&query_2=value_2"> 通過web-view打開網頁 </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)
});
數據緩存可以比較充分地使用小程序的 storage 接口，進行本地緩存。建議緩存的數據包括： 元數據 用戶登錄后的基礎數據，例如 userId，token 設備ID 圖片資源由于小程序的樣式表里無法使用相對路徑引用圖片文件，所以很多時候只好使用 base64 進行轉碼。 常用的類用于網絡請求的 request.js，支持 Promise 接口 版本判斷，Version.js 時間日期格式化，類似于 moment.js，但是要更為輕量級 URL 解析與序列化，url.js 兼容性iOS 與 Android 平臺下，即便相同的小程序，也有許多細節上的差異。在進行兼容性測試時需要按照 H5 的平臺兼容性進行測試。 此外，還有微信各版本的兼容性測試。前端要基于 Version.js 判斷微信小程序 SDKVersion，以便對低版本進行友好的提示。 |
