webview跳转小程序的另一种实现
起因
因为公司业务原因,小程序嵌套了大量的h5页面供;
但涉及到支付类的操作必须在小程序原生页面完成;
这就牵扯了webview跳转原生小程序问题;
我们在线上经常遇到用户投诉;在webview页面点去支付没有反应;
代码逻辑上,这个按钮点击应该跳转原生页面才对的;
我们也在相关页面添加了日志,显示已经触发jssdk成功跳转回掉
但是并没有跳转成功
就在前几天我们又接到用户关于跳转失败投诉;
这种收到反馈,搜集微信日志,联系官方的操作过于被动;
每次都要被公司质量管控部门吐槽,有苦难言;
社区也有不少开发者反馈相关问题;但是偶现bug,官方也不易排查
所以除了等待官方解决我们就没有别的办法了么?
突破
就在我辗转反侧,彻夜难眠的时候,官方文档的一句话吸引了我
[图片]
每次网页加载都能触发bindload事件获取到url
那么我们能不能指定一个url,获取url上的指定的参数,利用小程序原生能力进行跳转呢
实现
wxml
页面添加bindload事件监听
[代码]<web-view src="{{url}}" bindload="load"></web-view>
[代码]
js
监听url中的变化,检测到指定值执行跳转逻辑
[代码]load: function (e) {
// 获取url
const src = e.detail.src;
const query = src.split('?')[1] || '';
// 检测url参数中是否有指定的参数
const isJump = query.indexOf('word=jump');
// 检测到指定值执行跳转逻辑
if(isJump >= 0){
wx.navigateTo({
url: '/index/index'
})
}
}
[代码]
demo
这里写了一个简单的demo
https://developers.weixin.qq.com/s/HCPpEzmU7DkV
嵌入了触屏的baidu
当监听到搜索关键词为jump时,会执行原生的跳转
[图片]
兼容性的问题
因为公司小程序基础库是2.9.2,大于等于这个版本的可靠性是经过我们线上验证的
低于2.9.2的基础库版本有待考证,可能需要使用者自测
这里给大家提供一种思路,可以结合场景使用
安卓微信8.0.1,出现webview bindload没有执行的情况,这个api在新版本微信上可能有兼容性问题(20210322)