微信网页打开移动应用APP

116 阅读1分钟

自从微信禁用打开app后,一直都是在浏览器打开跳转,现在开发网页内直接打开app。

需要条件

  1. 由于“微信开放标签”只开放给 JS 接口安全域名,使用此功能前请确保网页所属的域名已绑定为服务号的 JS 接口安全域名。详见《微信开放标签说明文档》
  2. 微信内网页无法跳转任意的 APP 。开发者需要在“微信开放平台”登记域名与移动应用(APP)的绑定关系,网页只可以跳转其域名绑定的移动应用(APP)。详见下述关联说明。

划重点

1.网页所属的域名已绑定为服务号的 JS 接口安全域名。 2.开发者需要在“微信开放平台”登记域名与移动应用(APP)的绑定关系

// 引入资源,移动端便于调试,引入了vconsole
<script src="//res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script src="//cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script>

// dom
<wx-open-launch-app
    id="launch-btn"
    appid="your-appid"
>
    <script type="text/wxtag-template">
        <style>.btn { padding: 12px }</style>
        <button class="btn">App内查看</button>
    </script>
</wx-open-launch-app>


// js
var config = {
    appId: appId,
    timestamp: timestamp,
    nonceStr: nonceStr, // 生成签名的随机串
    signature: signature, // 签名
    jsApiList: ['chooseImage'], // 需要使用的JS接口列表,需要什么写什么
    openTagList: ['wx-open-launch-app'], // 可选,需要使用的开放标签列表,例如['wx-open-launch-app']
};

wx.config(config);
wx.ready(function () {
    var btn = document.getElementById('launch-btn');

    btn.addEventListener('launch', function (e) {
        console.log('success', e);
    });
    btn.addEventListener('error', function (e) {
        console.log('fail', e.detail);
    });
});

wx.error(function (res) {
    console.log('error', res);
});


然后 将上述代码部署到服务器调试 看效果