JSSDK公众号微信分享功能
VUE + JSSDK 微信分享功能; 公众号使用微信分享功能
·
微信公众平台支持前端网页,点击右上角的‘...’,可以选择分享到朋友圈、分享给好友、QQ等微信功能。分享我在项目中添加分享到朋友圈,分享好友的功能的实现。即图一所示的效果。实现的效果为图二所示
图一
图二
先要在项目中引入微信功能的支持文件,即WX的jssdk文件。我在项目中使用的是从外部引入
微信JSSDK,连接在此
1、为了项目整体结构 和 文件便于维护 创建wx.js,将所有wx方法封装
export default function(opts){
let {config,data,success,cancel} = opts;
wx.config({
debug: false, //开启调试模式
appId: config.appId, //公众号的唯一标识
timestamp: config.timestamp, //生成签名的时间戳
nonceStr: config.nonceStr, //生成签名的随机串
signature: config.signature, //签名
jsApiList: [ 'onMenuShareTimeline', 'onMenuShareAppMessage','hideMenuItems', 'checkJsApi'] //需要使用的JS接口列表
});
wx.ready(function () {
// 分享到朋友圈
wx.onMenuShareTimeline({
title : data.title, // 分享标题
link : data.link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl : data.imgUrl, // 分享图标
success : function(res) {
success && success(res)
},
cancel : function(res) {
cancel && cancel(res)
},
});
// 分享给朋友
wx.onMenuShareAppMessage({
title : data.title, // 分享标题
link : data.link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl : data.imgUrl, // 分享图标
desc : data.desc, // 描述
success : function(res) {
success && success(res)
},
cancel : function(res) {
cancel && cancel(res)
},
});
wx.hideMenuItems({
menuList : [ 'menuItem:editTag', 'menuItem:delete',
'menuItem:copyUrl', 'menuItem:originPage',
'menuItem:openWithQQBrowser', 'menuItem:openWithSafari',
'menuItem:share:email', 'menuItem:share:brand',
'menuItem:share:qq', 'menuItem:share:weiboApp',
'menuItem:share:facebook', 'menuItem:share:QZone' ]
});
});
}
//是否显示分享
export function showWxShare(is){
if (typeof WeixinJSBridge == "undefined") {
if (document.addEventListener) {
if(is === true){
document.addEventListener('WeixinJSBridgeReady', function(){
WeixinJSBridge.call('showOptionMenu');
}, false);
}else{
document.addEventListener('WeixinJSBridgeReady', function(){
WeixinJSBridge.call('hideOptionMenu');
}, false);
}
} else if (document.attachEvent) {
if(is === true){
document.attachEvent('WeixinJSBridgeReady', function(){
WeixinJSBridge.call('showOptionMenu');
});
document.attachEvent('onWeixinJSBridgeReady', function(){
WeixinJSBridge.call('showOptionMenu');
});
}else{
document.attachEvent('WeixinJSBridgeReady', function(){
WeixinJSBridge.call('hideOptionMenu');
});
document.attachEvent('onWeixinJSBridgeReady', function(){
WeixinJSBridge.call('hideOptionMenu');
});
}
}
} else {
if(is === true){
WeixinJSBridge.call('showOptionMenu');
}else{
WeixinJSBridge.call('hideOptionMenu');
}
}
}
2、新建处理签名数据的文件sign.js,使用sha1.js中的hex_sha1方法加密
import {hex_sha1} from '../plugins/sha1.js' //签名
export default function(data){
var urlN = window.location.href.split('#')[0];
var timestampn = new Date().getTime().toString();
var timestamp = timestampn.substring(0, 10); //生成签名的时间戳
var nonceStr = Math.random().toString(36).substr(2); //生成签名的随机串
var con = `jsapi_ticket=${data.ticket}&noncestr=${nonceStr}×tamp=${timestamp}&url=${urlN}`
var signature = hex_sha1(con); //签名
//签名处理后参数
return {
appId : data.appId,
timestamp : timestamp,
nonceStr : nonceStr,
signature : signature
}
}
3、创建share.js,通过接口获取微信签名,对外暴露方法wxShare方法;
import wxShare from '@/wx/wx.js' //微信支付
import wxSign from '@/wx/sign.js' //处理签名数据
/**
* 微信签名
* @param {Object} params={}
* @param {String} weixinName
*/
export function getWxSign({weixinName='xdbx-zs'} = {}) {
return http.get(`${URI.wx}/api/v1/weixin/get_token`, {params:{weixinName}})
}
export default function(data,signData){
//先获取签名
getWxSign(signData).then(res =>{
if(res.code == 200){
let config = wxSign({ticket:res.content.ticket,appId:res.content.appid})
wxShare({
config : config,
data : data,
success : function(res){
},
cancel : function(res){
}
})
}
})
}
4、index.vue页面调用
//index.vue 中调用
import wxShare from '@g/assets/js/wx/share.js'
//微信分享
wxShare(shareData)
//分享文案
shareData:{
"title" : "分享标题",
"link" : "分享链接",
"imgUrl" : "分享小图",
"desc" : "分享说明"
}
更多推荐
已为社区贡献9条内容
所有评论(0)