评论

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  
点赞 33
收藏
评论

84 个评论

  • 阳
    2020-07-20
    <wx-open-launch-weapp
    
                        id="launch-btn"
    
                        username="gh_1770c4973780"
    
                        path="/pages/index/index.html"
    
                    >
    
                        <template>
    
                            <style></style>
    
                            <button className="btn" style={{ padding: '20px', border: '2px solid #ccc' }}>打开小程序</button>
    
                        </template>
    
                    </wx-open-launch-weapp>
    


    我也出现了类似的问题,页面中按钮没有显示,sdk升级到了1.6.0,微信版本7.0.14,系统版本ios 13.3。

    已经确认是认证过的企业服务号,“JS接口安全域名”和“微信授权域名”都检查过了


    2020-07-20
    赞同
    回复 2
    • 叶梓叶叶叶叶
      叶梓叶叶叶叶
      2020-08-28
      请问,你这个问题解决了吗?
      2020-08-28
      回复
    • 阳
      2020-09-03
      2020-09-03
      回复
  • 易顺
    易顺
    2020-07-18

    标签点击无反应,服务号是认证了的,launch事件和error事件都没触发

    2020-07-18
    赞同
    回复 3
    • 易顺
      易顺
      2020-07-18
      2020-07-18
      回复
    • 吴奕群
      吴奕群
      2020-07-18回复易顺
      jssdk的环境是正常的吗?config有报错吗?
      2020-07-18
      回复
    • 易顺
      易顺
      2020-07-20回复吴奕群
      本地config没报错,真机上就有问题,还在排查
      2020-07-20
      回复
  • 橙汁~
    橙汁~
    2020-07-14

    你用的微信测试号,测试的?还是认证的公众号

    2020-07-14
    赞同
    回复
  • Jianbo
    Jianbo
    2020-07-13
    请问"jsApiList"填什么?
    
    2020-07-13
    赞同
    回复 8
    • 吴奕群
      吴奕群
      2020-07-15
      jsApiList不需要填写,只要填写openTagList这个就可以
      2020-07-15
      回复
    • 爱哭的毛毛虫
      爱哭的毛毛虫
      2020-07-15回复吴奕群
      必须填写,不然报错,config fail
      2020-07-15
      回复
    • 吴奕群
      吴奕群
      2020-07-15回复爱哭的毛毛虫
      就是用 jsApiList:[],放一个空数组
      2020-07-15
      回复
    • 爱哭的毛毛虫
      爱哭的毛毛虫
      2020-07-15回复吴奕群
      no way ,空的,估计会空指针,还是config:fail ,只能随便放一个
      2020-07-15
      回复
    • 爱哭的毛毛虫
      爱哭的毛毛虫
      2020-07-15回复吴奕群
      你遇到 unable to open Missing id 吗?配置成功,然后 事件监听 launch 也是成功的
      2020-07-15
      回复
    查看更多(3)
  • -
    -
    2020-07-13

    我点击没反应 看微信开发工具里接口权限没有wx-open-launch-weapp

    2020-07-13
    赞同
    回复 1
    • 吴奕群
      吴奕群
      2020-07-15
      你用的是认证过的服务号吗?openTagList有写吗?
      2020-07-15
      回复
  • 💰
    💰
    2020-07-13
    请问一下  我按照官方的写完了  标签不显示  是什么原因啊 
     <wx-open-launch-weapp
        id="launch-btn"
        username='gh_xxx778ec'
        path='pages/xxxxxl'
    >
        <template>
            <style>.btn { padding: 12px }</style>
            <button class="btn">打开小程序</button>
        </template>
    </wx-open-launch-weapp>
    


    2020-07-13
    赞同
    回复 26
    • 思你如人间四月天
      思你如人间四月天
      2020-07-13
      同问,我也没有出现标签
      2020-07-13
      回复
    • -
      -
      2020-07-13回复思你如人间四月天
      写个内嵌样式就出来了  虽然标签显示了 但是点击没反应呀!!!!!!
      2020-07-13
      回复
    • -
      -
      2020-07-13回复思你如人间四月天
      2020-07-13
      回复
    • -
      -
      2020-07-13回复-
      《wx-open-launch-weapp   style='.....'》
      2020-07-13
      回复
    • 思你如人间四月天
      思你如人间四月天
      2020-07-13回复-
      我的可以了,我的那个config里面写错了,把weapp写成app了
      2020-07-13
      回复
    查看更多(21)
  • 梦虺1995
    梦虺1995
    2020-07-12

    Cannot read property 'addEventListener' of null,有没有人遇到过这个问题啊

    2020-07-12
    赞同
    回复 1
    • 吴奕群
      吴奕群
      2020-07-13
      节点对象没拿到
      2020-07-13
      回复
  • 鄒
    2020-07-10

    你好,我想跳转到生活缴费的小程序页面,给怎么获取跳转的路径呢

    2020-07-10
    赞同
    回复
  • 赵帅
    赵帅
    2020-07-10

    服务号下的移动应用未审核通过

    这是怎么回事

    2020-07-10
    赞同
    回复 1
    • 赵帅
      赵帅
      2020-07-10
      我用的是服务号下小程序
      2020-07-10
      回复
  • 大
会
波
波
    大 会 波 波
    2020-07-10

    又来事情了

    2020-07-10
    赞同
    回复

正在加载...

登录 后发表内容