未加星标

微信小程序 web-view 开发小记

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏

微信小程序的 web-view 组件是一个可以用来承载网页的容器,会自动铺满整个小程序页面。 这对于基于 H5 开发的站点,直接迁移到小程序带来了很大的便利。当然这其中也有一些需要注意的坑。

账号权限

如果要在小程序中使用 web-view 组件,则需要开发者账号不仅是该小程序的开发者而且还有网页开发权限,这需要在该小程序关联的公众号里面绑定开发者账号为开发者。不然在开发工具里面会弹窗提示没有网页开发权限。提示如下:


微信小程序 web-view 开发小记
业务域名

we-bview 组件的 src 属性指向网页的链接。可打开关联的公众号的文章,其它网页则需登录小程序管理后台(设置 -> 开发设置)中配置业务域名,如下图:


微信小程序 web-view 开发小记

配置业务域名的时候会提示你上传验证文件到该域名下进行验证。如果你压根就没有权限去上传验证文件,那不好意思,你用了不该业务域名,页面直接提示报错,无法正常访问。

登录态

小程序登录态与 web-view 组件登录态属于两套隔离的系统。所以得想办法让小程序中的登录态传入到 web-view 组件的 H5 页面中。目前最简单也是最常用的方案是把 cookie作为 url 参数传入,然后再在 H5 中获取并设置 cookie,为了提高点难度,可以加个加解密。

如果不嫌麻烦,可以搭建一个中间服务,传入 tickets,中间服务通过 tickets 得到 cookie,再重定向地址。

组件层级

web-view 组件属于原生组件,所以层级很高,如果需要覆盖则需要使用 cover-view 组件。但是 cover-view 组件在开发工具上是看不到覆盖效果的,安卓默认也不能覆盖,只有 IOS 默认会覆盖。

cover-view

有些时候我们封装一个组件,需要盖住 web-view ,所以会选择 cover-view 组件,但是如果这个组件不是应用在 web-view 页面就会带来层级太高,弹窗浮层根本盖不住的问题。如一些右下角的咨询按钮,既应用在小程序页面中,也应用在 web-view 页面中。所以做组件的时候可以做一个属性判断,如果是 web-view 页面则使用 cover-view ,否则使用 view 。

web-view 页面中小程序环境判断

官网有记载在网页内可通过 window.__wxjs_environment 变量判断是否在小程序环境,并且建议在WeixinJSBridgeReady回调中使用,也可以使用JSSDK 1.3.2提供的getEnv接口。代码如下:

// web-view下的页面内 function ready() { console.log(window.__wxjs_environment === 'miniprogram') // true } if (!window.WeixinJSBridge || !WeixinJSBridge.invoke) { document.addEventListener('WeixinJSBridgeReady', ready, false) } else { ready() } // 或者 wx.miniProgram.getEnv(function(res) { console.log(res.miniprogram) // true })

实际情况,一般都是直接用 window.__wxjs_environment 。但是如果页面没有加载完, window.__wxjs_environment 是不准的,而且如果是 web-view 中进入到第二个页面,安卓也拿不到该值,总之就一个字"很不靠谱"。

既然“不靠谱”,那就有了通过 URL 里面加参数来判断,这是铁定的稳。如添加一个 mp 参数( https://m.ke.qq.com/course/xxx?mp=1 )。

web-view 页面向小程序通信

目前 web-view 网页可通过 postMessage 向小程序发送信息,但是该信息只会在特定时机(小程序后退、组件销毁、分享)触发并收到消息。

小程序中通过在 web-view 中设置 bindMessage 属性,收到信息,如下图:


微信小程序 web-view 开发小记
web-view 页面中包括 iframe

首先 iframe 的域名为业务域名,不然页面也会提示报错,无法正常显示。其次 iframe 的页面里面不能使用官网上所记载的相关接口1,如下:


微信小程序 web-view 开发小记

如果要跳回小程序页面的话,可以使用 window.top.window.wx.miniProgram.xxxAPI

调试 web-view 开发工具调试

在开发工具显示面板,右键会出现调试,打开一个调试面板,当然这样是看不到 cgi 请求的,要看请求我们得重新发送请求,如console里面执行页面刷新,或直接再次右键调试,都会触发页面刷新请求重新发送。


微信小程序 web-view 开发小记
真机调试

不好意思,由于 web-view 组件的层级实在太高,盖住了 vconsole 的调试,所以相当于没有调试工具。不过也有一些办法可以解决:

如果其他上下关联的页面是非 web-view 的话,我们可以在上下关联的页面中查看 vconsole 的信息 使用 alert大法 使用 whistle (关于 whistle 如何调试下次再具体介绍) 总结

最后的最后,不论在开发工具中显示良好或者不良好,都一定要用真机查看效果,而且 IOS 和 安卓都要看下。 不要太相信你的代码,也不能不相信你的代码

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

分页:12
转载请注明
本文标题:微信小程序 web-view 开发小记
本站链接:https://www.codesec.net/view/620846.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(11)