在微信的jsdk中可以使用标签来跳转到小程序。使用的是wx-open-launch-weapp，官方文档地址https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#21
常见的问题
- wx-open-launch-weapp不显示
- wx-open-launch-weapp显示了点击不了
首先保证签名成功。
// eslint-disable-next-line no-undef
wx.config({
// debug: ctx.rootState.isDebug, // 调试时可开启
debug: false, // 调试时可开启
appId: result.data.appid, // <!-- replace -->
timestamp: result.data.timestamp, // 必填，填任意数字即可
nonceStr: result.data.noncestr, // 必填，填任意非空字符串即可
signature: result.data.signature, // 必填，填任意非空字符串即可
jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData', 'wx-open-launch-weapp'], // 必填，随意一个接口即可
openTagList: ['wx-open-launch-weapp', 'wx-open-launch-app'], // 填入打开小程序的开放标签名
})
const sharePath = ctx.rootState.domain + '?shareunionid=' + ctx.state.unionId;
const shareImage = ctx.rootState.imagePath + 'share.jpg';
const shareTitle = '花式告白暗语';
const shareDesc = `${ctx.state.userInfo.nick_name}邀你解密TA的告白暗语`;
// eslint-disable-next-line no-undef
wx.ready(() => { //需在用户可能点击分享按钮前就先调用
// eslint-disable-next-line no-undef
wx.updateAppMessageShareData({
title: shareTitle, // 分享标题
desc: shareDesc, // 分享描述
link: sharePath, //
imgUrl: shareImage, // 分享图标
success: () => {
console.log('updateAppMessageShareData success');
// 设置成功
},
fail: (res)=> {
console.log('updateAppMessageShareData fail', res);
}
})
// eslint-disable-next-line no-undef
wx.updateTimelineShareData({
title: shareTitle,
link: sharePath,
imgUrl: shareImage,
success: () => {
console.log('updateTimelineShareData success');
},
fail: (res)=> {
console.log('updateAppMessageShareData fail', res);
}
})
});
如果签名成功，在ide上就可以看到
image.png
在看如下代码，把标签封装了一个组件，当然可以在进一步暴露一个卡槽出去。有兴趣的朋友可以在基础上做拓展，这边不做更多描述。如果是使用html，原生的js，或者是jQuery，就按照文档上写就好了，没什么太多的难点。 如果是使用vue2.0，官方文档也给出了解决办法。
<wx-open-launch-weapp
id="launch-btn"
username="gh_xxxxxxxx"
path="pages/home/index?user=123&action=abc"
>
<script type="text/wxtag-template">
<style>.btn { padding: 12px }</style>
<button class="btn">打开小程序</button>
</script>
</wx-open-launch-weapp>
这边重点写下3.0的方式，由于用上面的代码，在3.0中会报错。
在vue3里，script是不可以直接植入template里面的，会报错
VueCompilerError: Tags with side effect (<script> and <style>) are ignored in client component templates. 。解决办法是通过 v-is 进行绕过：使用 <div v-is="'script'" type="text/wxtag-template">以替代<script>。不管是wx-open-launch-weapp还是里面的组件，都需要做一个绝对定位，把按钮的宽度和高度都撑满，就会导致显示不出来，或者是点击没有效果。
<template>
<div class="btn_content">
<div class="normal_btn buy_info">即刻购买</div>
<div v-if="isReady && !isMiniPro" class="buy_info">
<wx-open-launch-weapp
ref="launch_btn"
username="gh_8c3cxxxxx"
path="pages/playHome/playHome?chan_id=2_46&utm_source=mxxxx"
style="position:absolute;left:0;top:0;width:100%;height:100%;"
>
<div v-is="'script'" type="text/wxtag-template">
<div style="position:absolute;left:0;top:0;width:100%;height:100%;"></div>
</div>
</wx-open-launch-weapp>
</div>
</div>
</template>
<script>
import { computed, reactive, toRefs } from "vue";
import { useStore } from "vuex";
export default {
name: "rh-open-tag",
setup() {
const store = useStore();
const state = reactive({
isReady: computed(() => {
console.log(
store.state.isWXReady
);
return store.state.isWXReady;
}),
isMiniPro: computed(() => {
console.log(
store.state.isMiniPro
);
return store.state.isMiniPro;
}),
});
return {
...toRefs(state),
};
},
};
</script>
<style lang="scss" scoped>
.btn_content {
position: relative;
width: 286px;
height: 74px;
margin: 0 auto;
overflow: hidden;
.buy_info {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
font-size: 40px;
font-weight: normal;
margin-bottom: 20px;
}
}
</style>
注意一定要把大小撑满，内置元素也要撑满。如下，wx-open-launch-weapp是orange颜色，内置div是红色，全部用绝对定位撑满。
image.png
image.png
题外话
在vue3.0中，如果直接写<wx-open-launch-weapp></wx-open-launch-weapp>会报警告，标签不存在，可以选择忽略这个标签的警告。
config.module.rule('vue').use('vue-loader').tap(options => {
options.compilerOptions = {
...options.compilerOptions,
// 忽略wx-开头的组件，这些是微信的默认组件
isCustomElement: tag => tag.startsWith('wx-open')
}
return options
})
image.png
总结遇到的问题
- 保证引入的微信sdk是最新的1.6.0。
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> - 保证当前域名已经加入公众号的安全域名，否则签名会失效。
- 保证已经签名成功，并且在IDE上可以看到签名确实是ok。
- 如果是在2.0下，注意template的使用方式，会和脚手架的template起冲突。
- 如果是在3.0下，注意script标签是不被允许写在页面上，要通过v-is来指定。
- 如果显示出来了，但是点击无效，尝试看是否wx-open-launch-weapp有大小。
- 如果wx-open-launch-weapp，尝试看内置，标签包含内的div是否有大小。
- 不建议在wx-open-launch-weapp标签内写内容。可以用相对定位来做，wx-open-launch-weapp只是一个浮层，有的时候，就盖在按钮上面。签名或者是还在等待ready的时候，就先不盖在上面。
- 如上几步基本上能解决显示，以及跳转问题。
