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的基础库版本有待考证,可能需要使用者自测
- 这里给大家提供一种思路,可以结合场景使用