评论

webview跳转小程序的另一种实现

通过监听webview中的url来实现小程序的原生跳转

起因

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

兼容性的问题

  • 因为公司小程序基础库是2.9.2,大于等于这个版本的可靠性是经过我们线上验证的
  • 低于2.9.2的基础库版本有待考证,可能需要使用者自测
  • 这里给大家提供一种思路,可以结合场景使用
最后一次编辑于  09-24  
点赞 2
收藏
评论

2 个评论

  • Laidz
    Laidz
    09-25
    思路惊奇
    09-25
    赞同
    回复 1
    • WALLE
      WALLE
      09-27
      都是用户投诉逼出来的
      09-27
      回复
  • 微喵网络
    微喵网络
    09-24

    web-view里的本来就可以用jssdk跳转到小程序其他页面

    09-24
    赞同
    回复 1
    • WALLE
      WALLE
      09-24
      那是你没遇到用sdk跳不过去的情况,原来我们每周平均会收到两三个sdk跳不过去的
      09-24
      回复
登录 后发表内容