微信小程序内含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>
在对相应链接拼接参数,可能需要特殊处理,拼接小程序的cookie值。
// 将object转换成webViewUrlimport 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];// 经理idlet 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页面在小程序内操作有一定限制的或标签的兼容(小程序提供标签和常规标签)等问题。总的来说,这样的使用有一定的好处的,就你所需来论了
微信小程序内含H5页面实现方式相关推荐
- 微信小程序嵌套h5页面怎么实现小程序支付
微信小程序嵌套h5页面怎么实现小程序支付 小程序嵌套h5页面怎么实现小程序支付小程序中嵌套h5页面,但是不能再h5页面拉起小程序支付,这时是需要小程序方拉起支付 目前的流程,外链发送订单请求拿到预支付 ...
- 微信小程序嵌入 H5 页面(web-view)
在开发微信小程序的时候,我们有时候会遇到将 H5 页面嵌入到小程序页面中的情况:微信小程序自带的 web-view 组件相当于 HTML 页面中的 iframe ,方便我们在微信小程序中打开一个 H5 ...
- 微信小程序webview(H5页面)调用微信小程序支付
1.业务描述:微信小程序商城入口进入的页面是商城H5页面,在H5页面进行微信支付如何实现: 2.微信小程序(webview访问H5页面)必须使用微信小程序支付: 如何实现以及实现方式以及支付后页面返回 ...
- 微信小程序嵌套h5页面+发布微信小程序(超级简单)
将发布的h5页面转换成微信小程序,无需重新开发,操作超级简单!!! 使用到的技术为uniapp和web-view 首先,我们先来了解一下web-view是什么: 简单的一句话来讲:web-view 是 ...
- 微信小程序嵌套h5页面,h5页面返回小程序,小程序和h5的页面和交互方法,h5点击分享小程序页面
相信大家在做小程序的时候有些需求会需要嵌套h5页面 正常的h5页面嵌套很简单就是一个web-view然后放入h5链接就可以了 <web-view src="http://www.goo ...
- 微信小程序跳转页面问题
微信小程序跳转页面的方式: 1.跳转至tabBar页面,并关闭其他所有非 tabBar页面 wx.switchTab({ url: '路径' //url同app.json中配置的tabBar路径 }) ...
- 小程序接入h5页面_微信小程序跳转外部链接(h5页面)以及数据交互
最近项目有个需求,在微信小程序中跳转外部链接完成相关的操作,操作完成后返回微信小程序的相关页面. 1.跳转外部链接(官方文档) 1)入口 //跳转到入口 wx.navigateTo({url: '.. ...
- json 微信小程序 筛选_GitHub - zhengyangkang/sl-filter: uni -app 一款使用简单的筛选组件,适配app、微信小程序、H5。...
sl-filter 筛选 筛选组件,组件名:sl-filter dcloud插件市场地址 sl-filter 简介 一款使用简单的筛选组件,适配app.微信小程序.H5. 感谢分享 效果图 并列菜单 ...
- UNI-APP之微信小程序转H5
开始 最近有个需求,需要将微信小程序中一些页面和功能改成h5,这次功能开发的时间有点紧,而且重新写一套有点来不及.考虑到微信小程序与uni-app有着一些共通之处,所以打算直接转成uni-app.un ...
最新文章
- Intel Realsense D435 Tensorlfow-yolov3 测试摄像头识别坐标转换成实际空间坐标的准确程度
- count 数字计数(bzoj 1833)
- 《SAS编程与数据挖掘商业案例》学习笔记之一
- 谷歌浏览器flash崩溃怎么办 Google Chrome flash崩溃解决方法
- 我可以在不提供FTP访问的情况下安装/更新WordPress插件吗?
- 第一行代码笔记-第五章
- CNN——基于CNN的车牌号识别
- MATLAB计算13195的约数,最大约数算法 | Delphi论坛 | Delphi Forum - We Delphi
- Ubuntu 18.04实现实时显示网速
- 一文看懂量子十问(上篇)
- Microsoft Word 论文编排技巧
- 号外:PPG商标被查封 轻工厂泡沫破灭
- 全网功能最全的无水印短视频提取工具
- SPSS 建模数据分析实战之 银行信用评分
- office2016安装后右键新建没有word、excel、ppt等解决方法
- 快速求解 best F1-score 以及对应的阈值
- python 词库 匹配_python从一段文本中找出存在于词库的词语
- 试题 历届真题 机器人行走(C语言实现)
- 基于matlab菌落影像分割方法,基于MATLAB的图像分割方法及应用-
- 2022-2027年中国西服行业市场调研及未来发展趋势预测报告