微信小程序的開(kāi)發(fā)入門(mén)

1. 申請(qǐng)微信小程序

申請(qǐng)小程序，無(wú)非是去微信公眾平臺(tái)選擇申請(qǐng)小程序，然后填寫(xiě)一些相關(guān)信息即可。

2. 部署開(kāi)發(fā)環(huán)境

點(diǎn)這里下載對(duì)應(yīng)的開(kāi)發(fā)工具。

3. 新建項(xiàng)目

新建項(xiàng)目時(shí)需要用到appid，可以去 微信公眾平臺(tái)=>設(shè)置=>開(kāi)發(fā)設(shè)置 里查看 

4. 小程序文件及文件目錄解釋

小程序項(xiàng)目新建時(shí)開(kāi)發(fā)工具會(huì)給你自動(dòng)創(chuàng)建幾個(gè)頁(yè)面，這里就直接刪去，不講這幾個(gè)頁(yè)面，直接通過(guò)我寫(xiě)的BDEDU簽到工具來(lái)講解微信小程序。 
BDEDU簽到工具源碼目錄結(jié)構(gòu)如下： 

文件解釋?zhuān)?/p>

• app.js：全局邏輯文件，寫(xiě)一些生命周期函數(shù)、全局函數(shù)和全局屬性，順便貼一下生命周期函數(shù)

• app.json：全局配置文件，比如配置頁(yè)面文件的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間、設(shè)置多 tab 等。

• app.wxss：全局樣式文件，這里寫(xiě)的樣式能夠被單個(gè)頁(yè)面wxss里的樣式覆蓋，可以做出一些統(tǒng)一的效果。

• js文件：編寫(xiě)頁(yè)面邏輯

• wxml文件：頁(yè)面視圖

• wxss文件：頁(yè)面樣式

• json文件：頁(yè)面配置

目錄結(jié)構(gòu)：

• image文件夾下存圖片素材

• pages文件夾下存各個(gè)頁(yè)面

• pages/**文件夾下存的是某個(gè)頁(yè)面的視圖、邏輯、樣式和配置文件

• util文件夾可以用來(lái)寫(xiě)一些工具函數(shù)

具體詳細(xì)可以查看API

5. 小程序request請(qǐng)求

小程序提供了完善的request請(qǐng)求API，可以直接向你的服務(wù)器請(qǐng)求數(shù)據(jù)，但是只能向一個(gè)服務(wù)器請(qǐng)求數(shù)據(jù)，而且該服務(wù)器必須有自己的域名，請(qǐng)求協(xié)議必須是https，請(qǐng)求的域名可以在你的開(kāi)發(fā)設(shè)置里修改。

request請(qǐng)求詳細(xì)請(qǐng)看API，點(diǎn)這里

6. 小程序數(shù)據(jù)儲(chǔ)存

小程序提供數(shù)據(jù)儲(chǔ)存，可以存一些本地?cái)?shù)據(jù)。詳細(xì)查看請(qǐng)點(diǎn)這里

通過(guò)上面的了解后，我們已經(jīng)能夠使用微信小程序干一些事了：

• 發(fā)送請(qǐng)求到服務(wù)器
• 接收服務(wù)器的響應(yīng)數(shù)據(jù)
• 將接收到的數(shù)據(jù)在用戶(hù)界面中顯示
• 存儲(chǔ)接收到的數(shù)據(jù)

如果你還有一些特殊的開(kāi)發(fā)需求只需要看API文檔即可。

---

服務(wù)端接口開(kāi)發(fā)

---

1. 接口需求

寫(xiě)接口前我們需要對(duì)每個(gè)用戶(hù)生成一個(gè)唯一標(biāo)識(shí)，用于接口的權(quán)限驗(yàn)證，幸運(yùn)的是微信小程序給我們提供了openid（唯一標(biāo)識(shí)），雖然API上說(shuō)不提倡我們直接使用openid作為用戶(hù)標(biāo)識(shí)，但是為了簡(jiǎn)化項(xiàng)目就暫時(shí)先作為簽到API的唯一標(biāo)識(shí)。

• 綁定簽到賬號(hào)：用戶(hù)名、密碼、code

• 修改綁定：openid、用戶(hù)名、密碼

• 獲取用戶(hù)信息：openid

• 獲取所有課程信息：openid

• 獲取目前需要簽到的課程：openid

• 簽到：openid、課程ID、課程名、座位

• 獲取簽到記錄：openid、課程ID、課程名

2. 接口實(shí)現(xiàn)

客戶(hù)端（微信小程序）和服務(wù)器接口之間的數(shù)據(jù)傳遞全部使用json數(shù)據(jù)。

• 綁定簽到賬號(hào)：接收用戶(hù)名密碼，調(diào)用BDEDU登錄接口，判斷密碼是否正確。 
  密碼正確：使用code調(diào)用微信API換取openid，將用戶(hù)名、密碼、openid存入數(shù)據(jù)庫(kù)。返回成功信息給小程序 
  密碼錯(cuò)誤：將錯(cuò)誤信息返回給小程序

• 修改綁定：同上

• 獲取用戶(hù)信息：通過(guò)openid查找用戶(hù)，將用戶(hù)信息返回給小程序，若不存在則返回錯(cuò)誤信息。

• 獲取所有課程信息：通過(guò)openid獲取用戶(hù)賬號(hào)和密碼，然后請(qǐng)求BDEDU系統(tǒng)獲接口取所有課程信息，返回給小程序。

• 獲取目前需要簽到的課程：通過(guò)openid獲取用戶(hù)賬號(hào)和密碼，然后請(qǐng)求BDEDU系統(tǒng)接口獲取所有課程信息，再使用正則表達(dá)式匹配每門(mén)課程的上課時(shí)間，將當(dāng)前時(shí)間和上課時(shí)間進(jìn)行對(duì)比，如果當(dāng)前時(shí)間在上課時(shí)間內(nèi)或在上課前20分鐘內(nèi)，就將該課程作為當(dāng)前需要簽到的課程，返回給小程序。如果沒(méi)有一門(mén)課滿(mǎn)足要求就返回提示信息：無(wú)可簽到課程。

• 簽到：通過(guò)openid獲取用戶(hù)賬號(hào)和密碼，將簽到數(shù)據(jù)（課程ID、課程名、用戶(hù)名、座位）發(fā)送給BDEDU簽到系統(tǒng)進(jìn)行簽到，返回簽到結(jié)果給小程序。

• 獲取簽到記錄：通過(guò)openid獲取用戶(hù)賬號(hào)和密碼，將課程ID、課程名、用戶(hù)名發(fā)送給BDEDU簽到系統(tǒng)，獲取簽到記錄（html源碼），通過(guò)正則表達(dá)式匹配出真正需要的信息（簽到時(shí)間、簽到位置、備注），存在一個(gè)對(duì)象list里，返回給小程序。

---

客戶(hù)端（微信小程序）的開(kāi)發(fā)

---

本項(xiàng)目一共四個(gè)頁(yè)面：

• 我的信息頁(yè)面

• 綁定賬號(hào)頁(yè)面

• 簽到記錄頁(yè)面

• 簽到頁(yè)面

這里就主要展示一下簽到功能的流程圖，其他流程類(lèi)似 
程序的流程圖如下：