相關(guān)鏈接：
有一點希望注意：在寫代碼的時候靠益，要時刻明白寫的是前端還是后端。比如某些網(wǎng)頁用手機打開残揉，寫前端時使用alert調(diào)試比較方便胧后，因為瀏覽器中的console也看不到，特別是在手機端運行時抱环，如果分不清自己寫的前后端代碼绩卤，盯著控制臺也是不會有什么輸出的。
以下內(nèi)容均以測試號為例
綁定域名
測試號界面有
- 測試號信息 appID和appsecret
- 接口配置信息
//微信服務(wù)器校驗 返回echostr才能配置成功
if (req.query.echostr) {
console.log('收到微信校驗',req.query);
res.send(req.query.echostr);
return;
}
- JS接口安全域名
- 模板消息接口
- 體驗接口權(quán)限表
綁定域名就是在JS接口安全域名點擊修改江醇，修改域名即可
引入js文件
在需要調(diào)用JS接口的頁面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.2.0.js
配置驗證信息
所有需要使用JS-SDK的頁面必須先注入配置信息何暇，否則將無法調(diào)用,通過config接口注入權(quán)限驗證配置
wx.config({
debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來陶夜，若要查看傳入的參數(shù)，可以在pc端打開裆站，參數(shù)信息會通過log打出条辟，僅在pc端時才會打印。
appId: '', // 必填宏胯，公眾號的唯一標識
timestamp: , // 必填羽嫡，生成簽名的時間戳
nonceStr: '', // 必填，生成簽名的隨機串
signature: '',// 必填肩袍，簽名杭棵，見附錄1
jsApiList: [] // 必填，需要使用的JS接口列表氛赐，所有JS接口列表見附錄2
});
這里有幾個重點魂爪，
- 就是簽名生成。
- 確認簽名算法正確簽名算法校驗
- 確認config中nonceStr（js中駝峰標準大寫S）, timestamp與用以簽名中的對應(yīng)noncestr, timestamp一致艰管。
- 確認url是頁面完整的url(請在當前頁面alert(location.href.split('#')[0])確認)滓侍，包括'http(s)://'部分，以及'牲芋？'后面的GET參數(shù)部分,但不包括'#'hash后面的部分撩笆。沒有參數(shù)，基本應(yīng)該以/結(jié)束 例如：
https://www.baidu.com/ - 確認 config 中的 appid 與用來獲取 jsapi_ticket 的 appid 一致缸浦。
- 確保一定緩存access_token和jsapi_ticket夕冲。例如存入本地JSON文件
- 用來簽名的url要動態(tài)生成，否則簽名會失效餐济，尤其是分享出去的網(wǎng)頁會被添加額外的參數(shù)
官方demo找到nodejs的案例耘擂，里面有sign.js含有簽名算法，把它放到自己的項目中絮姆，以供使用醉冤。案例中用到的第三方庫是哪個版本秩霍，如果使用新版本有問題，就用案例中的版本蚁阳。
//獲取token的url地址
var token_url = `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appid}&secret=${secret}`;
//獲取ticket的url地址
var jsapi_ticket = `https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=${token}&type=jsapi`;
//注意拿到 token和ticket 一定要保存起來铃绒，方便后續(xù)使用。微信說2個小時 token失效螺捐，可以設(shè)置個定時器 比如1.8小時請求一次
// 先執(zhí)行一次
refesh_token_tickte();
// 創(chuàng)建定時器 每隔1.8小時 刷新一次 token 和ticket
var timer = setInterval(refesh_token_tickte,1000 * 60 * 60 *1.8);
/**
* 獲取token和ticket并存儲
*/
function refesh_token_tickte() {
getaccess_token(token_url, getjsapi_ticket);
}
/**
* 獲取token
* @param {*url} 獲取token的url地址
* @param {*callback} callback
*/
function getaccess_token(url, callback) {
console.log("正在請求token");
axios
.get(token_url)
.then(function(response) {
if (!response || !response.data || !response.data.access_token) {
console.log("未獲取到token");
callback(null, null);
return;
}
callback(null, response.data.access_token);
})
.catch(function(err) {
callback(err, null);
});
}
/**
* 回調(diào)函數(shù)
* 根據(jù)token獲取jsapi_ticket
* 同時 會生成 簽名 并保存到本地
* @param {*} err
* @param {*} token
*/
function getjsapi_ticket(err, token) {
if (err || !token) {
console.log("獲取token失敗");
return;
}
var jsapi_ticket = `https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=${token}&type=jsapi`;
axios
.get(jsapi_ticket)
.then(function(response) {
if (!response || !response.data || !response.data.ticket) {
console.log("未獲取到j(luò)sapi_ticket", response.data.errmsg);
return;
}
//只存儲簽名
try {
var signjson = "./serverjs/sign.json";
jsonfile.writeFileSync(signjson, {
access_token:token,
jsapi_ticket:response.data.ticket
}, { spaces: 2 });
console.log("token寫入成功");
} catch (error) {
console.log("寫入文件失敗", error.message);
}
})
.catch(function(error) {
if (error) {
console.log("獲取jsapi_ticket失敗", error.message);
}
});
}
/**
* 根據(jù)url動態(tài)生成簽名
* @param {*configurl} url
*/
function createCoinfDynamic(url) {
console.log('要配置的url是',url);
try {
//1. 從文件中讀取 ticket
var signinfo = jsonfile.readFileSync(signjson);
var ticket = signinfo.jsapi_ticket;
var token = signinfo.access_token;
//2. 生成簽名
//sign 是引入的sign.js中的函數(shù)
var signature = sign(ticket, url);
//3. 補充參數(shù) 并返回
signature.appId = appid;
signature.jsApiList = [
"chooseImage",
"uploadImage",
"getNetworkType",
"onMenuShareTimeline",
"onMenuShareAppMessage",
"hideMenuItems",
"checkJsApi"
];
signature.token = token;
return signature;
} catch (err) {
console.log("動態(tài)生成簽名出錯",err.message);
return null;
}
}
我的url也不是動態(tài)生成的颠悬，我是收到客戶端請求時，生成一個網(wǎng)頁定血，在網(wǎng)頁中向服務(wù)器發(fā)起請求赔癌，拿到配置信息，然后去注冊澜沟≡制保看起來很麻煩，但是工作正常茫虽。
router.get('/wechatconfig',function (req,res) {
// 獲取微信注冊配置信息
var requesturl = req.url;
var configurl = requesturl.split("xxconfigurl=")[1].split('#')[0];
var config = get_config(configurl);
res.send(config);
});
我本來想的是刊苍，收到請求時，直接生成配置信息濒析，然后傳遞給網(wǎng)頁正什，到時候網(wǎng)頁不用向服務(wù)端請求，直接就拿到數(shù)據(jù)了号杏。我用的是ejs模板婴氮，的確可以把數(shù)據(jù)傳遞過去，但是拿到的數(shù)據(jù)會有轉(zhuǎn)碼馒索，我已經(jīng)<%- %>但似乎還是不行莹妒。所以最后還是用的之前的方法。
因為剛接觸這些绰上，應(yīng)該是用后臺數(shù)據(jù)渲染網(wǎng)頁時旨怠，掌握的不好。不知道用vue可不可以完成服務(wù)器把數(shù)據(jù)帶到網(wǎng)頁中蜈块。
-
接口列表
像朋友圈是 onMenuShareTimeline 而不是 menuItem:share:appMessage鉴腻，千萬不要寫錯了，
寫錯了就不能響應(yīng)事件百揭。 微信的事件最好放在ready里面
wx.ready(function(){
// config信息驗證后會執(zhí)行ready方法爽哎，所有接口調(diào)用都必須在config接口獲得結(jié)果之后，config是一個客戶端的異步操作器一，所以如果需要在頁面加載時就調(diào)用相關(guān)接口课锌，則須把相關(guān)接口放在ready函數(shù)中調(diào)用來確保正確執(zhí)行。對于用戶觸發(fā)時才調(diào)用的接口，則可以直接調(diào)用渺贤，不需要放在ready函數(shù)中雏胃。
//分享到朋友圈的事件
wx.onMenuShareTimeline({
title: '', // 分享標題
link: '', // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應(yīng)的公眾號JS安全域名一致
imgUrl: '', // 分享圖標
success: function () {
// 用戶確認分享后執(zhí)行的回調(diào)函數(shù)
},
cancel: function () {
// 用戶取消分享后執(zhí)行的回調(diào)函數(shù)
}
});
});
