要实现在H5页面上的微信分享链接功能,需要配置微信JS-SDK,并在页面中调用微信JS-SDK的接口。具体步骤如下:
1.在微信公众平台中配置JS接口安全域名。
2.在uniapp项目中引入jweixin-1.6.0.js(可在微信JS-SDK下载页面下载并添加到项目中)。
3.在uniapp项目中创建一个js文件,填写以下代码:
import wx from 'jweixin-1.6.0.js'
export function wxShare(title, desc, link, imgUrl) {
//用uniapp自带的ajax请求后端接口获取微信签名信息,并得到signature,appId等参数
uni.request({
url: 'http://xxx.com/wxconfig',
method: 'POST',
data: {
url: window.location.href.split('#')[0]
},
success: function (res) {
let wxConfig = res.data
wx.config({
debug: false,
appId: wxConfig.appId,
timestamp: wxConfig.timestamp,
nonceStr: wxConfig.nonceStr,
signature: wxConfig.signature,
jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData']
})
wx.ready(function () {
wx.updateAppMessageShareData({
title: title, // 分享标题
desc: desc, // 分享描述
link: link, // 分享链接
imgUrl: imgUrl, // 分享图标
success: function () {},
fail: function () {}
})
wx.updateTimelineShareData({
title: title, // 分享标题
link: link, // 分享链接
imgUrl: imgUrl, // 分享图标
success: function () {},
fail: function () {}
})
})
}
})
}
4.在需要添加分享功能的页面中,引入上述js文件,并在点击分享按钮的事件处理函数中调用wxShare函数:
import { wxShare } from '@/common/wx-share.js'
export default {
methods: {
share () {
let title = '分享标题'
let desc = '分享描述'
let link = '分享链接'
let imgUrl = '分享图标URL'
wxShare(title, desc, link, imgUrl)
}
}
}
以上就是在uniapp中实现微信分享链接功能的方法。需要注意的是,由于微信JS-SDK要求使用HTTPS协议,而uniapp本地开发时使用的是HTTP协议,因此在本地开发时需要使用内网穿透工具实现HTTPS协议访问。