有时候小程序需要按照不同需求加载不同的page, 此时要求页面的可配，以及页面种类的可增加，此时考虑使用h5 来替代不同业务功能。本文以微信小程序为例。
一、小程序跨平台
跨平台种类，这里调研了几个：
uni-app： vue的技术栈
taro： react的技术栈
wepy：类vue的技术栈
mpvue：vue的技术栈
个人感觉uni-app 的功能更强大些，但是奈何收费，退而求其次选择了taro,由凹凸实验室开发的一个优秀的框架。有人写过一篇详细评测文章：点这里
二、小程序使用H5的步骤
在微信小程序添加组件
<web-view></web-view>, 将指定的H5路径添加进组件，并在管理平台配置业务域名。H5 中添加微信支持的jssdk, 从而可以操作小程序的一些事件。
-
微信小程序往H5进行传递参数，一般是通过拼接URL 参数进行传递，如果传递对象，需要进行base64，或者json 进行序列化以防止转义。
在小程序端 通过组件
<web-view></web-view>加载网络地址。
<!-- 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 往小程序传递参数，一般是通过官方提供的jssdk 进行，官方给出说法是：
- 首先通过H5 调用
wx.miniProgram.postMessage({ data: {foo: 'bar'} }) - 其次小程序端获取通过 组件
<web-view bindmessage="bindmessageTap"></web-view>, 可以他的触发时机是有限制（只在小程序后退、组件销毁、分享）。常用的方式就是在分享的时候给小程序传递分享的title和分享的图片 - 另外这一种交互我觉得只能释放一些资源，没法发做到实时的交互操作
- 思考： 这里我觉得如果在H5 中必须使用微信小程序的操作，比如支付接口。此时可以通过H5跳转小程序页面去执行支付操作，成功后然后返回H5 页面 并携带标记成功的字段。
- 局限：小程序某些API并不支持，小程序产生的formID 获取失败
- 结论： H5只做基础的展示，不做小程序功能的业务。
- 首先通过H5 调用
三、举个栗子
上图是之前做过的一个小程序 ，主要是提供福利功能，分为三个tab：首页抽奖福利、第二页步数换福利、第三页我的个人信息查看以及一些历史数据的查阅。
这时候新的需求来了：我想要将下方的tab做成动态配置的功能选项，最后一个我的模块不变，前面的功能有抽奖、步数换或者其他的功能页面，这些功能放在后台的功能池中可以进行自由配置组合。此外，我还想要在百度小程序，字节跳动小程序上上小程序。
问题：不确定到底有多少功能页面 ，全部在小程序端写的话，可能会面临 2M（分包后8M）的限制，另外会出现资源的浪费以及复杂度的增加。这时候考虑动态配置H5进行通过做一个适配层的小程序来包裹H5。另外对于跨平台的问题，通过使用taro框架实现即可。
具体步骤：
使用taro开发个壳，然后即首屏采用H5进行加载，在H5中进行配置
-
加载H5，通过小程序向H5传递数据：
- 业务参数：userId, openId, appId, appSecret 等
- 组件参数：通过小程序自身获取的参数，比如 地理位置信息、步数、formId （根据最新的文档显示这块需要整改成通过调用API获取模版消息发送权限）等
开发H5页面：这里需要引包，包含微信小程序在内的小程序提供的jssdk，目前各家就微信自身支持的比较全面，其他的也都提供了基础的功能，比如在H5中直接可以跳转指定小程序页面，并携带参数。（因为各家支持的力度不一样，所以这里建议只使用这一项基础功能即可）
可能面临的问题：H5中无法像原生的一样调用小程序自身的API，比如登录、获取定位、支付等操作。这里的想法是做一个中间页面，专门用来授权各个功能，并将数据返回给H5页面。同理，对于一些需要发送模版消息类的操作 ，也建议拉出来做成小程序原生页面。
最后的方案是混合开发：
小程序：
登录 --- 打开原生登录页
福利详情页面以及奖品页面（因为这个页面需要收集formID，以及执行一些复杂的跳转操作，比如获取登录、客服消息、跳转小程序等）
H5：
- 首页+tab+标题 :{
首页
功能（步数换等多个页面）：步数授权 跳转新的小程序原生页面
我的： 登录/跳转小程序 需要 ：跳转原生页面；
}
- 可供浏览的各个功能的列表页面，以及不涉及小程序操作的页面。
最后，这是从我的个人角度想到的一种处理方式，如果有更好的方法，或者错误的地方，还请留言告知，多谢！！！
