需求: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在后台才能启动),可参照以下解决方案:


以上信息网址来源我找不到了,只有截图,如有侵权请联系我删除,谢谢。
总的来说,就是app在回调onReq中再执行一遍打开app或跳转到app中某一页面的逻辑,此为app处理的逻辑,如果有相关问题请找app配合。

至此,h5直接打开app完成。

如果根据上面的步骤还无法直接唤醒app可以在评论区留言,看到且有时间且不在我知识盲区的话我会回复,另,以上写的东西也有可能有误,如果发现误点请大佬们告诉我,我会予以更正,谢谢。

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐