Express + TypeScript开发微信应用
在进行微信开发之前,首先需要注册一个微信公众号或者是订阅号,这个是最基本的操作,没有这一步,后面的的步伐很难走。
注册完微信之后,获取appId和appSecret,有了这两个就可以了
第一步、创建项目
1 | $ mkdir ts_node_wx |
第二步、安装依赖库
安装需要的packages(express, ejs, request以及sha1)
1 | npm install --save express ejs request sha1 |
安装TypeScript以及之前安装的packages的类型定义。
1 | 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
1 | { |
可以根据项目的需求自行添加其他编译选项,比如strict。
第四步、核心逻辑讲解
1、获取token
1 | private getWXToken(): Promise<WXToken> { |
2、获取ticket
1 | private getWXTicket(token: string): Promise<WXTicket> { |
3、签名并将数据传递到前端
1 | const url = req.protocol + '://' + req.get('host') + req.originalUrl; |
4、前端代码调用
1 | <html> |
/js/main.js中的内容如下
1 | wx.ready(() => { |
第四步、编译并运行项目
1 | $ npm run grunt |
走到第四步的时候,有些人看了这篇博文可能会晕,觉得为什么到这一步就完事了。这里我说明下,这里我主要是说如何用TypeScript写一个微信端的应用,怎么去调用微信相关SDK的逻辑,如果需要一个完整的应用的话可能需要花费更多的时间,有需要的同学可以下面留言,我根据需要的人数来做在此分享吧。
当然这个应用也是可以使用的,后面更重要的一步是在项目运行起来后,我们通过nginx做代理转发,将应用绑定到一个域名上面,这个通过域名访问就能够访问到我们的项目,然后项目就能正常的运行起来了。我这边贴一下我这边的整体的代码,地址如下
https://github.com/durban89/ts\_node\_wx
可以把代码下载后,修改下config文件里面的appId和appSecret之后再部署编译运行。
运行后效果如下