1.导入wxTool.js文件
import wx from 'weixin-js-sdk' //记得 npm i weixin-js-sdk
//获取微信签名
export const getWxSigatureInfo = () => {
//1.联调获取微信签名(由后台提供接口)
//假设示例
let data = 联网方法('/后台接口')
//2.调用方法配置
wxConfig(data)
}
const wxConfig = (signatureInfo) => {
wx.config({
debug: false, // 是否开启调试模式
appId: '你的公众号id', // 必填，公众号的唯一标识
timestamp: signatureInfo.timestamp, // 必填，生成签名的时间戳
nonceStr: signatureInfo.nonceStr, // 必填，生成签名的随机串
signature: signatureInfo.signature, // 必填，签名
jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData',
'onMenuShareAppMessage'
], // 必填，需要使用的 JS 接口列表
openTagList: ['wx-open-launch-app'] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
})
wx.error((res) => {
//验证失败，显示普通按钮
console.log('error', res);
})
}
//微信分享
/**
* @param {string} title // 分享标题
* @param {string} desc // 分享描述
* @param {string} link // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
* @param {string} imgUrl // 分享图标
*/
export const setWxShare = ({
title,
desc,
linkUrl,
imgUrl
}) => {
wx.ready(() => {
//微信分享朋友
wx.updateAppMessageShareData({
title,
desc,
linkUrl,
imgUrl
})
//微信分享给朋友圈
wx.updateTimelineShareData({
title,
desc,
linkUrl,
imgUrl
})
})
}
2. 导入微信标签组件 wxOpenBar.vue (自己封装的,建议设置成全局组件)
<!-- 微信开放标签组件 -->
<!-- 使用此组建的父盒子需相对定位，加class： p-relative -->
<!-- 例子： <WxOpenBar :extinfo="extinfo" width="40px" height="26px" class="wx-btn-box"></WxOpenBar> -->
<template>
<view>
<!-- ↓ 下面的div 可以测试 width height 是否正常传递 -->
<!-- <div :style="{border:'1px solid red',width:width,height:height}"></div> -->
<wx-open-launch-app id="launch-btn" appid="你要跳转的appid" :extinfo="extinfo" @error="handleErrorFn">
<script type="text/wxtag-template">
<style>.wx-btn{
background-color: transparent;
width:{{width}};
height:{{height}};
}</style>
<div class=".wx-btn"></div>
</script>
</wx-open-launch-app>
</view>
</template>
<script>
export default {
props: {
extinfo: {
type: String,
default: "" //携带的参数
},
width: {
type: String,
default: "100px" //组件的宽
},
height: {
type: String,
default: "50px" //组件的高
},
},
methods: {
handleErrorFn() {
this.$emit('error')
}
}
}
</script>
<style>
</style>
补充两个css 建议放在全局css文件 方便使用 我是放在了 uni.css里面
.p-relative{
position:relative;
}
.wx-btn-box{
position:absolute;
top:0;
left:0;
z-index:2;
}
3.在页面中使用开放标签
<script setup>
import {getWxSigatureInfo,setWxShare} from './wxTool.js';
import WxOpenBar from './WxOpenBar.vue' //建议设置为全局组件
/**
* 1.设置微信朋友圈分享文案等(无需设置可忽略)
* 2.如果有需要 setWxShare 一定要再getWxSigatureInfo前调用 防止后面分享文案没有设置成功
*/
setWxShare({
title: '分享文案的标题', // 分享标题
desc: '分享内容的描述！' // 分享描述
})
//2.获取签名
getWxSigatureInfo()
//3.如果需要携带跳转参数
let extinfo = JSON.stringify({
name: '来自微信的跳转' //参数随便写
})
</script>
<template>
<view class="index-page">
<!-- 使用此组建的父盒子需相对定位，加class： p-relative -->
<view class="btns-box p-relative">
<view class="btn">
我是分享的按钮
</view>
<WxOpenBar :extinfo="extinfo" width="40px" height="26px" class="wx-btn-box"></WxOpenBar>
</view>
</view>
</template>
<style lang="scss" scoped>
</style>
