h5 使用微信开放标签跳转app

gjjxfhk

已于 2022-10-28 15:59:11 修改

阅读量938

点赞数

文章标签：微信前端 html

于 2022-10-16 22:08:36 首次发布

本文链接：https://blog.csdn.net/gjjxfhk/article/details/127353613

版权

官方文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#11

1、引入js文件（最好使用https引入，否则ios开放标签不出）

在需要调用 JS 接口的页面引入如下 JS 文件：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）

2、申请开放标签（不申请用不了）

wx.config({
  debug: true, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名（签名最好后端生成。将动态获取到的，不包括#及后面参数的url,传递给后端，返回签名）
  jsApiList: ['chooseImage', 'previewImage','wx-open-launch-app','onMenuShareTimeline','onMenuShareAppMessage','checkJsApi','scanQRCode'], // 必填，需要使用的 JS 接口列表（酌情配置，不可为空）
  openTagList: ['wx-open-launch-app'] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
});


        //检查开放标签是否申请成功
        wx.ready(function (res) {
		  console.log("ready1>>>",res)
		});
		wx.error(function (res) {
		  console.log("error1>>>",res)
            
		});

		//点击开放标签，成功的事件 与 失败的事件
        var btn = document.querySelector("#launch-btn")
		btn.addEventListener('launch', function (e) {
	   	 	console.log('success>>>',e);
            
	 	 });
	  	btn.addEventListener('error', function (e) {
	    	console.log('fail', e.detail);
            alert(e.detail.errMsg)

            //找不到app,跳转下载页
                const u = navigator.userAgent;
                const iOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
                if (iOS) {
                    window.location.href=""
                } else {
                    window.location.href = ""
                }

	    });

3、页面上使用

<!-- 此处appid为绑定安全域名的开发id,详见官方文档 -->
<wx-open-launch-app
  id="launch-btn"
  appid="your-appid"
  extinfo="your-extinfo"
>
  <template>
    <style>.btn { padding: 12px }</style>
    <button class="btn">App内查看</button>
  </template>
</wx-open-launch-app>

注意事项：

1、开放标签只能绑定已认证的服务号，只能在微信真机上测试。

2、error事件返回值errMsg说明如下。

errMsg	说明
"launch:fail"	当前场景不支持跳转，或 Android 上该应用未安装，或 iOS 上用户在弹窗上点击确认但该应⽤未安装
"launch:fail_check fail"	校验 App 跳转权限失败，请确认是否正确绑定AppID

3、开放标签出不来，照官方文档附件5 检查错误。

4、后端生成签名见附录1-JS-SDK使用权限签名算法

可以通过工具验证签名是成功