uniapp，H5页面接微信开放标签wx-open-launch-app打开app

html代码

<wx-open-launch-app id="launch-btn" @error="handleErrorFn" @launch="handleLaunchFn"
				:extinfo="encodedExtInfo" appid="************">//替换appid
				<script type="text/wxtag-template">
					<style>
						.btn1 {
							padding: 12px;
						}
						.download {
							color: #ffffff;
							background-color: #FF5D34;
							width:100%;
							height:100%;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 16px;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							border-radius: 2px;
						}
					</style>
					<button class="download btn1" style="height:100%;width:343px;border:none; border-radius: 28px;">打开app</button>
				</script>
			</wx-open-launch-app>

需要使用到微信开放标签，要使用jweixin-1.6.0.js。官方地址目录 | 微信开放文档。因为在uniapp中关键字被占用，所以要单独引入

import jweixin from "@/static/jweixin-1.6.0.js";

根据官方文档，所写要使用微信开放标签需要鉴权，所以要后端提供鉴权接口，并把相关数据反回。接收到相关数据，初始化按钮。

postRequest() {
				let params = {
					url: window.location.href.split("#")[0],
				};

				var xhr = new XMLHttpRequest();
				xhr.open(
					"POST",
					"************",//后端提供
					true
				);
				xhr.setRequestHeader("Content-Type", "application/json");
				xhr.onreadystatechange = function() {
					if (xhr.readyState == 4 && xhr.status == 200) {
						var data = JSON.parse(xhr.responseText);
						if (data.code === 1) {
							setTimeout(() => {
								this.authSDK(data);
							}, 200)
						}
					} else if (xhr.readyState == 4) {
						console.error("Error:", xhr.status);
					}
				}.bind(this);
				xhr.send(JSON.stringify(params));
			},

authSDK(data) {
				const { appId, nonceStr, signature, timestamp } = data;
				jweixin.config({
					debug: false,
					appId: appId,
					timestamp: timestamp,
					nonceStr: nonceStr,
					signature: signature,
					jsApiList: ["getLocation"],
					openTagList: ["wx-open-launch-app", "wx-open-launch-weapp"], // 这里要配置一下
				});
				jweixin.ready(function() {
					jweixin.checkJsApi({
						jsApiList: [
							"getLocation",
							"wx-open-launch-app",
							"wx-open-launch-weapp",
						], 
						success: function(res) {
							console.log("wxJsApi success:", res);
						},
						fail: (err) => {
							console.log("wxJsApi fail:", err);
						},
					});
				});
			},

打包项目，放到服务器，下图显示成功了。

也可以运行到网页，用微信开发者工具打开公众号网页项目，把运行到浏览器的地址复制过去就可以了，但是要显示按钮，还必须你是公众号的开发者才能显示，不然你只能放到服务器上才能查看是否实现