weixin-js-sdk は vue 共有機能を実装
h5 リンクは WeChat の友達や Moments と共有され、リンク カードの内容は
WeChat 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()
}
})
})
}
}
ページの使い方
注: WeChat カスタム共有機能を使用する場合、共有リンクに中国語が含まれている場合、encodeURIComponent() を実行する必要があります. 理由:
カスタム共有は Android フォンでは正常にカスタマイズできますが、Android フォンでは正常に共有できません。 iOS フォン、および Android フォンは自動的に URIComponent をエンコードしますが、IOS はエンコードしません。
handleShareWechat() {
import('@/plugins/wechat.js').then(mod => {
let wx = mod.default
wx.init()
wx.setWechatShareInfo(location.href, '分享标题', '分享描述')
})
},