這篇文章給大家介紹使用nodejs怎么實(shí)現(xiàn)微信JS-SDK,內(nèi)容非常詳細(xì),感興趣的小伙伴們可以參考借鑒,希望對(duì)大家能有所幫助。
成都創(chuàng)新互聯(lián)成立于2013年,是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司,擁有項(xiàng)目網(wǎng)站建設(shè)、成都網(wǎng)站建設(shè)網(wǎng)站策劃,項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命,1280元寶塔做網(wǎng)站,已為上家服務(wù),為寶塔各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:028-86922220
一、準(zhǔn)備工作
1.在微信公眾平臺(tái)申請(qǐng)測(cè)試賬號(hào),并設(shè)置好好 JS 接口安全域名 (注:域名必須可以外網(wǎng)訪問)
2.查看微信開發(fā)者文檔
二、開始編碼
使用微信 sdk 必須自己實(shí)現(xiàn)微信的簽名算法。
大概需要4個(gè)步驟:
1.獲取access_token;
2.根據(jù)access_token 獲取jsapi_ticket
3. 根據(jù) appId(公眾號(hào)唯一id)、noncestr(隨機(jī)字符串)、timestamp(時(shí)間戳)、url(當(dāng)前頁面完整url,不包括#aaa=bbb) 通過sha1算法簽名
4.將信息返回給前端 , 設(shè)置wx.config。
由于獲取access_token 和jsapi_ticket 的接口都有訪問限制,所以明確指出需要第三方做緩存處理。此處我們緩存jsapi_ticket 就可以了。
/config/wechat.cfg.js
module.exports = { grant_type: 'client_credential', appid: 'xxxxxxxxxxxxxxx', secret: 'xxxxxxxxxxxxxxxxxxxxxxxxxx', noncestr:'Wm3WZYTPz0wzccnW', accessTokenUrl:'https://api.weixin.qq.com/cgi-bin/token', ticketUrl:'https://api.weixin.qq.com/cgi-bin/ticket/getticket', cache_duration:1000*60*60*24 //緩存時(shí)長為24小時(shí) }
最主要部分是簽名:
signature.js
var request = require('request'), cache = require('memory-cache'), sha1 = require('sha1'), config = require('../config/wechat.cfg'); exports.sign = function (url,callback) { var noncestr = config.noncestr, timestamp = Math.floor(Date.now()/1000), //精確到秒 jsapi_ticket; if(cache.get('ticket')){ jsapi_ticket = cache.get('ticket'); console.log('1' + 'jsapi_ticket=' + jsapi_ticket + '&noncestr=' + noncestr + '×tamp=' + timestamp + '&url=' + url); callback({ noncestr:noncestr, timestamp:timestamp, url:url, jsapi_ticket:jsapi_ticket, signature:sha1('jsapi_ticket=' + jsapi_ticket + '&noncestr=' + noncestr + '×tamp=' + timestamp + '&url=' + url) }); }else{ request(config.accessTokenUrl + '?grant_type=' + config.grant_type + '&appid=' + config.appid + '&secret=' + config.secret ,function(error, response, body){ if (!error && response.statusCode == 200) { var tokenMap = JSON.parse(body); request(config.ticketUrl + '?access_token=' + tokenMap.access_token + '&type=jsapi', function(error, resp, json){ if (!error && response.statusCode == 200) { var ticketMap = JSON.parse(json); cache.put('ticket',ticketMap.ticket,config.cache_duration); //加入緩存 console.log('jsapi_ticket=' + ticketMap.ticket + '&noncestr=' + noncestr + '×tamp=' + timestamp + '&url=' + url); callback({ noncestr:noncestr, timestamp:timestamp, url:url, jsapi_ticket:ticketMap.ticket, signature:sha1('jsapi_ticket=' + ticketMap.ticket + '&noncestr=' + noncestr + '×tamp=' + timestamp + '&url=' + url) }); } }) } }) } }
由于只是簡(jiǎn)單的demo , 也就沒有采用promise,而是采用的普通的回調(diào)。
客戶端部分
document.getElementById('refresh').onclick = function(){location.reload();} /** * 以下內(nèi)容多摘自官方demo * **/ wx.config({ debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來,若要查看傳入的參數(shù),可以在pc端打開,參數(shù)信息會(huì)通過log打出,僅在pc端時(shí)才會(huì)打印。 appId: appId, // 必填,公眾號(hào)的唯一標(biāo)識(shí) timestamp: timestamp, // 必填,生成簽名的時(shí)間戳 nonceStr: nonceStr, // 必填,生成簽名的隨機(jī)串 signature: signature,// 必填,簽名,見附錄1 jsApiList: ['checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'hideMenuItems', 'showMenuItems', 'hideAllNonBaseMenuItem', 'showAllNonBaseMenuItem', 'translateVoice', 'startRecord', 'stopRecord', 'onRecordEnd', 'playVoice', 'pauseVoice', 'stopVoice', 'uploadVoice', 'downloadVoice', 'chooseImage', 'previewImage', 'uploadImage', 'downloadImage', 'getNetworkType', 'openLocation', 'getLocation', 'hideOptionMenu', 'showOptionMenu', 'closeWindow', 'scanQRCode', 'chooseWXPay', 'openProductSpecificView', 'addCard', 'chooseCard', 'openCard'] // 必填,需要使用的JS接口列表, }); wx.ready(function(){ // 1 判斷當(dāng)前版本是否支持指定 JS 接口,支持批量判斷 document.querySelector('#checkJsApi').onclick = function () { wx.checkJsApi({ jsApiList: [ 'getNetworkType', 'previewImage' ], success: function (res) { alert(JSON.stringify(res)); } }); }; // 2. 分享接口 // 2.1 監(jiān)聽“分享給朋友”,按鈕點(diǎn)擊、自定義分享內(nèi)容及分享結(jié)果接口 document.querySelector('#onMenuShareAppMessage').onclick = function () { wx.onMenuShareAppMessage({ title: '互聯(lián)網(wǎng)之子', desc: '在長大的過程中,我才慢慢發(fā)現(xiàn),我身邊的所有事,別人跟我說的所有事,那些所謂本來如此,注定如此的事,它們其實(shí)沒有非得如此,事情是可以改變的。更重要的是,有些事既然錯(cuò)了,那就該做出改變。', link: 'http://movie.douban.com/subject/25785114/', imgUrl: 'http://demo.open.weixin.qq.com/jssdk/images/p2166127561.jpg', trigger: function (res) { // 不要嘗試在trigger中使用ajax異步請(qǐng)求修改本次分享的內(nèi)容,因?yàn)榭蛻舳朔窒聿僮魇且粋€(gè)同步操作,這時(shí)候使用ajax的回包會(huì)還沒有返回 alert('用戶點(diǎn)擊發(fā)送給朋友'); }, success: function (res) { alert('已分享'); }, cancel: function (res) { alert('已取消'); }, fail: function (res) { alert(JSON.stringify(res)); } }); alert('已注冊(cè)獲取“發(fā)送給朋友”狀態(tài)事件'); }; // 5 圖片接口 // 5.1 拍照、本地選圖 var images = { localId: [], serverId: [] }; document.querySelector('#chooseImage').onclick = function () { wx.chooseImage({ success: function (res) { images.localId = res.localIds; alert('已選擇 ' + res.localIds.length + ' 張圖片'); } }); }; // 5.2 圖片預(yù)覽 document.querySelector('#previewImage').onclick = function () { wx.previewImage({ current: 'http://img5.douban.com/view/photo/photo/public/p1353993776.jpg', urls: [ 'http://img3.douban.com/view/photo/photo/public/p2152117150.jpg', 'http://img5.douban.com/view/photo/photo/public/p1353993776.jpg', 'http://img3.douban.com/view/photo/photo/public/p2152134700.jpg' ] }); }; // 7.2 獲取當(dāng)前地理位置 document.querySelector('#getLocation').onclick = function () { wx.getLocation({ success: function (res) { alert(JSON.stringify(res)); }, cancel: function (res) { alert('用戶拒絕授權(quán)獲取地理位置'); } }); }; // 9 微信原生接口 // 9.1.1 掃描二維碼并返回結(jié)果 document.querySelector('#scanQRCode0').onclick = function () { wx.scanQRCode(); }; }); wx.error(function(res){ JSON.stringify(res) });
關(guān)于使用nodejs怎么實(shí)現(xiàn)微信JS-SDK就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到。