暂无AI摘要
实现公众号自定义分享
在公众号H5应用开发中，实现自定义分享可以修改分享卡片的标题、描述、图标以及链接，达到美化分享卡片的作用，并且自定义分享链接可以实现更好的实现业务逻辑，在不自定义链接的情况下，链接默认为用户分享时所处的页面
为实现这个功能，我们首先要查阅官方文档
官方文档1
分享接口
请注意，不要有诱导分享等违规行为，对于诱导分享行为将永久回收公众号接口权限，详细规则请查看：朋友圈管理常见问题
请注意，原有的
wx.onMenuShareTimeline、wx.onMenuShareAppMessage、wx.onMenuShareQQ、wx.onMenuShareQZone接口，即将废弃。请尽快迁移使用客户端6.7.2及JSSDK 1.4.0以上版本支持的wx.updateAppMessageShareData、wx.updateTimelineShareData接口。自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）
wx.ready(function () { //需在用户可能点击分享按钮前就先调用 wx.updateAppMessageShareData({ title: '', // 分享标题 desc: '', // 分享描述 link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: '', // 分享图标 success: function () { // 设置成功 } }) });自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）
wx.ready(function () { //需在用户可能点击分享按钮前就先调用 wx.updateTimelineShareData({ title: '', // 分享标题 link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: '', // 分享图标 success: function () { // 设置成功 } }) });
根据文档我们得知了自定义分享接口的使用方法，下面我们就可以进行实现了
注意
- 在使用以上自定义分享接口前，需要通过
wx.config接口注入权限验证配置
代码实现
首先引入jweixin.js文件：
- 网页访问http://res.wx.qq.com/open/js/jweixin-1.6.0.js，将代码复制保存到本地，例如保存到
@/static/common/js/jweixin.js 引入
jweixin.js：// 直接在页面中引入js文件 <script src="/static/common/js/jweixin.js"></script> // 如果是uni-app项目可以在template.h5.html引入 <!DOCTYPE html> <html lang="zh-CN"> <head> <!-- 添加下面这一行 --> <script src="<%= BASE_URL %>static/common/js/jweixin.js"></script> </head> </html> // 当然，你可以可以跳过第一步，直接引用jweixin的网络资源 <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
之后，我们可以把自定义分享功能封装成一个WeChatShareService单例类，我将这个单例类放到了@/services/WeChatShareService.js
import config from '@/common/config.js' // 我把自定义分享的配置写到config里了，这里可以根据你项目的情况进行修改
import { ShareSignature } from '@/api/Authentication.js' // 换成你项目对应的后端接口
class WeChatShareService {
static instance
vm
constructor(vm) {
this.vm = vm
this.init()
}
static getInstance(vm) {
if (WeChatShareService.instance === undefined) {
console.warn(
'No WeChatShareService instance found. New WeChatShareService instance will be created.'
)
WeChatShareService.instance = new WeChatShareService(vm)
}
return WeChatShareService.instance
}
async init() {
let sdkConfig = await this.fetchSDKConfig()
await this.initWXSDK(sdkConfig)
const shareConfig = this.getShareConfigFromConfigJs() // 在 config.js 中进行分享相关的配置
this.updateShareData(shareConfig)
}
async fetchSDKConfig() {
// 调用后端接口，获取 appId, timestamp, nonceStr, signature
/* ... 请把此部分换成你项目对应的实现
return await ShareSignature({ url: location.href.split('#')[0] }).then(
({ data }) => {
const { NonceStr, Signature, Timestamp } = data
return {
appId: config.appId,
timestamp: Timestamp,
nonceStr: NonceStr,
signature: Signature,
}
}
)
*/
}
initWXSDK({ appId, timestamp, nonceStr, signature }) {
return new Promise((resolve, reject) => {
jWeixin.config({
debug: false,
appId: appId,
timestamp: timestamp,
nonceStr: nonceStr,
signature: signature,
jsApiList: [
'updateAppMessageShareData',
'updateTimelineShareData',
],
})
jWeixin.ready(() => {
resolve()
})
jWeixin.error((error) => {
reject(error)
})
})
}
getShareConfigFromConfigJs() {
// 从 config.js 中获取分享相关的配置
// ... 请把此部分换成你项目对应的实现
}
updateShareData({ title, desc, link, imgUrl }) {
jWeixin.updateAppMessageShareData({
title: title,
desc: desc,
link: link,
imgUrl: imgUrl,
})
jWeixin.updateTimelineShareData({
title: title,
link: link,
imgUrl: imgUrl,
})
}
}
export default WeChatShareService
注意
- 如果使用
uni-app进行开发，微信JSSDK的全局对象wx已经被uni-app占用，需要使用jWeixin对象 - 配置自定义分享的链接（
link字段）时，该链接路径必须在公众号配置的JS安全域名下 配置自定义分享的图标（
imgUrl字段）时，该图标路径必须为绝对路径（网络资源，能直接访问），例如：const localIconPath = '/static/images/your_icon.jpg' // 本地图标的位置 const projectDeploymentPath = 'https://yourDomainName.com/projectPath' // 项目部署的位置 const imgUrl = projectDeploymentPath + localIconPath // 得到的绝对路径 // > https://yourDomainName.com/projectPath/static/images/your_icon.jpg- 后端生成签名时，
url字段不能写死，应该从前端动态获取，前端可以在调用获取签名接口时通过location.href.split('#')[0]来获取url并传递给后端。可以通过微信 JS 接口签名校验工具来验证签名
如何使用
使用非常简单，只需要在用户进行分享前调用一次
import WeChatShareService from '@/services/WeChatShareService.js'
WeChatShareService.getInstance(this)
原创文章，作者：白函，如若转载，请注明出处：https://wtboxes.com/article/50
