wx-open-launch-app指南

发表于 | 分类于 | | 阅读次数:
今年5月微信新开放的api ， 微信环境H5唤起APP和小程序实践

wx-open-launch-app指南

今年5月微信刚开放的API，以往只对它投资的公司，或者干儿子开放，现在对绑定服务号且认证的企业都开放了，接入也比较简单，就是感觉文档太简单，覆盖面不足，不过都可以自己采坑来解决，可以去微信开放社区提问或者找相应别人踩过的坑找答案。

一、接入

image-20230508145002115

获得此设置入口的权限，需同时满足如下条件：

  1. 服务号已认证
  2. 开放平台账号已认证
  3. 服务号与开放平台账号同主体

绑定域名和移动应用

  1. 绑定域名的要求：
  • 域名须为当前服务号的 JS 安全域名或其子域名
  • 域名只能同时绑定一个移动应用，因此须确保域名未被其他移动应用绑定
  1. 绑定移动应用的要求
  • 只能绑定同一微信开放平台账号下审核通过的移动应用
  1. 绑定次数
  • 每月可修改绑定3次

以上是 产品经理负责修改，你只需要拿到app的id，小程序的id，确保第一张图的安全域名跟你开发的站的完全一致，不支持二级域名哦！

以下代码是在你页面中已经注入过wx.config的条件下,并且新增

wx.config { openTagList: [‘wx-open-launch-app’, ‘wx-open-launch-weapp’]}

在你的H5中接入微信开放标签

1. 微信小程序

1
2
3
4
5
6
7
8
9
10
<wx-open-launch-weapp
                          id="launch-btn-weapp"
                          username="gh_*****"
                          path="pages/home/home.html"
                      >
                          <script type="text/wxtag-template">
                              <div className="btn1" style={{ width: '170px', height: '70px', lineHeight: "70px", color: "rgba(0,0,0,1)", display: "block", fontSize: "38px", textAlign: "center" }}>打开小程序</div>
                          </script>
                          {/* @ts-ignore */}
                      </wx-open-launch-weapp>

2. APP

1
2
3
4
5
6
7
8
9
10
< wx-open-launch-app
	id = "launch-btn-app"
	appid = ""
	extinfo = {`带给app的信息 可以使用协议，让app端接受`}
		>
	<script type="text/wxtag-template" >
		<div style={{ width: '170px', height: '70px', lineHeight: "70px", color: "rgba(0,0,0,1)", display: "block", fontSize: "38px", textAlign: "center" }}> 打开App < /div>
			< /script>
{/* @ts-ignore */ }
</wx-open-launch-app>

3. JS生成Dom

1
2
3
4
5
6
7
8
9
10
11
12
dom.innerHTML = '<wx-open-launch-app style="width:100%; display:block;" id="launch-btn"  extinfo="" appid=""><template><div class="wx-btn" style="color:#fff;text-align:center" >JS生成的按钮</div></template></wx-open-launch-app>'
           var launchBtn = document.getElementById('launch-btn')
           console.log("launchBtn", launchBtn)
           if (!launchBtn) {
               return
           }
           launchBtn.addEventListener('launch', function (e) {
               console.log('btlaunchBtnn success')
           })
           launchBtn.addEventListener('error', function (e: any) {
               console.log('launchBtnfail', e.detail)
           })

如果一切正常的话，就可以唤起你的小程序和APP了

注意的是

微信版本要求为：7.0.12及以上。 系统版本要求为：iOS 10.3及以上、Android 5.0及以上，weixin.js 版本1.6.0以上

https://res.wx.qq.com/open/js/jweixin-1.6.0.js

4. 错误返回

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

errMsg 说明
“launch:fail” 调⽤失败，或安卓上该应用未安装，或iOS上用户在弹窗上点击确认但该应⽤未安装
“launch:fail_check fail” 校验App跳转权限失败，请确认是否正确绑定AppID

二、坑 - 不能是二级域名

经查证，只能是具体域名，不能是二级域名

image-20230508145035778

三、参考链接

  1. 微信内H5跳转APP或者小程序文档

  2. 微信开放标签说明文档

  3. JS-SDK使用步骤
  4. cnblogs其他人采坑
  5. csdn其他人采坑
  6. 官方回复域名issues
  7. 自己提的域名issues

四、完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
// tsx
{
	this.isAllowWeixinTag(userAgent)
	?
	// 微信环境
	<>
	{/* @ts-ignore */ }
	< wx-open-launch-app
	id = "launch-btn-app"
	appid = ""
	extinfo = {`带给app的信息 可以使用协议，让app端接受`}
		>
	<script type="text/wxtag-template" >
		<div style={{ width: '170px', height: '70px', lineHeight: "70px", color: "rgba(0,0,0,1)", display: "block", fontSize: "38px", textAlign: "center" }}> 打开App < /div>
			< /script>
{/* @ts-ignore */ }
</wx-open-launch-app>
	< />
	: <span className="go_to_app" onClick = { this.onApp } > 打开APP < /span>
}
    
// 事件监听
            if(!this.isAllowWeixinTag(this.props.userAgent)) return
            var btn = document.getElementById("launch-btn-app")
            console.log("app", btn)
            if(!btn) return
            btn.addEventListener('launch', (e: any) => {
                // 在此处可设置粘贴板内数据，数据是传递给 app 的参数进，
                console.log(' app success');
            });
            btn.addEventListener('error', (e: any) => {
                // 在此处可设置粘贴板内数据，数据是传递给 app 的参数，
                console.log('app', e.detail);
                // 唤醒失败的情况下,可以打开app等
                this.onApp()
            });    
    
 
//function
    
isAllowWeixinTag(userAgent: string){
      {/* 1.微信环境  2.微信版本大于7.0.12 */}
     return UA(userAgent).isWechat && HandleJudgeWechat(userAgent)
}    
const HandleJudgeWechat = (ua: string)=> {
	let wechat = ua.match(/MicroMessenger\/([\d\.]+)/i);
	let judgewechat = wechat[1].split('.')
	if (Number(judgewechat[0]) >= 7) {
		if (Number(judgewechat[1]) >= 0) {
			if (Number(judgewechat[2]) >= 12) {
				// console.log("当前微信版本大于7.0.12 可打开指定app")
				return true
			}
		}
	}
}

五、 总结

较为简单的接入。

只能到微信安全域名下测试，实在是麻烦，导致 只能发版测试，而且唤醒绑定的那个域名是正式环境的，略麻烦。微信开发者工具对这个新标签兼容性不是很好。

感谢你的打赏哦！