首先我们要认证公众号
然后给后端发起请求,请求一下代码
// 引入wxsdk
import wx from "weixin-js-sdk";
const isWxReady = ref(false)
const wxAppletData = ref({})//保存数据后端返回的数据
const getSign = async () => {
let url = encodeURIComponent(location.href.split("#")[0])
let data = await getShareSignNewApi(url);//这是我封装的请求接口方法 你们自己用自己封装的请求就好了
if(data.code == 200){
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: data.appid, // 必填,公众号的唯一标识
timestamp: data.timestamp, // 必填,生成签名的时间戳
nonceStr:data.nonceStr, // 必填,生成签名的随机串
signature: data.signature,// 必填,签名
jsApiList: [
"updateAppMessageShareData", //自定义“分享给朋友”及“分享到QQ”按钮的分享内容(1.4.0) 新接口
"updateTimelineShareData", //自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容(1.4.0)
],
openTagList: ['wx-open-launch-app','wx-open-launch-weapp'],
});
wx.ready(function () {
isWxReady.value = true
});
wx.error(function (res) {
});
}else{
}
};
然后我们在做一个最重要的步骤,没有它根本实现不了
在main.ts里面配置一下代码,不然按钮不会显示
app.isCustomElement = (tag) => tag.startsWith('wx-open-launch-weapp')
然后我们在template 部分引入一下代码
<div class="navigateTowx-con">
<wx-open-launch-weapp class="wx-open" id="launch-btn" appid="小程序AppId" path="跳转的路径">
<div v-is="'script'" type="text/wxtag-template" class="divSpan">
<span class="span span1">跳转</span>
<span class="span span2">我也唱一首</span>
</div>
</wx-open-launch-weapp>
</div>
v-is="'script'" //这个是vue3独有的配置
这个我琢磨了一天才实现的确实有点麻烦,建议看微信js-sdk文档
这是js-sdk地址
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html