微信網頁自定義分享wx.config

阿新 • • 發佈：2020-08-21

具體參考：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#1

步驟一：繫結域名

先登入微信公眾平臺進入“公眾號設定”的“功能設定”裡填寫“JS介面安全域名”。

備註：登入後可在“開發者中心”檢視對應的介面許可權

步驟二：引入jweixin-module模組

直接使用npm在內網下載jweixin-module可能會因為超時而失敗。可以使用外網或者淘寶映象cnpm下載模組。

// 安裝cnpm（已經安裝cnpm請忽略）:
npm install -g cnpm --registry=https://registry.npm.taobao.org

// 安裝jweixin-module
cnpm install jweixin-module

由於我是在.js檔案中引用的。　

在此.js檔案開頭引入模組：

var WeixinApi = require('@/node_modules/jweixin-module/lib/index.js')

步驟三：通過config介面注入許可權驗證配置

WeixinApi.config({
  debug: true, // 開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來，若要檢視傳入的引數，可以在pc端開啟，引數資訊會通過log打出，僅在pc端時才會列印。
  appId: '', // 必填，公眾號的唯一標識
  timestamp: , // 必填，生成簽名的時間戳
  nonceStr: '', // 必填，生成簽名的隨機串
  signature: '',// 必填，簽名
  jsApiList: [] // 必填，需要使用的JS介面列表
});

注意事項

簽名用的noncestr和timestamp必須與wx.config中的nonceStr和timestamp相同。
簽名用的url必須是呼叫JS介面頁面的完整URL。
出於安全考慮，開發者必須在伺服器端實現簽名的邏輯。

關於與簽名相關的引數和appid由後臺提供。

關於jsApiList配置（任選）：

jsApiList:[

updateAppMessageShareData, //1.6.0 版介面，分享到微信好友/qq好友

updateTimelineShareData，//1.6.0 版介面，分享到微信朋友圈/qq空間

onMenuShareTimeline，//（即將廢棄）分享到微信好友

onMenuShareAppMessage，//（即將廢棄）分享到微信朋友圈

onMenuShareQQ，//（即將廢棄）分享到qq好友

onMenuShareWeibo，//分享到微博

onMenuShareQZone //分享到qq空間

]

jsApiList中選項還需要配套監聽（注意：link的引數該連結域名或路徑必須與當前頁面對應的公眾號JS安全域名一致，此連結不能帶#，h5路由使用hash的需要注意，有必要的話可以在跳轉後修改連結）：

WeixinApi.onMenuShareTimeline({
		title: shareTitle, // 分享標題
		desc: descContent, // 分享描述
		link: url, // 分享連結，該連結域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
		imgUrl: imgUrl,
		success: function (res) {
			// 使用者確認分享後執行的回撥函式
			uni.showToast({
				title: '分享成功'
			})
		},
		cancel: function () {
			// 使用者取消分享後執行的回撥函式
			uni.showToast({
				title: '分享失敗',
				icon: false
			})
		}
	});
 
	/* 分享給朋友 */
	WeixinApi.onMenuShareAppMessage({
		title: shareTitle, // 分享標題
		desc: descContent, // 分享描述
		link: url, // 分享連結，該連結域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
		imgUrl: imgUrl, // 分享圖示
		// type: '', // 分享型別,music、video或link，不填預設為link
		// dataUrl: '', // 如果type是music或video，則要提供資料鏈接，預設為空
		success: function () {
			// 使用者確認分享後執行的回撥函式
			uni.showToast({
				title: '分享成功'
			})
		},
		 
		cancel: function () {
			// 使用者取消分享後執行的回撥函式
			uni.showToast({
				title: '分享失敗',
				icon: false
			})
		}
	});
 
	/*分享到qq */
	WeixinApi.onMenuShareQQ({ 
		title: shareTitle, // 分享標題
		desc: descContent, // 分享描述
		link: url, // 分享連結
		imgUrl: imgUrl, // 分享圖示
		success: function () {
			// 使用者確認分享後執行的回撥函式
			uni.showToast({
				title: '分享成功'
			})
		},
		cancel: function () {
			// 使用者取消分享後執行的回撥函式
			uni.showToast({
				title: '分享失敗',
				icon: false
			})
		}
	});
 
	/* 分享到qq空間 */
	WeixinApi.onMenuShareQZone({
		title: shareTitle, // 分享標題 
		desc: descContent, // 分享描述
		link: url, // 分享連結
		imgUrl: imgUrl, // 分享圖示
		success: function () {
			// 使用者確認分享後執行的回撥函式
			uni.showToast({
				title: '分享成功'
			})
		},
		cancel: function () {
			// 使用者取消分享後執行的回撥函式
			uni.showToast({
				title: '分享失敗',
				icon: false
			})
		} 
	});
	/* 分享到微博 */
	WeixinApi.onMenuShareWeibo({
		title: shareTitle, // 分享標題 
		desc: descContent, // 分享描述
		link: url, // 分享連結
		imgUrl: imgUrl, // 分享圖示
		success: function () {
			// 使用者確認分享後執行的回撥函式
			uni.showToast({
				title: '分享成功'
			})
		},
		cancel: function () {
			// 使用者取消分享後執行的回撥函式
			uni.showToast({
				title: '分享失敗',
				icon: false
			})
		}
	});

// ...具體看需求