最近開發了 jssdk的前後臺，踏坑無數，主要是後端代碼，後來發現一個模塊qc-wechat-jssdk，利用這個模塊進行了開發。
後端採用 nodejs
這個模塊使用memory-cache作爲緩存，緩存jsapi_ticket。
1、npm install qc-wechat-jssdk
2、配置文件
const _jssdk = require('qc-wechat-jssdk')
_jssdk.configure({
appId:config.appid,
secret:config.secret
})
3、獲取前端 jssdk 需要的參數：nonceStr，signature，timestamp
//這裏 url 必須是動態的，因爲微信客戶端會在你的鏈接末尾加入其它參數，如果不是動態獲取當前鏈接，將導致分享後的頁面簽名失敗。
let url = req.query.url
let data =await _jssdk.getjssdk(url)
console.log(data)
data 的值
"timestamp": "1586765360",
"nonceStr": "melrd7dk5a",
"signature": "",
"jsapi_ticket": "",
"appId": "",
"url": ""
這個模塊其他的方法
1、getTokenAndTicket，來獲取access_token、jsapi_ticket。
注意：這個方法不會緩存 access_token、jsapi_ticket，有限制次數，需要自定義緩存機制
let data = await _jssdk.getTokenAndTicket()
console.log(data)
data 的值
{
token:'',
ticket:''
}
2、 sign 方法，生成簽名
let signData = _jssdk.sign(ticket,url)
console.log(signData)
signData的值
{
timestamp: "1587086143",
nonceStr: "aowjqxuvfr",
signature: "",
jsapi_ticket: "",
appId: "",
url: ""
}
前端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="微信二次分享" />
<meta name="description" content="獲取微信二次分享描述" />
<title>Title</title>
</head>
<body>
<h1>測試</h1>
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
function ajax(options){
//創建一個ajax對象
var xhr = new XMLHttpRequest() || new ActiveXObject("Microsoft,XMLHTTP");
//數據的處理 {a:1,b:2} a=1&b=2;
var str = "";
for(var key in options.data){
str+="&"+key+"="+options.data[key];
}
str = str.slice(1)
if(options.type == "get"){
var url = options.url+"?"+str;
xhr.open("get",url);
xhr.send();
}else if(options.type == "post"){
xhr.open("post",options.url);
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
xhr.send(str)
}
//監聽
xhr.onreadystatechange = function(){
//當請求成功的時候
if(xhr.readyState == 4 && xhr.status == 200){
var d = xhr.responseText;
//將請求的數據傳遞給成功回調函數
options.success&&options.success(d)
}else if(xhr.status != 200){
//當失敗的時候將服務器的狀態傳遞給失敗的回調函數
options.error&&options.error(xhr.status);
}
}
}
function wxjs2(){
var _shareurl = window.location.href;
var url = location.href.split('#')[0];//（前臺傳到後臺的url，比後臺用request.getRequestURL準確）
url = encodeURIComponent(url)
console.log(url)
ajax({
type:"get",
url:"/api/gvrchat/jssdk",//後臺接口路徑
data:{url:url},//傳入頁面 url
success:function(data){
console.log(data)
var obj = JSON.parse(data).data;
console.log(obj);
wx.config({
debug: true,
appId: obj.appId,
timestamp: obj.timestamp,
nonceStr: obj.nonceStr,
signature: obj.signature,
jsApiList: ['updateAppMessageShareData','updateTimelineShareData']
});
// var formLst = JSON.parse($("#session").html());
var friendShareTitle = "全景圖測試";
var friendShareDesc = "點我點我點我點我點我點我點我點我點我點我點我點我點我點我點我點我點我全景圖全景圖全景圖全景圖";
var friendShareImgUrl = "http://video2.gvrcraft.com/pic/yxk.jpg";
var cfShareTitle = "";
var cfShareImgUrl = "";
wx.ready(function () { //需在用戶可能點擊分享按鈕前就先調用
wx.updateAppMessageShareData({
title: friendShareTitle, // 分享標題
desc: friendShareDesc, // 分享描述
link: _shareurl, // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
imgUrl: friendShareImgUrl // 分享圖標
});
wx.updateTimelineShareData({
title: cfShareTitle, // 分享標題
link: _shareurl, // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
imgUrl: cfShareImgUrl // 分享圖標
});
elseShareMathod(cfShareTitle,_shareurl,cfShareImgUrl,friendShareDesc)
wx.error(function (res) {
alert(res.toString())
});
});
}
})
}
function elseShareMathod(title,link,imgUrl,desc){
wx.updateTimelineShareData({
title: title, // 分享標題
link: link, // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
imgUrl: imgUrl, // 分享圖標
success: function () {
// 設置成功
}
})
wx.onMenuShareTimeline({
title: title, // 分享標題
link: link, // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
imgUrl: imgUrl, // 分享圖標
success: function () {
// 用戶點擊了分享後執行的回調函數
}
})
wx.onMenuShareAppMessage({
title: title, // 分享標題
desc: desc, // 分享描述
link: link, // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
imgUrl: imgUrl, // 分享圖標
// type: '', // 分享類型,music、video或link，不填默認爲link
// dataUrl: '', // 如果type是music或video，則要提供數據鏈接，默認爲空
success: function () {
// 用戶點擊了分享後執行的回調函數
}
});
wx.onMenuShareQQ({
title: title, // 分享標題
desc: desc, // 分享描述
link: link, // 分享鏈接
imgUrl: imgUrl, // 分享圖標
success: function () {
// 用戶確認分享後執行的回調函數
},
cancel: function () {
// 用戶取消分享後執行的回調函數
}
});
wx.onMenuShareWeibo({
title: title, // 分享標題
desc: desc, // 分享描述
link: link, // 分享鏈接
imgUrl: imgUrl, // 分享圖標
success: function () {
// 用戶確認分享後執行的回調函數
},
cancel: function () {
// 用戶取消分享後執行的回調函數
}
});
wx.onMenuShareQZone({
title: title, // 分享標題
desc: desc, // 分享描述
link: link, // 分享鏈接
imgUrl: imgUrl, // 分享圖標
success: function () {
// 用戶確認分享後執行的回調函數
},
cancel: function () {
// 用戶取消分享後執行的回調函數
}
});
}
wxjs2()
</script>
</body>
</html>