Nodejs下微信網(wǎng)頁(yè)開(kāi)發(fā)教程(一)

時(shí)間：2022-08-06 19:15:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2022-08-06 19:15:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

前言

花了將近半個(gè)多月的時(shí)間，終于把微信網(wǎng)頁(yè)開(kāi)發(fā)的小項(xiàng)目提測(cè)了，在項(xiàng)目的不斷進(jìn)行中總結(jié)了一套微信網(wǎng)頁(yè)開(kāi)發(fā)的流程，足夠滿足開(kāi)發(fā)環(huán)境的使用，現(xiàn)在分享出來(lái)給大家。微信網(wǎng)頁(yè)開(kāi)發(fā)的demo已經(jīng)上傳到github上，大家可以clone下來(lái)： weChat-learning

1、環(huán)境準(zhǔn)備

因?yàn)槲⑿诺拈_(kāi)發(fā)都是需要有一個(gè)域名的，所以解決開(kāi)發(fā)問(wèn)題的第一步便是需要有一個(gè)域名，我們大可不必為了一個(gè)域名去買，而是可以借助第三方軟件，比如花生殼之類的軟件提供的內(nèi)網(wǎng)映射方法解決這個(gè)問(wèn)題。

1.1、域名解決方案

這里介紹兩種解決辦法，用花生殼的話優(yōu)點(diǎn)是域名是固定的，缺點(diǎn)是收費(fèi)(不過(guò)費(fèi)用也不高，就6元)。使用ngrok的話優(yōu)點(diǎn)是免費(fèi)，不過(guò)域名是隨機(jī)生成的，而且是從國(guó)外訪問(wèn)過(guò)來(lái)，速度略微慢了點(diǎn)。

1.1.1、花生殼

1. 下載花生殼客戶端
2. 注冊(cè)或者登錄
3. 購(gòu)買一個(gè)公網(wǎng)的域名，大致費(fèi)用在6~8元
4. 登錄客戶端，配置你的公網(wǎng)域名映射到內(nèi)網(wǎng)的哪個(gè)服務(wù)器：

注意： 因?yàn)槲业姆?wù)器是運(yùn)行在虛擬機(jī)內(nèi)部，所以配置的地址是我的linux地址，端口填寫服務(wù)器監(jiān)聽(tīng)的端口號(hào)。

1. 測(cè)試一下域名配置是否成功

1.1.2、Ngrok

1. 下載客戶端
2. 無(wú)需注冊(cè)，無(wú)需安裝，直接在CMD窗口下(windows環(huán)境)運(yùn)行如下命令：ngrok.exe http 192.168.56.101:9090
3. 運(yùn)行成功后的界面如下：

1.2、微信端準(zhǔn)備工作

1. 下載微信web開(kāi)發(fā)者工具
2. 申請(qǐng)一個(gè)微信測(cè)試公眾號(hào)
3. 分別使用微信登錄開(kāi)發(fā)者工具和測(cè)試號(hào)：

1. 登錄成功測(cè)試公眾號(hào)后，你可以獲得一個(gè)測(cè)試號(hào)的信息：

1. 修改JS接口安全域名為你的公網(wǎng)域名，注意：一定要填寫你的公網(wǎng)域名的一級(jí)域名，否則在后面調(diào)用微信SDK的API的時(shí)候會(huì)提示“無(wú)效的url domain”，這里我只需填寫：ngrok.io，因?yàn)槲矣玫氖荖grok。
2. 配置網(wǎng)頁(yè)授權(quán)的回調(diào)域名： 在測(cè)試號(hào)頁(yè)面的體驗(yàn)接口權(quán)限表中找到下面的一行：

點(diǎn)擊修改，輸入你得到的域名，不要添加http，直接輸入你的域名即可

1. 關(guān)注你的測(cè)試公眾號(hào)，拿起手機(jī)掃一下測(cè)試號(hào)二維碼即可：

到這里準(zhǔn)備工作基本完成，還有一個(gè)小任務(wù)需要在我們的服務(wù)器啟動(dòng)之后才能夠完成，我們開(kāi)始下面的任務(wù)。

2、啟動(dòng)nodejs服務(wù)器

1. 下載代碼weChat-learning
2. npm i
3. npm run dev
4. 瀏覽器訪問(wèn)：8c40d2df.ngrok.io，此時(shí)如果出現(xiàn)這個(gè)頁(yè)面以及上面的URL表示你的內(nèi)外網(wǎng)打通了：

1. 此時(shí)回到微信測(cè)試公眾號(hào)，配置接口配置信息，如圖：

這里的配置在nodejs服務(wù)器都有對(duì)應(yīng)的一個(gè)地方：

首先你得處理微信服務(wù)器的getsignature請(qǐng)求，所以在demo中的會(huì)去實(shí)現(xiàn)這一條路由：

router.get('/getsignature', userController.getSignature)然后我們需要在配置文件中配置下面的信息：config/development.js

appId: 'wx7f70a1cadda24881',appSecret: '5da26c0c6d1b9cf5cef5baf76ee784a8',domain: '//8c40d2df.ngrok.io',appToken: '11111111',appToken就是對(duì)應(yīng)于上圖中的Token。

二者互相正確對(duì)應(yīng)的話，當(dāng)我們提交接口配置信息的時(shí)候是會(huì)提示配置成功的。如果配置失敗，請(qǐng)確認(rèn)一下微信的請(qǐng)求是否有被你的服務(wù)器處理，正常應(yīng)該有如下的一條請(qǐng)求打印出來(lái)：

3、開(kāi)始測(cè)試微信網(wǎng)頁(yè)授權(quán)

現(xiàn)在可以開(kāi)始測(cè)試你的網(wǎng)頁(yè)了，打開(kāi)微信web開(kāi)發(fā)者工具，輸入你的域名，如果一切順利的話會(huì)先跳到這個(gè)頁(yè)面：







如果是第二次登錄應(yīng)該會(huì)有如下頁(yè)面：







注意：

在微信開(kāi)發(fā)文檔中，明確指出有兩種授權(quán)方式：靜默授權(quán)和非靜默授權(quán)

關(guān)于特殊場(chǎng)景下的靜默授權(quán)1、上面已經(jīng)提到，對(duì)于以snsapi_base為scope的網(wǎng)頁(yè)授權(quán)，就靜默授權(quán)的，用戶無(wú)感知； 2、對(duì)于已關(guān)注公眾號(hào)的用戶，如果用戶從公眾號(hào)的會(huì)話或者自定義菜單進(jìn)入本公眾號(hào)的網(wǎng)頁(yè)授權(quán)頁(yè)，即使是scope為snsapi_userinfo，也是靜默授權(quán)，用戶無(wú)感知。 具體而言，網(wǎng)頁(yè)授權(quán)流程分為四步：1、引導(dǎo)用戶進(jìn)入授權(quán)頁(yè)面同意授權(quán)，獲取code 2、通過(guò)code換取網(wǎng)頁(yè)授權(quán)access_token（與基礎(chǔ)支持中的access_token不同） 3、如果需要，開(kāi)發(fā)者可以刷新網(wǎng)頁(yè)授權(quán)access_token，避免過(guò)期 4、通過(guò)網(wǎng)頁(yè)授權(quán)access_token和openid獲取用戶基本信息（支持UnionID機(jī)制）也就是說(shuō)如果你關(guān)注公眾號(hào)了，直接訪問(wèn)是不會(huì)有上面的那個(gè)確認(rèn)的頁(yè)面的

Tips：關(guān)于unionId

通過(guò)獲取用戶基本信息接口，開(kāi)發(fā)者可通過(guò)OpenID來(lái)獲取用戶基本信息，而如果開(kāi)發(fā)者擁有多個(gè)公眾號(hào)，可使用以下辦法通過(guò)UnionID機(jī)制來(lái)在多公眾號(hào)之間進(jìn)行用戶帳號(hào)互通。

1. 將多個(gè)公眾號(hào)綁定到同一個(gè)微信開(kāi)放平臺(tái)（http://open.weixin.qq.com）帳號(hào)下，即同一個(gè)Union下
2. 通過(guò)獲取用戶基本信息接口中的UnionID來(lái)區(qū)分用戶的唯一性，不過(guò)需要注意的是：公眾號(hào)只有在被綁定到微信開(kāi)放平臺(tái)帳號(hào)下后，才會(huì)獲取UnionID。只要是同一個(gè)微信開(kāi)放平臺(tái)帳號(hào)下的公眾號(hào)，用戶的UnionID是唯一的。換句話說(shuō)， 同一用戶，對(duì)同一個(gè)微信開(kāi)放平臺(tái)帳號(hào)下的不同應(yīng)用，UnionID是相同的。

Tips： 關(guān)于OpenId

OpenId的生成是依托于你訪問(wèn)的公眾號(hào)以及的個(gè)人信息去生成一個(gè)的唯一的Hash值，所以切換不同的公眾號(hào)得到的openId是不一樣的。

整個(gè)微信網(wǎng)頁(yè)授權(quán)類似于CAS授權(quán)，其大致流程如下：

4、如何使用微信的SDK

授權(quán)成功之后，就可以進(jìn)入你的服務(wù)器首頁(yè)，demo的首頁(yè)如下：

4.1、Json服務(wù)器

在todoController.js中有如下代碼：

Promise.all([ request.getCityList(), getSignature(`${config.domain}/index`) ])也就是我們的城市列表是從別的服務(wù)器獲取的，所以這里我們還需要安裝一下json-server。

使用demo中的todoList.json來(lái)啟動(dòng)json服務(wù)器：

json-server todoList.json