起因

• 因为公司业务原因，小程序嵌套了大量的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）