公眾號中H5頁面分享給好友或朋友圈自定義圖片或文字

未做處理的H5頁面分享

處理后的H5頁面分享

 

 實現流程：

1.微信公眾號--->公眾號設置--->JS接口安全域名

 2.在components中新建js文件，導入JSSDK文件和撰寫分享代碼，如下

（1）導入js-sdk

 npm 安裝 （npm install weixin-js-sdk --save）

 引入用var wx = require('weixin-js-sdk');

 也可以自己下載最新sdk文件本地直接引入，但需要注意路徑

（2）分享代碼

//引入js-sdk
var wx = require('weixin-js-sdk');
export default {
	getConfig(infoTitle, infoDesc, infoLink, infoImg) {  //自定義分享所需要的參數
		getSignature({//從后台獲取簽名等內容，其中getSignature為本人自己封裝請求，可以按需自己修改。
		    success: (res) => {
		        wx.config({
		        	debug: false,  //測試時候用true 能看見wx.config的狀態是否是config:ok
		        	appId: res.data.data.appId, // 必填，公眾號的唯一標識（公眾號的APPid）
		        	timestamp: res.data.data.timestamp, // 必填，生成簽名的時間戳
		        	nonceStr: res.data.data.nonceStr, // 必填，生成簽名的隨機串
		        	signature: res.data.data.signature, // 必填，簽名
		        	jsApiList: [
		        		'onMenuShareTimeline', // 分享給好友
		        		'onMenuShareAppMessage', // 分享到朋友圈
		        		'updateAppMessageShareData', // 分享給好友1.4
		        		'updateTimelineShareData' // 分享到朋友圈1.4
		        	], // 必填，需要使用的JS接口列表
		        	openTagList: ['wx-open-launch-app'] // 可選，需要使用的開放標簽列表，例如['wx-open-launch-app']
		        });
		        wx.ready(function() {
		        	var shareData = {
		        		title: infoTitle, // 分享標題
		        		desc: infoDesc, // 分享描述
		        		link: infoLink, // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
		        		imgUrl: infoImg, // 分享圖標
		        		success: function(res) {
							
						}
		        	};
		        	//自定義“分享到朋友圈”及“分享到QQ空間”按鈕的分享內容（1.4.0）
		        	wx.updateAppMessageShareData(shareData);
		        	//自定義“分享給朋友”及“分享到QQ”按鈕的分享內容（1.4.0）
		        	wx.updateTimelineShareData(shareData);
		        })
		    }
		});
	}
}

3.在main.js中全局掛載

import wechat from './components/wechat.js'
Vue.prototype.wxH5Share = wechat

4.在需要分享頁面添加分享內容

let title = '主標題'
let infoDesc='副標題'
let infoLink = '您的分享鏈接'
let infoImg='你的分享圖片'
this.wxH5Share.getConfig(title, infoDesc, infoLink, infoImg);　

分享到朋友圈功能在里面已經通過wx.updateTimelineShareData(shareData)實現，可以自行驗證。