评论

H5如何跳转微信小程序?

H5跳转微信小程序

之前遇到一个需求,就是要从H5跳转到小程序里,但是微信之前一直没有提供接口做跳转,我们只能做降级方案,在要跳转小程序的地方做了一个弹窗,弹窗里面放小程序码,引导用户长按识别小程序码,然后跳转到小程序内,整个流程非常之长,转化率可想而知也是很低的。

今天刚好看到有人技术群里面问了这个问题,于是我就去看了下微信的文档,发现微信偷偷的更新的这个接口,可以让微信浏览器下的H5跳转到小程序内。

相关文档在这边:

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html

用的是JS-SDK的接口,需要使用到js-sdk-1.6.0的版本才有支持,https://res.wx.qq.com/open/js/jweixin-1.6.0.js

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印
  appId: '', // 必填,公众号的唯一标识
  timestamp: , // 必填,生成签名的时间戳
  nonceStr: '', // 必填,生成签名的随机串
  signature: '',// 必填,签名
  jsApiList: [], // 必填,需要使用的JS接口列表
  openTagList: [] // 可选,需要使用的开放标签列表,例如['wx-open-launch-app']
});


在wx.config下面多了一项openTagList,开放标签列表,目前支持配置wx-open-launch-weapp,wx-open-launch-app

wx-open-launch-weapp 指H5跳转小程序

wx-open-launch-app 指H5跳转app

我们主要介绍的是wx-open-launch-weapp H5跳转小程序

先上才艺:

html代码如下:



  var btn = document.getElementById('launch-btn');
  btn.addEventListener('launch', function (e) {
    console.log('success');
  });
  btn.addEventListener('error', function (e) {
    console.log('fail', e.detail);
  });



username为小程序的原始id,path对应的是小程序的链接地址。之前有写过微信H5的应该会知道怎么把这段代码嵌入到之前的代码里面。

目前此功能仅开放给已认证的服务号,网页的域名要在服务号的“JS接口安全域名”下。

亲测<wx-open-launch-weapp>可以跳转到任意合法合规的小程序,是任意的小程序都能跳转!!!!这个接口真开放(不怕人干坏事?)


PS:

有个坑,官方文件说的path是/a/b/c?d=1&e=2#fg,类似的这样的链接格式,但是我自己亲测如果直接使用/a/b/c?d=1&e=2#fg这样格式的链接会报页面不存在,然后我想到了小程序那边复制链接的时候会在链接后面加上.html,于是挖槽的事情发生了,把path链接格式换成/a/b/c.html?d=1&e=2#fg这样就能正常访问,不知道是微信故意这样设计的还是bug,有待考证。

然后这个接口真的可以干好多坏事,希望大家能用正确的价值观来正确使用此接口。


微信开放标签有最低的微信版本要求,以及最低的系统版本要求。

如果开发过程中出现以下情况的,要确认一下,微信版本要求为:7.0.12及以上。 系统版本要求为:iOS 10.3及以上、Android 5.0及以上。

最后一次编辑于  2020-07-09  
点赞 35
收藏
评论

83 个评论

  • 圈圈圆圆
    圈圈圆圆
    2020-07-10


    你们样式都是怎么自定义的哇?我怎么自定义不生效的

    2020-07-10
    赞同
    回复 1
    • 爱哭的毛毛虫
      爱哭的毛毛虫
      2020-07-15
      需要在手机端微信打开才能看到样式
      2020-07-15
      回复
  • 圈圈圆圆
    圈圈圆圆
    2020-07-09


    再请教下哦,认证的服务号和跳转的小程序主体不一致的话,也可以正常跳转吗?

    2020-07-09
    赞同
    回复 4
    • 吴奕群
      吴奕群
      2020-07-10
      可以正常跳转的,这个没有问题
      2020-07-10
      回复
    • 圈圈圆圆
      圈圈圆圆
      2020-07-10回复吴奕群
      好的好的,谢谢你~~~
      2020-07-10
      回复
    • Evergreen
      Evergreen
      2020-12-25回复吴奕群
      想问下,客户的h5页面能跳转到我们小程序的指定页面吗,用户账户数据通过参数传递,跳过微信的登录机制,直接进入到详情页?
      2020-12-25
      回复
    • 吴奕群
      吴奕群
      2021-01-28回复Evergreen
      可以,但是不建议这么做,用户账户数据你可以用加密的方式去传输,直接暴露敏感信息不合适
      2021-01-28
      回复
  • 雁子
    雁子
    2020-07-09

    求助:config提示ok了,但是点击按钮没有任何反应,写的addEventListener也没有弹出来。不知道是哪里错了

    2020-07-09
    赞同
    回复 12
    • 雁子
      雁子
      2020-07-09
      jsApiList: [], // 必填,需要使用的JS接口列表
      这个参数,大家都填了什么呀
      2020-07-09
      回复
    • 吴奕群
      吴奕群
      2020-07-09回复雁子
      你的代码贴出来看一下
      2020-07-09
      回复
    • 雁子
      雁子
      2020-07-10回复吴奕群
      2020-07-10
      回复
    • 雁子
      雁子
      2020-07-10回复吴奕群
      因为我还在测试阶段,签名信息那些我是网址请求,然后造出来的数据,config是提示ok了的
      2020-07-10
      回复
    • 雁子
      雁子
      2020-07-10回复吴奕群
      我知道问题了,template标签我删掉了,所以跳转不了。感谢感谢!
      2020-07-10
      回复
    查看更多(7)
  • 江雪松
    江雪松
    2020-07-09

    vue开发 打包放线上点击没反应 有遇到过的嘛

    2020-07-09
    赞同
    回复 32
    • 吴奕群
      吴奕群
      2020-07-09
      看一下事件监听那边有没有报错

      若认为该回答有用,给回答者点个[ ]

      2020-07-09
      回复
    • 雁子
      雁子
      2020-07-09
      我也遇到了,解决了吗?
      2020-07-09
      回复
    • 江雪松
      江雪松
      2020-07-09回复雁子
      没有  不知道怎么下手
      2020-07-09
      回复
    • 孙军-      ⃢👁-👁⃢    .
      孙军- ⃢👁-👁⃢ .
      2020-07-10回复江雪松
      你的搞定了吗?
      2020-07-10
      回复
    • Gauch
      Gauch
      2020-07-10
      同求,有解决 的吗
      2020-07-10
      回复
    查看更多(27)
  • Laurence
    Laurence
    2020-07-09

    我想问,这里的H5是否一定要在微信APP里打开,才可以实现H5跳转小程序?如果我是从手机系统自带的浏览器打开的H5,能否唤起微信APP,然后打开指定的小程序呢?

    2020-07-09
    赞同
    回复 2
    • 吴奕群
      吴奕群
      2020-07-09
      需要在微信环境下的, 因为这边用的是jssdk,这个就限制只能在微信环境

      若认为该回答有用,给回答者点个[ ]

      2020-07-09
      1
      回复
    • 。
      2020-08-26回复吴奕群
      我的为什么只能在手机端显示 电脑端和ipad都不显示按钮 开发工具也不显示
      2020-08-26
      回复
  • 麻邻
    麻邻
    2020-07-09

    组件宽高为0的 我是因为这个必填项没填导致的 希望你们不要踩坑

    2020-07-09
    赞同
    回复 2
    • again
      again
      2020-07-10
      这个要填哪个
      2020-07-10
      回复
    • 圈圈圆圆
      圈圈圆圆
      2020-07-10回复again
      随便填一些api就可以,比如 openLocation
      2020-07-10
      回复
  • wum
    wum
    2020-07-09

    文档的button标签未闭合。这个path到底是加/还是不加。有人不加也可以正常跳转

    这个就完全不清楚是怎么回事了。我的一直是这样

    2020-07-09
    赞同
    回复 3
    • 吴奕群
      吴奕群
      2020-07-09
      你出现这个报错是用的服务号来开发的吗?

      若认为该回答有用,给回答者点个[ ]

      2020-07-09
      回复
    • wum
      wum
      2020-07-09回复吴奕群
      是的,认证的服务号开发的
      2020-07-09
      回复
    • 吴奕群
      吴奕群
      2020-07-09回复wum
      微信开放标签有最低的微信版本要求,以及最低的系统版本要求,微信版本要求为:7.0.12及以上。 系统版本要求为:iOS 10.3及以上、Android 5.0及以上。

      若认为该回答有用,给回答者点个[ ]

      2020-07-09
      回复
  • 圈圈圆圆
    圈圈圆圆
    2020-07-09


    你好,请问你是怎么配置wx.config的哇,

    wx.config({
      debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印
      appId: '', // 必填,公众号的唯一标识
      timestamp: , // 必填,生成签名的时间戳
      nonceStr: '', // 必填,生成签名的随机串
      signature: '',// 必填,签名
      jsApiList: [], // 必填,需要使用的JS接口列表
      openTagList: [] // 可选,需要使用的开放标签列表,例如['wx-open-launch-app']
    });
    

    里面的必填项...

    2020-07-09
    赞同
    回复 4
  • 耿霄
    耿霄
    2020-07-09

    vue下报错有没有遇到

    2020-07-09
    赞同
    回复
  • 陈新😄
    陈新😄
    2020-07-09

    请问下,path="/pages/index/index" 和   path="/pages/index/index.html" 都显示截图效果,可能是什么原因啊?

    2020-07-09
    赞同
    回复 21
    • 吴奕群
      吴奕群
      2020-07-09
      你用的是认证过的服务号吗?
      2020-07-09
      回复
    • 陈新😄
      陈新😄
      2020-07-09回复吴奕群
      对的,认证过的服务号
      2020-07-09
      回复
    • 胡萝卜
      胡萝卜
      2020-07-09
      我和你碰到一样的问题,你的搞定了吗?
      2020-07-09
      回复
    • 胡萝卜
      胡萝卜
      2020-07-09回复胡萝卜
      我的也是认证过的服务号
      2020-07-09
      回复
    • 麻邻
      麻邻
      2020-07-09回复胡萝卜
      你的button显示在页面上了吗
      2020-07-09
      回复
    查看更多(16)

正在加载...

登录 后发表内容