微信小程序内含H5页面实现方式_微信小程序h5

微信小程序内含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>
1
2

在对相应链接拼接参数，可能需要特殊处理，拼接小程序的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 += `&timestamp=${new Date().getTime()}`;
  return url;
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

• 看业务域名有没有成功，可以看开发工具中的详情
  
  实现以上步骤，即可打开小程序就可以加载到h5写的页面

三、总结

使用h5页面来减少发版的频次，是挺好的方式，但是这样的实现也是有一定风险的，导致小程序被封，例如h5内的页面内容是第三方的，不可控，出现一些风险内容导致使得小程序被关闭。在实际开发中也会有些问题，h5页面在小程序内操作有一定限制的或标签的兼容（小程序提供标签和常规标签）等问题。总的来说，这样的使用有一定的好处的，就你所需来论了