Express + TypeScript開發微信應用
在進行微信開發之前,首先需要註冊一個微信公眾號或者是訂閱號,這個是最基本的操作,沒有這一步,後面的的步伐很難走。
註冊完微信之後,獲取appId和appSecret,有了這兩個就可以了
第一步、建立專案
$ mkdir ts_node_wx $ cd ts_node_wx && npm init
第二步、安裝依賴庫
安裝需要的packages(express, ejs, request以及sha1)
npm install --save express ejs request sha1
安裝TypeScript以及之前安裝的packages的型別定義。
npm install --save-dev typescript @types/node @types/express @types/request @types/sha1
由於暫時DefinitelyTyped中並沒有JSSDK相關的型別定義檔案(.d.ts),請將types資料夾(包含型別定義檔案wechat.d.ts)複製到根目錄(ts_node_wx)中以便TypeScript獲取JSSDK的型別定義。
第三步、配置TypeScript
在ts_node_wx根目錄下新增TypeScript配置檔案tsconfig.json
{ "compilerOptions": { "target": "es6", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */ "module": "commonjs", /* Specify module code generation: 'commonjs', 'amd', 'system', 'umd' or 'es2015'. */ "moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ } }
可以根據專案的需求自行新增其他編譯選項,比如strict。
第四步、核心邏輯講解
1、獲取token
private getWXToken(): Promise<WXToken> { return new Promise((resolve, reject) => { request.get(`https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${config.appId}&secret=${config.appSecret}`, (err, res, body) => { if (err) { return reject(err); } const token = JSON.parse(body).access_token || ''; return resolve(new WXToken(token)); }); }); }
2、獲取ticket
private getWXTicket(token: string): Promise<WXTicket> { return new Promise((resolve, reject) => { request.get(`https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=${token}&type=jsapi`, (err, res, body) => { if (err) { return reject(err); } const ticket = JSON.parse(body).ticket || ''; return resolve(new WXTicket(ticket)); }) }); }
3、簽名並將資料傳遞到前端
const url = req.protocol + '://' + req.get('host') + req.originalUrl; const tokenRes = await this.getWXToken(); const token = tokenRes.token || ''; const ticketRes = await this.getWXTicket(token); const ticket = ticketRes.ticket || ''; const timestamp = `${parseInt(new Date().getTime() / 1000 + '', 10)}`; const params = 'jsapi_ticket=' + ticket + '&noncestr=' + config.nonceStr + '×tamp=' + timestamp + '&url=' + url; const signature = sha1(params).toString(); let options: Object = { title: 'Home | TS Blog', message: 'Welcome to the TS Blog', appId: config.appId, timestamp, nonceStr: config.nonceStr, signature, }; this.render(req, res, "index", options);
4、前端程式碼呼叫
<html> <head> <title><%= title %></title> </head> <body> <h1><%= message %></h1> </body> <script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> <script type="text/javascript"> wx.config({ debug: false, appId: '<%= appId %>', timestamp: '<%= timestamp %>', nonceStr: '<%= nonceStr %>', signature: '<%= signature %>', jsApiList: [ 'checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone', 'hideMenuItems', 'showMenuItems', 'hideAllNonBaseMenuItem', 'showAllNonBaseMenuItem', 'translateVoice', 'startRecord', 'stopRecord', 'onVoiceRecordEnd', 'playVoice', 'onVoicePlayEnd', 'pauseVoice', 'stopVoice', 'uploadVoice', 'downloadVoice', 'chooseImage', 'previewImage', 'uploadImage', 'downloadImage', 'getNetworkType', 'openLocation', 'getLocation', 'hideOptionMenu', 'showOptionMenu', 'closeWindow', 'scanQRCode', 'chooseWXPay', 'openProductSpecificView', 'addCard', 'chooseCard', 'openCard' ] }); </script> <script type="text/javascript" src="/js/main.js"></script> </html>
/js/main.js中的內容如下
wx.ready(() => { // open specifc location on map wx.openLocation({ latitude: 0, longitude: 0, name: '千燈裕花園二期', address: '江蘇省蘇州市崑山市千燈鎮千燈裕花園二期', scale: 1, infoUrl: '' }); })
第四步、編譯並執行專案
$ npm run grunt $ npm run start 或者 npx pm2 start ecosystem.config.js
走到第四步的時候,有些人看了這篇博文可能會暈,覺得為什麼到這一步就完事了。這裡我說明下,這裡我主要是說如何用TypeScript寫一個微信端的應用,怎麼去呼叫微信相關SDK的邏輯,如果需要一個完整的應用的話可能需要花費更多的時間,有需要的同學可以下面留言,我根據需要的人數來做在此分享吧。
當然這個應用也是可以使用的,後面更重要的一步是在專案執行起來後,我們通過nginx做代理轉發,將應用繫結到一個域名上面,這個通過域名訪問就能夠訪問到我們的專案,然後專案就能正常的執行起來了。我這邊貼一下我這邊的整體的程式碼,地址如下
https://github.com/durban89/ts_node_wx
可以把程式碼下載後,修改下config檔案裡面的appId和appSecret之後再部署編譯執行。
執行後效果如下