微信小程序html5-微信小程序包含H5页面的实现方法

bendan520 html5

2023-08-29 0 4,862 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

微信小程序包含H5页面实现方法1.后台

众所周知，我们写完一个小程序并发布到网上后，需要经历设置版本、提交代码初审、等待初审等步骤。发布一个版本可能要花很多时间，甚至可能要等很长时间，审核失败。重新提交初审。这个流程上线后，可能存在很多不确定因素导致上线时间延迟，而某个模块的业务频繁变更，就需要频繁发布。我们怎样才能减少发布的数量？多常？然后，h5页面就被插入到了陌陌小程序中。这个h5是专门为经常变化的模块编写的。该模块引入的变更并未引起陌陌小程序内部的变更，因此无需发布版本。这是我们项目的陌陌小程序写的h5页面的背景。

二、具体用途 1、实现条件

1.1. 实现陌陌小程序包含的H5页面所需的容器标签为：web-view，使用时需要注意：

1.2. h5项目中，需要导出wx-jssdk包。使用h5页面跳转到小程序中的页面（例如h5页面的商品跳转到小程序中的商品详情）：wx.miniProgram.navigateTo，wx.miniProgram.navigateTo微信小程序 html5，wx.miniProgram.navigateTo，wx.miniProgram.navigateTo。 miniProgram.switchTab等API；

微信小程序文档

2.微信公众平台配置

需要在小程序下的微信公众平台配置h5域名作为其业务域名：

登录微信公众平台=》开发管理=企业域名（个人版没有企业域名设置）

3.创建h5项目

创建项目后，导出html文件中的wx-jssdk包

4.创建的小程序的处理

以我的项目为例：

// 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 += `&timestamp=${new Date().getTime()}`;
  return url;
};

三、总结

利用h5页面来减少发布频率是一个很好的方法，但是这样的实现也存在一定的风险，导致小程序的阻塞。例如，h5中的页面内容是第三方的，不可控的微信小程序html5，出现一些风险内容导致小程序被关闭。在实际开发中，会遇到一些问题，比如小程序中h5页面的操作有一定的限制或者标签的兼容性（小程序提供标签和常规标签）等问题。一般情况下，这种使用方式一定程度上有用，就看你需要什么了

收藏 (0) 打赏

感谢您的支持，我会继续努力的!