weixin-js-sdk实现vue分享功能
h5链接分享到微信好友、朋友圈的链接卡片内容可以自定义
安装微信sdk
cnpm install weixin-js-sdk -S
使用
新建文件:plugins/wechat.js
import wx from 'weixin-js-sdk'
import axios from 'axios'
let config = {
debug: false, // 查看初始化结果,成功与否
appId: "", //公众号的APPID
nonceStr: "", // 生成签名的随机字符串
timestamp: 0, // 生成签名的时间戳
signature: "", // :微信生成的签名
jsApiList: ["updateAppMessageShareData",'choosehXPay ','miniprogram.navigateTo',"invokeMiniprogramAPI"] // 必填,需要使用的JS接口列表,需要在项目当中使用的那些方法,比如说支付chooseWXPay,直接把方法写进jsApiList里面既可
}
export default {
init() {
axios({
method: "POST",
// url:注意,每次url变化之后都需要重新微信jssdk授权,虽然每次授权url除去#后都是一样的,但是必须这么做,微信的机制
url: process.env.VUE_APP_GUIGUI_API_HOST + "/api/wechat/getHmcSDKConfig",
}).then(res => {
let configData = res.data.data
if (configData) {
config.appId = configData.appId
config.nonceStr = configData.nonceStr
config.timestamp = configData.timestamp
config.signature = configData.signature
}
wx.config(config)
})
},
setWechatShareInfo(link, title, desc, imgUrl, callBack) {
wx.ready(function () {
//需在用户可能点击分享按钮前就先调用
wx.updateAppMessageShareData({
title: title || '', // 分享标题
desc: desc || '', // 分享描述
link: link || '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: imgUrl || '', // 分享图标
success: function () {
callBack()
}
})
})
}
}
页面使用
注意:使用微信自定义分享功能的时候,当分享链接中存在中文的时候,要进行encodeURIComponent(),
原因:在安卓手机上能成功自定义分享,ios手机上则不能成功分享,安卓手机会自动encodeURIComponent,而IOS不会。
handleShareWechat() {
import('@/plugins/wechat.js').then(mod => {
let wx = mod.default
wx.init()
wx.setWechatShareInfo(location.href, '分享标题', '分享描述')
})
},