初探微信小程序開發 - 新聞資(zī)訊 - 雲南小程序開發|雲南軟件開發|雲南網站(zhàn)建設-西山區知普網絡科技工作室

159-8711-8523

雲南網建設/小程序開發/軟件開發

知識

不管是網站(zhàn),軟件還是小程序,都要直接或間接能為您産生價值,我們在追求其視覺表現的同時,更側重于功能的便捷,營銷的便利,運營的高效,讓網站(zhàn)成為營銷工具,讓軟件能切實提升企業(yè)内部管理水平和(hé)效率。優秀的程序為後期升級提供便捷的支持!

初探微信小程序開發

發表時間:2021-3-31

發布人:葵宇科技

浏覽次數:31

背景

項目起始時間:2017-11-28
前端人數: 3
頁面數: 6
一期上線時間:2018-01-16
在我們開發的過程中(zhōng),小程序的生态也不斷變化。例如(rú) 最開始不支持其打開的 web 頁面調起小程序頁面,後來則新增了 JS-SDK 并在高版本的基礎庫裡支持了這樣的功能;再例如(rú)它的 IDE 不斷優化升級,開發體驗變好;頁面的5級跳轉限制,改為了10級;小程序體積限制由 1MB 擴大為了 2MB …… 總體來說,一直在朝着好的方向發展。

web-view 的使用

應當指定一個(gè)特定的路(lù)徑,用于打開任意的在業(yè)務域名白名單内的頁面。

頁面目錄

由于 所在頁面隻會渲染 web 頁面,其他任何組件都不顯示,所以,在相應的 HTML 裡就隻包含這樣的一個(gè)組件即可(kě):

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

web-view/index.js 的主要邏輯如(rú)下(xià):

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();
}
});
}
// 可(kě)以拿到 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 時就可(kě)以這樣,方式1:

<navigator url="/pages/webview/index?__host=https://your.host.name/path/to/page&query_1=value_1&query_2=value_2">
通(tōng)過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)
});

數據緩存

可(kě)以比較充分地使用小程序的 storage 接口,進行本地緩存。建議緩存的數據包括:

元數據
用戶登錄後的基礎數據,例如(rú) userId,token
設備ID

圖片資(zī)源

由于小程序的樣式表裡無法使用相對路(lù)徑引用圖片文(wén)件,所以很多時候隻好使用 base64 進行轉碼。

常用的類

用于網絡請求的 request.js,支持 Promise 接口
版本判斷,Version.js
時間日期格式化,類似于 moment.js,但是要更為輕量級
URL 解析與序列化,url.js

兼容性

iOS 與 Android 平台下(xià),即便相同的小程序,也有許多細節上的差異。在進行兼容性測試時需要按照 H5 的平台兼容性進行測試。

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

相關(guān)案例查看更多