小工具知识网

当前位置: 首页 > 行业知识 > 【wx-open-launch-app】微信内置浏览器网页唤起app操作和一些坑,偏前端使用开放标签方面

行业知识

【wx-open-launch-app】微信内置浏览器网页唤起app操作和一些坑,偏前端使用开放标签方面

2026-11-15 18:52:31 来源:互联网转载
最近实现了一下微信H5(Android)唤起app功能,使用的是微信开放标签,wx-open-launch-app,使用这个标签后,我们就可以在微信浏览器中唤起对应的app了

官方使用教程:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html

使用教程
  1. 需要一个已验证的微信服务号账号和微信开放平台账号,两个账号需要相互绑定,然后在开放平台服务号设置 网页跳转移动应用 关联

  2. 引入对应的js文件、通过wx.config获取到对应的标签权限

  3. 使用标签

      // 在vue中,如果配置好对应的公众号和开放平台,下面的操作就可以了        // ready 标签初始化成功  launch唤起app成功  error唤起失败了    // js中如果有需要使用这些回调函数,直接addEventListener添加  function addSelfEvent() {  const elements = document.querySelectorAll('.pullDivWechat');// 循环是因为一个页面可能有多个唤起app的按钮,当时就因为这个看了好久,以为是添加不上for (let i = 0; i  -1 || u.indexOf('Linux') > -1; //g// // 安卓微信客户端if (/micromessenger/.test(ua_str) && isAndroid) {    $(".pullDivWechat").show();}  }  // 样式大概就这样,直接把开放标签当成透明遮罩,盖到按钮上就好了      position: absolute;top: 0px;left: 0px;z-index: 1;overflow: hidden;    // 真正唤起app的按钮是插槽里写的东西,看微信开放论坛上说的是不能设置100%,没试(lazy),所以这里有写overflow

    在vue中插槽用

    在普通的h5页面插槽用

  4. app配置一下唤起操作,然后就可以在微信浏览器中唤起app了

如果你还是不能拉起对应的app,下面是可能发生的错误

  1. 没有通过分享卡片的形式,或使用微信开发者工具二维码的形式访问网址并唤起app,这个标签他似乎只能用这些操作。
  2. appId不是对的,微信开放标签上的appId是微信开放平台上应用的appId,不是服务号那个appId
  3. 服务号和开放平台有配置错误
  4. app里配置的有问题,或者没配置这个操作
  5. 保证你当前这个网址的域名是服务号中的Js安全域名,并且在微信开放平台也和你要唤起app绑定了,域名要对的,不然是不行的
  6. 需要使用到js-sdk-1.6.0的版本才有支持

上一篇:CVPR 2024 | Modular Blind Video Quality Assessment:模块化无参视频质量评估

下一篇:国际服在哪里选择服务器?