前言
微信目前已经提供四种开放标签
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