前言
本文采用
wx.miniProgram.getEnv()方法,判断当前的环境,并使用小程序分享和js-sdk分享的方式实现分享功能。
原理
通过判断当前环境,采用对应的方法,集成分享功能。
实现
// 引入文件
<script src="./js/jweixin-1.3.2.js"></script> // 下载 jweixin; 或者在项目中使用npm下载官方提供的包
// 初始化调用
xcx_share();
// 小程序分享功能
function share() {
let params = {
url: window.location.href,
};
$.ajax({
type: 'post',
url: getJsapiTicket, // 请求接口,返回js-sdk配置的参数
async: false,
contentType: 'application/json;charset=UTF-8',
data: JSON.stringify(params),
success: function (data) {
var weixindata = data
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印
appId: weixindata.returnObject.appId,
timestamp: weixindata.returnObject.timestamp,
nonceStr: weixindata.returnObject.nonceStr,
signature: weixindata.returnObject.signature,
jsApiList: [
'onMenuShareTimeline', //分享给好友
'onMenuShareAppMessage', //分享到朋友圈
'onMenuShareQQ', //分享到QQ
'onMenuShareWeibo', //分享到微博
],
});
var title = '分享标题'
wx.ready(function () {
var shareData = {
title: title,
desc: '分享的内容', //这里请特别注意是要去除html
link: shareurl,
imgUrl:'https://cpicaicdn.abtpt.cn/bxhd/ylsh/img/shore_logo.png', //分享的图片
};
wx.onMenuShareAppMessage({
...shareData,
success: function () {
// 分享成功的回调
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
wx.onMenuShareTimeline({
...shareData,
success: function () {
// 分享成功的回调
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
wx.onMenuShareQQ({
...shareData,
success: function () {
// 分享成功的回调
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
wx.onMenuShareWeibo({
...shareData,
success: function () {
// 分享成功的回调
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
});
}
})
};
// 判断当前的环境
function xcx_share(){
wx.miniProgram.getEnv(function (res) {
if (res.miniprogram) {
// 走在小程序的逻辑
if(筛选条件,参数不同走不同的接口){
wx.miniProgram.postMessage({
data: {
shareurl: '', // 分享地址
sharedesc: '', // 分享语
imageUrl: ''// 分享图片
}
})
}else if(筛选条件,参数不同走不同的接口)
wx.miniProgram.postMessage({
data: {
shareurl: '', // 分享地址
sharedesc: '', // 分享语
shareimg: ''// 分享图片
}
})
}
}else{
// 走不在小程序的逻辑
share();
}
})
}
总结
根据当前的环境判断需要采用的分享方式,实现分享功能