有時候小程序需要按照不同需求加載不同的page, 此時要求頁面的可配，以及頁面種類的可增加，此時考慮使用h5 來替代不同業(yè)務功能。本文以微信小程序為例。
一、小程序跨平臺
跨平臺種類，這里調研了幾個：
uni-app： vue的技術棧
taro： react的技術棧
wepy：類vue的技術棧
mpvue：vue的技術棧
個人感覺uni-app 的功能更強大些，但是奈何收費，退而求其次選擇了taro,由凹凸實驗室開發(fā)的一個優(yōu)秀的框架。有人寫過一篇詳細評測文章：點這里
二、小程序使用H5的步驟
在微信小程序添加組件
<web-view></web-view>, 將指定的H5路徑添加進組件，并在管理平臺配置業(yè)務域名。H5 中添加微信支持的jssdk, 從而可以操作小程序的一些事件。
-
微信小程序往H5進行傳遞參數(shù)，一般是通過拼接URL 參數(shù)進行傳遞，如果傳遞對象，需要進行base64，或者json 進行序列化以防止轉義。
在小程序端 通過組件
<web-view></web-view>加載網(wǎng)絡地址。
<!-- pages/web-view/web-view.wxml -->
<web-view src="{{url}}" bindmessage="bindmessageTap"></web-view>
// pages/web-view/web-view.js
const app = getApp()
Page({
data: {
url: ''
},
onLoad: function(options) {
// 假設已經取得 token 并設置為全局變量
const token = app.global.token
this.setData({
url: `https://mp.weixin.qq.com/?token=${token}`
})
},
bindmessageTap() {
}
})
- H5 往小程序傳遞參數(shù)，一般是通過官方提供的jssdk 進行，官方給出說法是：
- 首先通過H5 調用
wx.miniProgram.postMessage({ data: {foo: 'bar'} }) - 其次小程序端獲取通過 組件
<web-view bindmessage="bindmessageTap"></web-view>, 可以他的觸發(fā)時機是有限制（只在小程序后退、組件銷毀、分享）。常用的方式就是在分享的時候給小程序傳遞分享的title和分享的圖片 - 另外這一種交互我覺得只能釋放一些資源，沒法發(fā)做到實時的交互操作
- 思考： 這里我覺得如果在H5 中必須使用微信小程序的操作，比如支付接口。此時可以通過H5跳轉小程序頁面去執(zhí)行支付操作，成功后然后返回H5 頁面 并攜帶標記成功的字段。
- 局限：小程序某些API并不支持，小程序產生的formID 獲取失敗
- 結論： H5只做基礎的展示，不做小程序功能的業(yè)務。
- 首先通過H5 調用
三、舉個栗子
上圖是之前做過的一個小程序 ，主要是提供福利功能，分為三個tab：首頁抽獎福利、第二頁步數(shù)換福利、第三頁我的個人信息查看以及一些歷史數(shù)據(jù)的查閱。
這時候新的需求來了：我想要將下方的tab做成動態(tài)配置的功能選項，最后一個我的模塊不變，前面的功能有抽獎、步數(shù)換或者其他的功能頁面，這些功能放在后臺的功能池中可以進行自由配置組合。此外，我還想要在百度小程序，字節(jié)跳動小程序上上小程序。
問題：不確定到底有多少功能頁面 ，全部在小程序端寫的話，可能會面臨 2M（分包后8M）的限制，另外會出現(xiàn)資源的浪費以及復雜度的增加。這時候考慮動態(tài)配置H5進行通過做一個適配層的小程序來包裹H5。另外對于跨平臺的問題，通過使用taro框架實現(xiàn)即可。
具體步驟：
使用taro開發(fā)個殼，然后即首屏采用H5進行加載，在H5中進行配置
-
加載H5，通過小程序向H5傳遞數(shù)據(jù)：
- 業(yè)務參數(shù)：userId, openId, appId, appSecret 等
- 組件參數(shù)：通過小程序自身獲取的參數(shù)，比如 地理位置信息、步數(shù)、formId （根據(jù)最新的文檔顯示這塊需要整改成通過調用API獲取模版消息發(fā)送權限）等
開發(fā)H5頁面：這里需要引包，包含微信小程序在內的小程序提供的jssdk，目前各家就微信自身支持的比較全面，其他的也都提供了基礎的功能，比如在H5中直接可以跳轉指定小程序頁面，并攜帶參數(shù)。（因為各家支持的力度不一樣，所以這里建議只使用這一項基礎功能即可）
可能面臨的問題：H5中無法像原生的一樣調用小程序自身的API，比如登錄、獲取定位、支付等操作。這里的想法是做一個中間頁面，專門用來授權各個功能，并將數(shù)據(jù)返回給H5頁面。同理，對于一些需要發(fā)送模版消息類的操作 ，也建議拉出來做成小程序原生頁面。
最后的方案是混合開發(fā)：
?小程序：
登錄 --- 打開原生登錄頁
福利詳情頁面以及獎品頁面（因為這個頁面需要收集formID，以及執(zhí)行一些復雜的跳轉操作，比如獲取登錄、客服消息、跳轉小程序等）
? H5：
- 首頁+tab+標題 :{
? 首頁
? 功能（步數(shù)換等多個頁面）：步數(shù)授權 跳轉新的小程序原生頁面
? 我的： 登錄/跳轉小程序 需要 ：跳轉原生頁面；
}
- 可供瀏覽的各個功能的列表頁面，以及不涉及小程序操作的頁面。
最后，這是從我的個人角度想到的一種處理方式，如果有更好的方法，或者錯誤的地方，還請留言告知，多謝！?。?/strong>
