h5手機端微信自定義分享

一、綁定域名

        首先要確保微信公衆號後臺的域名和自己代碼裏分享鏈接的域名要保持一致

二、引入微信端js文件

<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

三、根據微信sdk獲取微信分享的配置參數：appId、生成簽名的時間戳、生成簽名的隨機串、簽名，一般這些參數的獲取都是通過後臺進行生成的，前端直接獲取即可。

// 微信分享
$.ajax({
	type : "get",    //請求類型
	contentType:'application/json',
	url : '',//請求的 URL地址
	dataType : "json",//返回的數據類型
	success:(data)=> {
		if(data.result_code == 0){
			console.log(data);
			var appId=data.jsapiParam.appId; //微信公衆號的appId
			var timestamp = data.jsapiParam.timestamp; //根據js-sdk生成的時間戳
			var nonceStr = data.jsapiParam.nonceStr; //根據js-sdk生成的隨機字符串
			var signature = data.jsapiParam.signature; //跟局js-sdk生成的簽名
            // 微信分享配置函數
            wx.config({
	            debug: false, // 調試模式
	            appId: appId, //必填，微信公衆號的appId
	            timestamp: timestamp, // 必填，生成簽名的時間戳
	            nonceStr: nonceStr, // 必填，生成簽名的隨機串
	            signature: signature,// 必填，簽名
	            jsApiList: ['onMenuShareAppMessage',
		            'onMenuShareTimeline',
		            'onMenuShareWeibo',]// 必填，需要使用的JS接口列表
            });
		}else{
			console.log(data.result_message)
		}
		
	},
	error:function (data) {
		console.log(data)
	}
	
})

四、通過config接口注入權限驗證配置

// 微信分享配置函數
wx.config({
	debug: false, // 調試模式
	appId: appId, //必填，微信公衆號的appId
	timestamp: timestamp, // 必填，生成簽名的時間戳
	nonceStr: nonceStr, // 必填，生成簽名的隨機串
	signature: signature,// 必填，簽名
	jsApiList: ['onMenuShareAppMessage',
		'onMenuShareTimeline',
		'onMenuShareWeibo',]// 必填，需要使用的JS接口列表
});

可以通過設置debug:true進行調試，以便完成測試和分享。

五、配置微信分享樣式

// 微信分享
var obj = {
	title: this.activityData.name, // 分享標題
	desc: this.activityData.introduce, // 分享描述
	link:'',	//鏈接地址
	imgUrl: this.activityData.imageUrl, // 分享圖標
	success: function () {
		alert('分享成功')
	},
	cancel:function(){
		alert('取消分享')
	}
};

六、微信分享事件（具體的分享途徑請查看微信官方文檔：微信公衆號開發文檔鏈接）

wx.ready(function () {
	// 分享給朋友
	wx.onMenuShareAppMessage(obj);
	// 分享到朋友圈和qq空間
	wx.onMenuShareTimeline(obj);
	// // 分享到微博
	wx.onMenuShareWeibo(obj);
})