1.绑定域名
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS 接口安全域名”。
注意：1.登录后可在 “开发者中心” 查看对应的接口权限
2.该公众号必须通过微信认证，没有微信公众号需要注册一个
2.下载模块
npm install weixin-js-sdk --save
3.在需要分享的页面引入这个依赖
import wxshare from "weixin-js-sdk"
4.通过config 接口注入权限验证配置
wxshare.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: config.appId, // 必填，公众号的唯一标识
timestamp: config.timestamp, // 必填，生成签名的时间戳
nonceStr: config.nonceStr, // 必填，生成签名的随机串
signature: config.signature, // 必填，签名
jsApiList: [
'checkJsApi',
// 'onMenuShareTimeline',//旧版本
// 'onMenuShareAppMessage',//旧版本
'updateAppMessageShareData',
'updateTimelineShareData'
], // 必填，需要使用的JS接口列表
});
5.设置分享信息
wxshare.ready(function () { //需在用户可能点击分享按钮前就先调用
//自定义“分享给朋友”及“分享到QQ”的分享内容
wxshare.updateTimelineShareData({
title: '', // 分享标题
link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
imgUrl: '', // 分享图标
success: function () {
// 设置成功
}
})
//自定义“分享到朋友圈”及“分享到 QQ 空间”分享内容
wx.updateTimelineShareData({
title: '', // 分享标题
link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
imgUrl: '', // 分享图标
success: function () {
// 设置成功
}
})
});
6.分享
用户点击分享按钮的时候引导用户点击右上角的三个点打开弹窗进行分享。
7.实例代码:
<button @click="onshar">分享</button>
<script>
data(){
return{
show:false //开始不显示分享的指引
}
}
onLoad(){
this.shar()
},
methonds:{
onshar(){ //点击分享的时候显示分分享操作的指引
this.show=ture
}
//获得用户的openid
getGGHOpenid(code) {
let self = this;
let shop_id = uni.getStorageSync('shop_id');
let parent_id = uni.getStorageSync('parent_id');
let phone = uni.getStorageSync('phone');
//首先获取用户Openid
uni.request({
url: ' https://shop.helpetmall.com/api/openid',
method: "POST",
data: {code: code,
phone: phone,
parent_id: parent_id,
shop_id: shop_id,
},
dataType: "json",
success: function(res) {
self.openId = res.data.data.openid;
if (res.data.data.openid != null) {
uni.setStorageSync('openid', res.data.data.openid);
self.index();
}
},
fail: function(res) {
}
})
},
//分享内容async share() {
let _this = this;
uni.request({
url: ' https://shop.helpetmall.com/api/getshar',
method: "POST",
data: {
url: location.href
},
dataType: "json",
success: function(result) {
let data = result.data;
wxshare.config({
debug: false, //是否打开调试
appId: data.appId, // 公众号的唯一标识
timestamp: data.timestamp, // 生成签名的时间戳
nonceStr: data.nonceStr, // ，生成签名的随机串
signature: data.signature, // 签名
jsApiList: data.jsApiList
});
let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
let shop_name = _this.shop_name + '的萌宠小店';
let keyword = _this.keyword;
let actor = _this.actor;
let link = location.href;
wxshare.ready(function() {
//分享给朋友
wxshare.updateAppMessageShareData({
title: shop_name, // 分享标题
desc: keyword, // 分享描述
link: link, // 当前页面链接
imgUrl: actor, // 分享图标
success: function() { //分享成功回调
},
cancel: function() { //取消分享回调
}
});
//分享到朋友圈
wxshare.updateTimelineShareData({
title: shop_name, // 分享标题
link: link, // 分享链接
desc: keyword, // 分享描述
imgUrl: actor, // 分享图标
success: function() {},
cancel: function() {
}
});
})
},
})
},
}
</script>
