微信小程序内含H5页面实现方式
一、背景
众所周知，我们写完小程序，发到线上，是需要经历设置版本、提交代码审核、等待审核等步骤，放一个版本下来可能花费很多的时间，甚至很可能等待了很长时间，审核未通过，又要重新提交审核。这个流程走下来，到线上，可能会有诸多的不确定因素而导致延迟上线时间，并且对某个模块业务上需要频繁改动，那就需要经常发版了，以此如何可以减少发版的频率呢？那么就油然而生了微信小程序中插入h5页面，这个h5就专门写频繁改动的模块，引入这个模块的变动，并没有导致微信小程序内部的变动，所以就不需要发版了。这就是我们项目微信小程序中内写h5页面的背景了。
二、具体使用
1、实现的条件
1.1、实现微信小程序内含H5页面所需要用的容器标签是：web-view，这个在使用时需要注意：
- 个人类型的小程序暂不支持使用。
- 客户端 6.7.2 版本开始，navigationStyle: custom 对 web-view 组件无效
- 小程序插件中不能使用。
- web-view网页中可使用JSSDK 1.3.2提供的接口返回小程序页面
1.2、在h5项目中需要导入wx-jssdk包，要使用到h5页面跳到小程序内的页面（例如h5页面的产品跳到小程序内的产品详情。）：wx.miniProgram.navigateTo、wx.miniProgram.switchTab等API；
2、微信公众平台配置
h5的域名需要在该小程序下的微信公众平台中配置为其业务域名：
登录微信公众平台=》开发管理=》业务域名 （个人版本时没有业务域名设置的）
3、创建h5项目
创建完该项目后，在html文件中导入wx-jssdk包
4、在创建的小程序的处理
以我的项目为例：
-
在根文件下创建的config，创建web-view-config.js文件
-
下面为web-view-config文件内容，导出的是为web-view标签加载的链接
-
使用web-view，提供了几个事件如：bindmessage、binderror等，可见微信开发文档，这几个事件可用可不用，视具体情况而论
// webViewUrl 为跳转的链接
<web-view wx:if="{
{webViewUrl}}" src="{
{webViewUrl}}" bindmessage="bindMsg"></web-view>
在对相应链接拼接参数，可能需要特殊处理，拼接小程序的cookie值。
// 将object转换成webViewUrl
import WebViewConfig from '../../../config/web-view-config.js';
//拼接参数
this.setData({
webViewUrl: `${
WebViewConfig.newsDetail}${
convertWebViewUrl(webViewParams)}`,
});
const convertWebViewUrl = (obj = {
}) => {
let url = '';
// url添加登录态
const caizhi_key = wx.getStorageSync('cookie').split(';')[0].split('=')[1];
// 经理id
let staffId = '';
const {
isManager, managerInfo = {
}, customerInfo = {
} } = getApp().globalData;
if (isManager) {
staffId = managerInfo.staffId;
} else {
staffId = customerInfo.visitManagerStaffId;
}
url += `?caizhi_key=${
caizhi_key}&staffId=${
staffId}`;
// url格式化参数
const params = Object.keys(obj).reduce((prev, curr) => {
return `${
prev}&${
curr}=${
obj[curr]}`;
}, '');
url += encodeURIComponent(params);
// url添加时间戳，清缓存
url += `×tamp=${
new Date().getTime()}`;
return url;
};
- 看业务域名有没有成功，可以看开发工具中的详情
实现以上步骤，即可打开小程序就可以加载到h5写的页面
三、总结
使用h5页面来减少发版的频次，是挺好的方式，但是这样的实现也是有一定风险的，导致小程序被封，例如h5内的页面内容是第三方的，不可控，出现一些风险内容导致使得小程序被关闭。在实际开发中也会有些问题，h5页面在小程序内操作有一定限制的或标签的兼容（小程序提供标签和常规标签）等问题。总的来说，这样的使用有一定的好处的，就你所需来论了
文章评论