在微信的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>
image.png image.png注意一定要把大小撑满,内置元素也要撑满。如下,wx-open-launch-weapp是orange颜色,内置div是红色,全部用绝对定位撑满。
题外话
在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的时候,就先不盖在上面。
- 如上几步基本上能解决显示,以及跳转问题。
网友评论