微信小程序调试webview_微信小程序内嵌webview相关知识点整理
前言
随着微信小程序的广泛应用,越来越多的商家选择将营销阵营选择迁移到了小程序中,但受其小程序体积限制的影响,不能够完全满足商户的要求,应运而生的web-view组件很好的解决的这一问题。一方面内嵌web-view能够直接运行在小程序中,大大减少了商户的开发成本,另一方面能够实现小程序与h5的跳转,有良好的扩展性,方便商户多端间引流。
一、web-view内嵌h5与传统小程序对比
通过查找相关资料发现,内嵌web-view和微信小程序在离线能力、页面切换体验、二次渲染,操作响应和开发灵活性上有如下对比,在不同场景下可能性能上有些许出入,仅供参考。
从上表中可以对比出 H5 相较于小程序的优缺点,开发者可以根据实际需要选择。此外,使用web-view还有以下优点:
(1)己方账号(第三方)与小程序openId/UnionId的关联绑定,实现免登陆
比如你是某门户网站,需要识别自己小程序上的用户与网站用户的关系,可以通过三种方法绑定关系,公众号,小程序原生,小程序web-view内嵌跳转三种方法。
(2)内嵌H5的富文本,减少重复开发
比如你是门户网站,社区,以往有大量的新闻和帖子,里面带了各种css样式的富文本,音视频自定义的点击事件等,小程序的原生组件可能无法兼容,这时候直接内嵌这些H5新闻,将会大大降低开发成本。
(3)热更新,减少发布审核
内嵌H5可以减少频繁提交小程序审核,商户只需要重新发布h5的版本,就可以更新内嵌web-view的内容。
3.4 web-view和小程序间通信
官方给出了两种通信方法。
1、postMessage 通信 在 H5 中需要先用wx.miniProgram.postMessage接口,把需要分享的信息,推送给小程序。 在用户点击了小程序后退、组件销毁、分享这些特殊事件之后,小程序页面通过bindmessage绑定的函数读取 post 信息。
2、设置 web-view 组件的 URL 通信 H5 跳转小程序:// h5中跳转小程序
navigateToWeixin() {
wx.miniProgram.navigateTo({url: '/pages/shop/index'});
}
// 小程序跳转h5--第一步
// 小程序跳转h5--第二步:在小程序的 js 文件中设置通过 URL 以问号传参的方式传入参数到 H5中
if(!option.page){
this.setData({
url: `${this.data.url}?${test}`
});
} else {
this.setData({
url: `${this.data.url}${option.page}?${test}`
});
}
四、内嵌web-view调试解决方案
首先通过微信开发者工具打开,这里url本地调试可以跟局域网链接,开发者工具可以实时显示,如果跟的是线上链接,可能只能通过预览扫码。
右键点击页面,左上角会出现调试,可以在右图的调试器中对h5进行调试。
五、踩过的小坑
(1)H5唤醒一些小程序API有一定的延时,0.3~1秒;
(2)请调用小程序专用的JSSDK,公众号中的JSSDK不通用;
(3)web-view一定是撑满全屏的,自定义顶部菜单,悬浮的都没用;
(4)web-view后边跟的h5链接,必须要url转义,否则会和小程序自身的符号定义冲突,可能识别不到?后的参数;
(5)H5控制小程序的跳转路径必须是“/”开头,如 “/pages/xxx/xxx”,且路径必须在app.json里有,地址错误的话,有时不报错。
(6)postMessage的json必须是data开始,不然接收不到数据。
(7)bindmessage相关:小程序后退:使用接口名 wx.miniProgram.navigateTo,wx.miniProgram.navigateBack,wx.miniProgram.switchTab 等切换小程序页面/场景的API时候都会触发。
分享:这个就是当你点分享小程序的时候,会接受到H5之前发送的postMessage。
组件销毁,web-view组件销毁,类似 wx.miniProgram.redirectTo 都会触发。
(8)内嵌h5跳转小程序是有严重缓存的,比如:h5页面有计时器,跳转小程序后计时器依然会计时,可以通过在url后面加时间戳的方式解决。
还有小程序已经关闭,H5自带的背景音乐仍然在手机后台播放,可以通过浏览器标签页被隐藏或显示的时候会触发visibilitychange(页面可见性状态)事件解决。
六、总结
看到这里,相信大家对于内嵌web-view已经有了大致的了解,我们主要对内嵌web-view与传统小程序进行对比,分析了内嵌web-view的优缺点,其次对如何配置内嵌web-view进行了阐述,然后对实战中内嵌web-view如何调试进行了示例,最后对实战中可能踩坑和注意的小点进行了友情提示。所以如果本篇文章有帮助到你的话,小编会非常欣慰,欢迎点赞和转发呦~
微信小程序调试webview_微信小程序内嵌webview相关知识点整理相关推荐
- 微信小程序内嵌webview实现微信登录
一.调研场景 1, 微信小程序内嵌webview实现微信登录 二.技术实现 1. web-view标签实现链接内嵌 小程序里嵌套web-view页面 (1)src属性:webview 指向网页的链接. ...
- c语言程序只能调试成功一半,c语言程序的调试方法所谓程序调试是指对程序的查错和排错。调试程序一般应经过以下几个步骤:一、先进行人工检查,即静态检查。在写好一个程序以后,不要匆匆忙忙...
c语言程序的调试方法 所谓程序调试是指对程序的查错和排错. 调试程序一般应经过以下几个步骤: 一.先进行人工检查,即静态检查. 在写好一个程序以后,不要匆匆忙忙上机,而应对程序进行人工检查.这一步十分 ...
- 微信小程序调试webview_使用 Appium 测试微信小程序 Webview
感谢 文章的主要思路来自于seveniruby的Appium 微信 webview 的自动化技术,非常感谢~~ 打开调试功能 通过微信打开debugx5.qq.com 勾选[打开TBS内核Inspec ...
- 微信小程序调试webview_关于微信小程序webview的使用
微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验.同时提供一系列工具帮助开发者快速接入并完成小程序开发.关于如何注册配置就不多言了,本文主要还是体验 ...
- 微信小程序调试php,微信小程序工具 程序调试的三大主要功能区
程序调试主要有三大功能区:模拟器.调试工具和小程序操作区 模拟器 模拟器模拟微信小程序在客户端真实的逻辑表现,对于绝大部分的 API 均能够在模拟器上呈现出正确的状态. 编译代码 点击工具左下角的编译 ...
- 微信开发者中调试企业微信小程序
在微信开发者中要调试企业微信的小程序必须使用企业微信小程序插件: 该插件可通过 [设置]->[扩展设置]->[模拟器插件]中获取 安装完成之后更改运行模式.更改成[企业微信小程序模式]运行 ...
- 小程序内嵌webview实现支付
点击上方"青年码农"关注 回复"特效源码"可获取各种资料 目前的一个小程序项目需要把客户之前的h5页面嵌入到现在的小程序中,并且之前的支付功能要正常.小程序提供 ...
- linux应用程序调试方法,Linux应用程序使用写文件调试程序的方法
Linux,一切皆文件,那么在Android系统本身,也是Linux+java罢了,也是在Linux的运行环境下. 通常,我们在调试程序的都会使用printf. 在Android中,我们会去使用log ...
- js 判断当前浏览器类型 判断当前是否是微信内嵌浏览器(是否是APP内嵌webView)
js的浏览器navigator头信息 myBrowserType(){var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串var isOp ...
最新文章
- 20步打造最安全的Nginx Web服务器
- python代码该怎么简化_如何简化这个python代码(从书中分配)?
- python 图片 文本 矫正
- VS2008正式版创建silverlight项目失败的解决办法
- 浅谈JavaScript中的事件
- ASP.NET 服务器部署IIS程序池进程标示配置要和SQL SERVER一致,否则不能拽出数据
- 黑洞效果的粒子背景效果
- web项目防御mysql注入_WEB安全 php+mysql5注入防御(二)
- Win10 提示账户名与安全标识间无任何映射完成
- java自行车s码适合身高_公路自行车尺寸与身高的选择
- 花呗接入央行征信系统!会影响贷款吗?
- javascript机器学习
- 从图灵奖小插曲看50年来什么样的人工智能最受追捧
- 使用nslookup查询域名的MX记录
- 【论文】mac系统下的citespace与使用
- springboot毕设项目游泳馆管理系统2069l(java+VUE+Mybatis+Maven+Mysql)
- 红米android10参数,红米note9详细参数表_红米note9参数配置详情
- 信道容量、码率、带宽、频谱利用率
- 技术福利:最全实时音视频开发要用到的开源工程汇总
- 海康威视摄像机SDK二次开发--通过云台参数设置控制摄像机的位置