Express + TypeScript開發微信應用

TypeScript Express · 發表 2018-10-08 22:15:30

摘要：在進行微信開發之前，首先需要註冊一個微信公眾號或者是訂閱號，這個是最基本的操作，沒有這一步，後面的的步伐很難走。註冊完微信之後，獲取appId和appSecret，有了這兩個就可以了第一步、建立專案 $ mkdir ts_node_wx $ cd ts_node_wx &...

在進行微信開發之前，首先需要註冊一個微信公眾號或者是訂閱號，這個是最基本的操作，沒有這一步，後面的的步伐很難走。

註冊完微信之後，獲取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 + '&timestamp=' + 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之後再部署編譯執行。

執行後效果如下