微信开放标签wx-open-launch-app唤起app

微信开放标签官网地址目录 | 微信开放文档

本文通过以下几个步骤来说明

        1.微信开放平台和微信公众平台配置

        2.准备h5页面添加跳转代码（微信分享展示的链接）

        3.app内添加微信分享代码

        4.解决开放标签不显示问题

        5.联调

第一步：

        1.配置微信开放平台

                申请微信开放平台账号并进行微信认证，登录微信开放平台微信开放平台点击管理中心

        移动应用标签进行创建应用（没什么特别注意的点，按照提示创建就完事）

        点击公众号标签绑定公众号（这里注意公众号一定是服务号，订阅号不能进行使用，并且公众号的主体要和开放平台的主体要一致，不一致的绑定不成功）

   

        登录微信公众平台，设置JS接口安全域名，（这个安全域名，就是你的h5域名，唤醒app的网页域名）

      

        至此，两个平台配置完成。

第二步：开发h5页面，就是要唤醒h5的网页

        根据官方文档进行开发，引入JS文件在需要调用JS接口的页面引入如下JS文件：（注意一定要是1.6.0这个版本，其余版本目前不成功）http://res.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）备注：支持使用 AMD/CMD 标准模块加载方法加载。（本人用的是https方式引入的，在index.html页面中引入，在组件中使用window.jWeixin，如下：）

          这里需要后端提供接口，进行安全签名，签名详情：概述 | 微信开放文档。

h5前端代码如下：（如果后台签名不成功，前端页面的微信开放标签按钮不会显示出来）

<template>
    <div style="text-align: center;">
       <wx-open-launch-app id="launch-btn" extinfo="这个参数是传递给app的数据，记住一定得是字符串自己处理一下" appid="开放平台appid" @error="onListenLaunchError">
          <script type="text/wxtag-template">
             <style>.btn { background-color: #34703F;color: #ffffff;height: 40px;width: 160px;border-radius: 18px;border:0; }</style>
             <button class="btn">立即参团</button>
          </script>
       </wx-open-launch-app>
   </div>
</template>
<script>
    mounted() {
        axios.get('后端定义接口').then(res => {
            window.jWeixin.config({
                // debug: true, // 这个设置成true签名成功会返回弹出config ok的框框，建议测试的时候还是把这个打开，确保这一步是成功的。
                appId: res.data.data.appId, // 必填，公众号的唯一标识后台配置的
                timestamp: res.data.data.timestamp, // 必填，生成签名的时间戳后台配置的
                nonceStr: res.data.data.nonceStr, // 必填，生成签名的随机串后台配置的
                signature: res.data.data.signature,// 必填，签名后台配置的
                jsApiList: ['wx-open-subscribe', 'wx-open-launch-app'],// 必填，需要使用的JS接口列表，这个地方必须至少写一个，即使你一个都不想用'updateTimelineShareData',
                openTagList: ['wx-open-subscribe', 'wx-open-launch-app']// 可选，需要使用的开放标签列表
            })
            window.jWeixin.ready(function (e) {
                console.log('要执行的返回', e)
                // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中
            });
            window.jWeixin.error(function (res) {
                console.log('错误的返回', res)
                alert(res)
                // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名
            });
        })

    },
</script>

第三步：编辑app端分享的代码（这里用的是uniapp，分享 | uni-app官网）

uni.share({
						provider: "weixin",
						scene: "WXSceneSession",//微信好友，其他参数可以参照uniapp官方分享
						type: 0,//0是图文的意思
						href:_this.appHref,//h5网页的地址
						title: _this.shareData.title,//分享标题
						summary: _this.shareData.subTitle,//副标题
						imageUrl: `${_this.shareData.imageUrl}`,//图片
						success: function(res) {
							console.log("success:" + JSON.stringify(res));
						},
						fail: function(err) {
							console.log("fail:" + JSON.stringify(err));
						}
					});

第四步：解决开放标签不显示的问题

        1.后端签名不成功的话标签不会显示，可以打开debug:true，进行确认签名验签情况

        2.在微信浏览器中，一定得是卡片式链接，长链接和短链接不行，虽然有的可以展示出开放标签但是唤起app会报错，失败。

第五步：联调，

        通过uniapp云打包安装到手机上，点击分享按钮，分享到微信，就可以成功了，如果还是有问题就直接代码中alert出来问题的详情。