【Vue功能】weixin-js-sdk实现vue分享功能

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, '分享标题', '分享描述')
				})
			},