Nodejs下微信网页开发教程(一)

前言

花了将近半个多月的时间，终于把微信网页开发的小项目提测了，在项目的不断进行中总结了一套微信网页开发的流程，足够满足开发环境的使用，现在分享出来给大家。微信网页开发的demo已经上传到github上，大家可以clone下来： weChat-learning

1、环境准备

因为微信的开发都是需要有一个域名的，所以解决开发问题的第一步便是需要有一个域名，我们大可不必为了一个域名去买，而是可以借助第三方软件，比如花生壳之类的软件提供的内网映射方法解决这个问题。

1.1、域名解决方案

这里介绍两种解决办法，用花生壳的话优点是域名是固定的，缺点是收费(不过费用也不高，就6元)。使用ngrok的话优点是免费，不过域名是随机生成的，而且是从国外访问过来，速度略微慢了点。

1.1.1、花生壳

1. 下载花生壳客户端
2. 注册或者登录
3. 购买一个公网的域名，大致费用在6~8元
4. 登录客户端，配置你的公网域名映射到内网的哪个服务器：

注意： 因为我的服务器是运行在虚拟机内部，所以配置的地址是我的linux地址，端口填写服务器监听的端口号。 5. 测试一下域名配置是否成功

1.1.2、Ngrok

1. 下载客户端
2. 无需注册，无需安装，直接在CMD窗口下(windows环境)运行如下命令：ngrok.exe http 192.168.56.101:9090
3. 运行成功后的界面如下：

1.2、微信端准备工作

1. 下载微信web开发者工具

2. 申请一个微信测试公众号

3. 分别使用微信登录开发者工具和测试号：

4. 登录成功测试公众号后，你可以获得一个测试号的信息：

5. 修改JS接口安全域名为你的公网域名，注意：一定要填写你的公网域名的一级域名，否则在后面调用微信SDK的API的时候会提示“无效的url domain”，这里我只需填写：ngrok.io，因为我用的是Ngrok。

6. 配置网页授权的回调域名： 在测试号页面的体验接口权限表中找到下面的一行：

点击修改，输入你得到的域名，不要添加http，直接输入你的域名即可

7. 关注你的测试公众号，拿起手机扫一下测试号二维码即可：

到这里准备工作基本完成，还有一个小任务需要在我们的服务器启动之后才能够完成，我们开始下面的任务。

2、启动nodejs服务器

1. 下载代码weChat-learning

2. npm i

3. npm run dev

4. 浏览器访问：8c40d2df.ngrok.io，此时如果出现这个页面以及上面的URL表示你的内外网打通了：

5. 此时回到微信测试公众号，配置接口配置信息，如图：

这里的配置在nodejs服务器都有对应的一个地方：

首先你得处理微信服务器的getsignature请求，所以在demo中的会去实现这一条路由：

router.get('/getsignature', userController.getSignature)

然后我们需要在配置文件中配置下面的信息：config/development.js

appId: 'wx7f70a1cadda24881',
appSecret: '5da26c0c6d1b9cf5cef5baf76ee784a8',
domain: 'http://8c40d2df.ngrok.io',
appToken: '11111111',

appToken就是对应于上图中的Token。

二者互相正确对应的话，当我们提交接口配置信息的时候是会提示配置成功的。如果配置失败，请确认一下微信的请求是否有被你的服务器处理，正常应该有如下的一条请求打印出来：

3、开始测试微信网页授权

现在可以开始测试你的网页了，打开微信web开发者工具，输入你的域名，如果一切顺利的话会先跳到这个页面：

如果是第二次登录应该会有如下页面：

注意：

在微信开发文档中，明确指出有两种授权方式：静默授权和非静默授权

关于特殊场景下的静默授权
1、上面已经提到，对于以snsapi_base为scope的网页授权，就静默授权的，用户无感知； 
2、对于已关注公众号的用户，如果用户从公众号的会话或者自定义菜单进入本公众号的网页授权页，即使是scope为snsapi_userinfo，也是静默授权，用户无感知。 
具体而言，网页授权流程分为四步：
1、引导用户进入授权页面同意授权，获取code 
2、通过code换取网页授权access_token（与基础支持中的access_token不同） 
3、如果需要，开发者可以刷新网页授权access_token，避免过期 
4、通过网页授权access_token和openid获取用户基本信息（支持UnionID机制） 

也就是说如果你关注公众号了，直接访问是不会有上面的那个确认的页面的

Tips：关于unionId

通过获取用户基本信息接口，开发者可通过OpenID来获取用户基本信息，而如果开发者拥有多个公众号，可使用以下办法通过UnionID机制来在多公众号之间进行用户帐号互通。

1. 将多个公众号绑定到同一个微信开放平台（open.weixin.qq.com）帐号下，即同一个Union下

2. 通过获取用户基本信息接口中的UnionID来区分用户的唯一性，不过需要注意的是：公众号只有在被绑定到微信开放平台帐号下后，才会获取UnionID。只要是同一个微信开放平台帐号下的公众号，用户的UnionID是唯一的。换句话说， 同一用户，对同一个微信开放平台帐号下的不同应用，UnionID是相同的。

Tips： 关于OpenId

OpenId的生成是依托于你访问的公众号以及的个人信息去生成一个的唯一的Hash值，所以切换不同的公众号得到的openId是不一样的。

整个微信网页授权类似于CAS授权，其大致流程如下：

4、如何使用微信的SDK

授权成功之后，就可以进入你的服务器首页，demo的首页如下：

4.1、Json服务器

在todoController.js中有如下代码：

Promise.all([
      request.getCityList(),
      getSignature(`${config.domain}/index`)
    ])

也就是我们的城市列表是从别的服务器获取的，所以这里我们还需要安装一下json-server。

使用demo中的todoList.json来启动json服务器：

json-server todoList.json