基于nodejs的微信JS-SDK簡單應用實現

2024-05-06 16:51:08

字體：大中小

來源：轉載

供稿：網友

2015 是 Hybrid App 崛起之年，Web App 和 Native App 各有其強大之處，也有著致命的缺點，人們一邊追求native流暢的用戶體驗，一邊同時期望產品能夠快速的迭代更新，Hybrid 成為必然的趨勢。

鵝廠一馬當先，發布了業內震驚一時的 JS-SDK ，這對于基于微信的h5開發者來說簡直是如降甘露，從此開發者們告別了用箭頭來提示右上角可以分享，并且隨時可以使用微信的原生能力，微信變成了一個超級瀏覽器。

一、準備工作

1.在微信公眾平臺申請測試賬號，并設置好好 JS 接口安全域名（注：域名必須可以外網訪問）

2.查看微信開發者文檔

二、開始編碼

使用微信 sdk 必須自己實現微信的簽名算法。

大概需要4個步驟：

1.獲取access_token；

2.根據access_token 獲取jsapi_ticket

3. 根據 appId(公眾號唯一id)、noncestr(隨機字符串)、timestamp(時間戳)、url(當前頁面完整url,不包括#aaa=bbb) 通過sha1算法簽名

4.將信息返回給前端，設置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 //緩存時長為24小時}

最主要部分是簽名：

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)            });          }        })      }    })  }}

由于只是簡單的demo ，也就沒有采用promise,而是采用的普通的回調。

客戶端部分

document.getElementById('refresh').onclick = function(){location.reload();}/** * 以下內容多摘自官方demo ***/wx.config({  debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。  appId: appId, // 必填，公眾號的唯一標識  timestamp: timestamp, // 必填，生成簽名的時間戳  nonceStr: nonceStr, // 必填，生成簽名的隨機串  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 判斷當前版本是否支持指定 JS 接口，支持批量判斷 document.querySelector('#checkJsApi').onclick = function () {  wx.checkJsApi({   jsApiList: [    'getNetworkType',    'previewImage'   ],   success: function (res) {    alert(JSON.stringify(res));   }  }); };  // 2. 分享接口 // 2.1 監聽“分享給朋友”，按鈕點擊、自定義分享內容及分享結果接口 document.querySelector('#onMenuShareAppMessage').onclick = function () {  wx.onMenuShareAppMessage({   title: '互聯網之子',   desc: '在長大的過程中，我才慢慢發現，我身邊的所有事，別人跟我說的所有事，那些所謂本來如此，注定如此的事，它們其實沒有非得如此，事情是可以改變的。更重要的是，有些事既然錯了，那就該做出改變。',   link: 'http://movie.douban.com/subject/25785114/',   imgUrl: 'http://demo.open.weixin.qq.com/jssdk/images/p2166127561.jpg',   trigger: function (res) {    // 不要嘗試在trigger中使用ajax異步請求修改本次分享的內容，因為客戶端分享操作是一個同步操作，這時候使用ajax的回包會還沒有返回    alert('用戶點擊發送給朋友');   },   success: function (res) {    alert('已分享');   },   cancel: function (res) {    alert('已取消');   },   fail: function (res) {    alert(JSON.stringify(res));   }  });  alert('已注冊獲取“發送給朋友”狀態事件'); };  // 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 圖片預覽 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 獲取當前地理位置 document.querySelector('#getLocation').onclick = function () {  wx.getLocation({   success: function (res) {    alert(JSON.stringify(res));   },   cancel: function (res) {    alert('用戶拒絕授權獲取地理位置');   }  }); };  // 9 微信原生接口 // 9.1.1 掃描二維碼并返回結果 document.querySelector('#scanQRCode0').onclick = function () {  wx.scanQRCode(); };});wx.error(function(res){  JSON.stringify(res)});

至此，基本功能已經完成。附上效果圖

nodejs,微信,JS-SDK