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}&timestamp=${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" : "分享说明"
}