H5在微信浏览器中分享好友和朋友圈
[网页授权流程分为四步:
1.在公众号平台配置安全域名
- 在微信公众号请求用户网页授权之前,开发者需要先到公众平台官网中的「设置与开发」-「功能设置」-「网页授权域名」的配置选项中,修改授权回调域名。请注意,这里填写的是域名(是一个字符串),而不是URL,因此请勿加 http:// 等协议头;
2.安装引入weixin-js-sdk
包
css
npm i weixin-js-sdk
javascript
import jweixin from 'weixin-js-sdk'
3.初始化配置
通过请求后端接口,传递当前要使用分享功能的页面url, 后端返回签名,再设置配置
javascript
onLoad((e) => {
initWeixinShareConfig()
})
const initWeixinShareConfig = (options = {})=> {
let _this = this;
//动态获取当前的页面链接并且确保链接后面不能有#号
let linkUrl = window.location.href.split("#")[0];
//获取请求服务端获取签名信息
request.request({
url: '/xxx/xx', 后端接口
method: 'POST',
data:{
url: linkUrl
},
success: (res) => {
if (res.data.code==0) {
//配置
jweixin.config({
debug: false, //根据服务端来控制是否开启调试模式
appId: res.data.data.appId,
timestamp: res.data.data.timestamp,
nonceStr: res.data.data.nonceStr,
signature: res.data.data.signature,
jsApiList: ['updateAppMessageShareData','updateTimelineShareData'],
});
}
}
});
}
javascript
//定义设置分享数据方法
const setShareInfo = (options)=>{
//分享的触发动作必须写再ready里面
jweixin.ready(() => {
//配置分享数据
let shareData = {
title: options.title || "", //分享的标题
desc: options.desc || "", //分享的描述
link: options.link, //分享的链接
imgUrl: options.imgUrl || "", //分享的图片链接
success(response) {
//配置成功之后的回调(并不是分享成功之后的回调,这个地方是个坑,要注意下)
},
};
//分享给朋友接口
jweixin.updateAppMessageShareData(shareData);
//分享到朋友圈接口
jweixin.updateTimelineShareData(shareData);
});
cusShare?.value?.open('top')
}
//调用设置分享数据方法
const options = {
title: "test" || "", //分享的标题
desc: "我发布了视频,快来看看吧", //分享的描述
link:"https://www.baidu.com" || "",
imgUrl: "xxx" || "", //分享的图片链接
}
setShareInfo(options)
4.分享操作
进行过上边的操作,我们就可以点击右上角三个点进行朋友或朋友圈分享
5.注意事项
微信 JS 接口签名校验工具
- 微信通过这种"www.baidu.com" 的url链接进入的,再分享,会只分享出一个url长链接,而不是卡片形式。解决办法:将其url链接发送给任意公众号,点击链接进入,再进行分享,即可正常卡片形式