Vue、React使用微信开发标签跳转H5和小程序（最详细）

前言

微信目前已经提供四种开放标签

• wx-open-launch-weapp
• wx-open-launch-app
• wx-open-subscribe
• wx-open-audio

主要对开发提供了跳转APP、跳转H5、服务号订阅通知按钮、音频播放功能。这里只会讲到如何使用wx-open-launch-weapp、wx-open-launch-app标签。

踩坑之路

关于在Vue使用 wx-open-launch-weapp 和 wx-open-launch-app 的文章有很多，但都是比较不完善，踩了一个坑另一个又出现了。下面以跳转小程序为例，记录我的踩坑之路。

首先，在开发之前必须要准备的资源

• 已认证的服务号
• 任意合法合规的小程序

已认证的服务号，这个是强制要求，如果是订阅号或非认证的服务号，wx-open-launch-weapp 按钮不会显示。
要提供小程序 原始ID 进行跳转，所以小程序也是必不可少的。

接下来就是在Vue中运用wx-open-launch-weapp标签。先来看看官方给的列子：

JAVASCRIPT集成

<wx-open-launch-weapp
  id="launch-btn"
  username="gh_xxxxxxxx"
  path="pages/home/index?user=123&action=abc"
>
  <template>
    <style>.btn { padding: 12px }</style>
    <button class="btn">打开小程序</button>
  </template>
</wx-open-launch-weapp>
<script>
  var btn = document.getElementById('launch-btn');
  btn.addEventListener('launch', function (e) {
    console.log('success');
  });
  btn.addEventListener('error', function (e) {
    console.log('fail', e.detail);
  });
</script>

但是在Vue、React中集成代码就不能这么写了

• 开放标签属于自定义标签，Vue会给予未知标签的警告，需要通过配置Vue.config.ignoredElements来忽略Vue对开放标签的检查

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false
Vue.config.ignoredElements = ['wx-open-launch-weapp']

App.mpType = 'app'

const app = new Vue({
	...App
})
app.$mount()

• 开发标签要通过<template></template>进行包裹，但是对于Vue等视图框架，需要使用<script type="text/wxtag-template"></script>进行代替，避免template标签冲突的问题

• 使用微信开发标签后，里面包裹的图片不能使用物理路径，必须使用可公网访问的图片地址或者BASE64

• ios 缓存导致按钮不显示

爬坑

结合上面遇到一切问题，决定进行简易封装 （毕竟主攻是后端），打包成 NPM

// 部分包源码
export function launchWeApp(info) {
	if(info.active)
	{
		var btn = document.getElementById(info.eleId); 
		let script = document.createElement("script"); 
		script.type = "text/wxtag-template"; 
		script.text = info.content
		let html =
			`<wx-open-launch-weapp style="width:100%;height:100%;display:block;" username="${info.username}" path="${info.url}">${script.outerHTML}</wx-open-launch-weapp>`;
		btn.innerHTML = html;
		btn.addEventListener("launch", info.launchEvent);
		btn.addEventListener("error", info.errorEvent);
	}else{
		var btn = document.getElementById(info.eleId); //获取元素
		let html =
			`<view style="width:100%;height:100%;display:block;">${info.content}</view>`;
		btn.innerHTML = html;
		btn.addEventListener("click", info.noAtiveEvent);
	}	
}

npm i wx-open-launch

执行上面命令，直接安装引入，包详细源码点这里查看。后台获取微信 JSSDK 的配置，前端配置如下：

weixin.config({
	appId: res.data.appId, // 必填，公众号的唯一标识
	timestamp: res.data.timestamp, // 必填，生成签名的时间戳
	nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
	signature: res.data.signature, // 必填，签名
	jsApiList: ['onMenuShareTimeline'], // 必填，如果没有使用API就随便填一个，不然会报错
	openTagList: ['wx-open-launch-weapp'] // 必填
});
weixin.ready((ready) => {
	console.log("ready");
	// 以下代码处理ios 第一次进入页面按钮没有显示，主要还是因为ios 的微信浏览器缓存，这里多刷新一次
	var systemInfo = uni.getSystemInfoSync()
	if (systemInfo.platform == 'ios') {
		const currUrl = location.href;
		const isReload = currUrl.indexOf("?reload=1") > -1 ? true : false;
		if (!isReload) {
			location.replace(currUrl + "?reload=1");
		}
	}
});
weixin.error((error) => {
	console.log("error");
	// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});

H5 跳转小程序

HTML:

<view id="launch-btn"></view>

JS/TS:

let weappBtnStyle = `
<style>
	.menu-logo-wx-text {
		font-size: 14px;
		margin-top: 10%;
	}

	.menu-logo-wx {
		height: 30%;
		width: 60%;
	}

	...
</style>
`;
let content = `
<view class="uni-flex-wx uni-column-wx menu-logo-div-wx">
// image src 必须是外网可以访问到的图片，不能填写物理路劲，将无法访问
<image class="menu-logo-wx" src="https://xxxx/xxx/xx.png"></image>
<text class="menu-logo-wx-text">网校</text>
</view>
${weappBtnStyle}
`;

let launchParams = {
	eleId: "launch-btn", // 页面元素标签ID，必填
	url: "", // 小程序地址，非必填
	username: "gh_xxxxxxxxxx", // 小程序原始ID，必填
	content: content, // 按钮HTML元素及样式，必填
	launchEvent: function(e) {...}, // 点击按钮正常跳转触发，必填
	errorEvent: function(e) {...}, // 点击跳转抛出异常，必填
	active: true, // 按钮是否激活跳转小程序，为了满足个别情况下改按钮不需要跳转小程序
	noAtiveEvent: function() {...} // 按钮不跳转小程序时的点击时间，active 为 true 时必填
};
launchWeApp(launchParams); // 引入JS之后调用launchWeApp

H5 跳转APP

HTML:

<view id="launch-btn"></view>

JS/TS:

let weappBtnStyle = `
<style>
	.menu-logo-wx-text {
		font-size: 14px;
		margin-top: 10%;
	}

	.menu-logo-wx {
		height: 30%;
		width: 60%;
	}

	...
</style>
`;
let content = `
<view class="uni-flex-wx uni-column-wx menu-logo-div-wx">
// image src 必须是外网可以访问到的图片，不能填写物理路劲，将无法访问
<image class="menu-logo-wx" src="https://xxxx/xxx/xx.png"></image>
<text class="menu-logo-wx-text">网校</text>
</view>
${weappBtnStyle}
`;

let launchParams = {
	eleId: "launch-btn", // 页面元素标签ID，必填
	appid: "", // 所需跳转的AppID，必填
	extinfo: "", // 跳转所需额外信息，非必填
	content: content, // 按钮HTML元素及样式，必填
	launchEvent: function(e) {...}, // 点击按钮正常跳转触发，必填
	errorEvent: function(e) {...}, // 点击跳转抛出异常，必填
	active: true, // 按钮是否激活跳转APP，为了满足个别情况下改按钮不需要跳转APP
	noAtiveEvent: function() {...} // 按钮不跳转APP时的点击时间，active 为 true 时必填
};
launchApp(launchParams); // 引入JS之后调用launchApp