webview跳转小程序的另一种实现
发布于 4 年前 作者 ryu 1447 次浏览 来自 分享

起因

  • 因为公司业务原因,小程序嵌套了大量的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的基础库版本有待考证,可能需要使用者自测
  • 这里给大家提供一种思路,可以结合场景使用
2 回复

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

回到顶部