h5使用微信开放标签wx-open-launch-app直接打开app

即刻而晴

11719人浏览 · 2021-09-06 17:51:42

即刻而晴 · 2021-09-06 17:51:42 发布

需求：h5网页点击“打开APP”能在微信浏览器中直接跳转到APP，而不是跳转到提示页面让用户打开浏览器再进行跳转。
问题：因为微信浏览器的限制，现在h5通用跳转APP的方法无法直接跳转到APP，故需要使用到微信方提供的开放标签wx-open-launch-app。
开放标签wx-open-launch-app相关链接：
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html
使用步骤：
第一步：
创建微信服务号或订阅号，进入微信公众平台-功能设置（鼠标移入头像即可看到），在配置JS接口安全域名中配置域名。
微信公众平台网址：https://mp.weixin.qq.com/
在这里插入图片描述
第二步：
进入微信服务平台-管理中心-公众号详情-接口信息中设置域名与所需跳转的移动应用，既点击关联设置进行配置，域名填访问网址的域名（注：不要带http，不然会通不过校验，且这个域名在微信公众平台的JS安全域名中是已配置的），绑定的移动应用则填写绑定移动应用的appId（注意这个不是公众号的appId）。
请添加图片描述
第三步：
完成以上配置后，便可在代码中使用开放标签wx-open-launch-app。
具体流程：
1、引入微信sdk（获取地址：http://res.wx.qq.com/open/js/jweixin-1.6.0.js，可直接引入，也可以下载后在本地引入）；
因为我是jq搭配vue来使用，所以还需要引入vue（https://cdn.staticfile.org/vue/2.4.2/vue.min.js），如果是非vue使用，可参考：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html
2、使用开放标签wx-open-launch-app

<!--
	注注注：
	（1）标签绑定的appId是你要跳转的移动应用的appId，不是微信公众号的appId
	（2）extinfo为h5向app传递的相关参数，具体格式由开发者来定
	（3）wx-open-launch-app包裹的元素外层一定要用<script type="text/wxtag-template"></script>包裹，不然有可能不起效
	（4）开放标签内部的标签样式调整有可能不起效，所以建议直接将开放标签wx-open-launch-app的透明度设为0，然后覆盖在自己要点击的标签上
	（5）要先通过微信config的检验才能使用开放标签wx-open-launch-app，既下方的方法wxConfig
-->
  <div id="vue">
        <wx-open-launch-app v-if="isShowWxOpenApp" class="open-app" id="launch-btn @error="handleErrorFn" @launch="handleLaunchFn" appid="wx847772b3a82d4e8f" :extinfo="extinfo">
        <script type="text/wxtag-template">
            <button></button>
        </script>
        </wx-open-launch-app>
    </div>
    <script>
     $(document).ready(function () {
      new Vue({
        el: '#vue',
        data: {
          data: [],
          extinfo:"",
          isShowWxOpenApp:false
        },
        created: function(){
          this.wxConfig();
          //isInWeChatBrowser为判断当前浏览器是否为微信浏览器，如果是，才渲染微信开放标签
          if(this.isInWeChatBrowser()){
            this.isShowWxOpenApp=true;
          }
        },
        mounted: function () {},
        methods: {
   	      wxConfig(){
            var locationUrl = location.href.split('#')[0];
            $.ajax({
               //请求方式
               type : "get",
               //请求的媒体类型
               contentType: "application/x-www-form-urlencoded",
               //请求地址
               url : "https://后台请求的config需要的配置",//这个为后端链接，用来获取wx配置的必要信息，如果没有，请找后端
               //数据，json字符串
               data : {locationUrl:locationUrl},
               //请求成功
               success : function(ret) {
                   wx.config({
                     debug: false, 
                     appId: JSON.parse(ret).appId, // 必填，公众号的唯一标识
                     timestamp: JSON.parse(ret).timestamp, // 必填，生成签名的时间戳
                     nonceStr: JSON.parse(ret).nonceStr, // 必填，生成签名的随机串
                     signature: JSON.parse(ret).signature,// 必填，签名
                     jsApiList: ['openLocation'], // 必填，需要使用的JS接口列表
                     openTagList: ['wx-open-launch-app'] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
                   });
                   wx.ready(function () {
                   });
                   wx.error(function (err) {
                     console.log(err)
                   });
               },
               //请求失败，包含具体的错误信息
               error : function(e){
               }
              });
          },
          // 判断是否运行在微信浏览器中
  		  isInWeChatBrowser(){
    		return navigator.userAgent.match(/micromessenger/i);
  		  },
          handleErrorFn(e) {
            // 跳转失败-跳到app下载页面
            // newOpenApp() //此处是自定义逻辑，一般是用户没下载app时触发，既跳转到让用户前往下载的app的界面
            console.log(e.detail)
            alert(e.detail.errMsg)//注意这里不要将e序列化输出，不然手机端alert会是空值，这样就不能得到报错信息，序列化：即alert('e:',JSON.stringify(e))之类
          },
          // 监听launch 函数
          handleLaunchFn(e) {
            // 跳转成功
            console.log('跳转成功')
          }
        }
      })
  	})
  </script>
  <style>
  /* 微信浏览器下引入开放标签wx-open-launch-app start */
	#vue{
	  height: .94rem;
	  width: 100%;
	  position: fixed;
	  top: 0;
	  left: 0;
	  z-index: 1200;
	  opacity: 0;
	}
	.open-app{
	  display: block;
	  height: 100%;
	  width: 100%;
	}
  /* 微信浏览器下引入开放标签wx-open-launch-app end */
  </style>

调试：（不得不说，微信的调试真滴麻烦，也因为调试，我骂了腾讯千百遍）
（1）因为只有配置的JS安全域名下才能使用该开放标签，所以必须使用线上的服务器调试。（恰好我没有掌管线上服务器的权限，所以只能找测试小姐姐配合，既每改一次代码就要让她协助部署一次，测试小姐姐估计已经想把我内伊组特了）
（2）可以先使用微信开发者工具进行调试，相关配置完成了的话，微信开发者工具的控制台会打印如下信息，重点看config:ok和获得开放标签权限wx-open-launch-app即可。（到这一步，我已经认为我快成功了，然后…）
在这里插入图片描述
（3）使用真机调试时，发现app唤醒不了，是的，唤醒不了，然后就是排查问题，最后发现，app那边也必须接入相关sdk才行，而微信的文档上没写要接入，它没写，没写，写…
app接入相关链接：
ios：https://developers.weixin.qq.com/doc/oplatform/Mobile_App/Access_Guide/iOS.html
android：https://developers.weixin.qq.com/doc/oplatform/Mobile_App/Access_Guide/Android.html
（4）如果确认app已经接入，发现ios能唤醒但android唤醒不了，或者只能热启动（既app在后台才能启动），可参照以下解决方案：