第一步:安装weixin-js-sdk
npm i weixin-js-sdk -S
第二步:配置信息
对于vue来说,推荐在App.vue中进行信息配置,这里提供了一个功能方法进行配置
export function handleWxConfig() {
const wx = require('weixin-js-sdk')
// url 是你存储微信配置信息的接口
axios.get(url)
.then(res => {
if (res.errorcode === 'ok') {
let { signature, timestamp, noncestr } = res.result
wx.config({
// debug: this.$store.state.isDebugger ? true : false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: APPID, // 必填,公众号的唯一标识
timestamp: timestamp, // 必填,生成签名的时间戳
nonceStr: noncestr, // 必填,生成签名的随机串
signature: signature, // 必填,签名
jsApiList: ['chooseImage', 'updateAppMessageShareData', 'updateTimelineShareData'] // 必填,需要使用的JS接口列表
})
} else {
alert('获取微信签名失败')
}
})
.catch(err => {
console.error(err)
})
}
第三步:分享好友和分享朋友圈自定义配置
wx.ready(() => {
let imgUrl = ''
let desc = ''
let link = ''
wx.updateAppMessageShareData({
title: name, // 分享标题
desc: desc, // 分享描述
link: link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: imgUrl, // 分享图标
success: () => {
Toast('发送好友分享模板设置成功')
},
fail: (err) => {
// 设置失败
Toast('发送好友分享模板设置失败')
}
})
wx.updateTimelineShareData({
title: name, // 分享标题
link: link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: imgUrl, // 分享图标
success: () => {
Toast('朋友圈分享模板设置成功')
},
fail: (err) => {
// 设置失败
Toast('朋友圈分享模板设置失败')
}
})
})
以上三步就可以配置好分享功能
注意
1、直接在微信中通过链接打开的话,分享出去的也是一个链接,可以将链接转化为一个二维码,通过微信扫码打开界面,这是分享出去就是自定义的卡片了。
2、微信没有暴露出获取用户列表接口,就是不能做成直接选择用户分享,必须引导用户,点击右上角三个点,进行分享。
3、提供几个判断平台的方法
// 判断是否是IOS
export function isIOS() {
return /(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)
}
// 判断是否是安卓
export function isAndroid() {
return /Android/i.test(navigator.userAgent)
}
// 判断微信环境
export function isWXEnv() {
const ua = window.navigator.userAgent.toLowerCase()
if (ua.match(/MicroMessenger/i) && ua.match(/MicroMessenger/i)[0] === 'micromessenger') {
return true
} else {
return false
}
}