2.1 創(chuàng)建第一個微信小程序

本節(jié)使用微信web開發(fā)者工具創(chuàng)建第一個微信小程序。

2.1.1 新建項目

雙擊微信web開發(fā)者工具圖標，管理員或開發(fā)者使用微信掃描二維碼后進入菜單界面。然后單擊菜單中的“小程序項目”選項，進入小程序項目管理頁面，如圖2-1所示。

此時，開發(fā)者依次填寫項目目錄、AppID和項目名稱就可以新建一個小程序項目了。填寫的注意事項如下。

?　項目目錄：項目文件存放的路徑地址，可以單擊輸入框右側(cè)的箭頭按鈕在計算機盤符中選擇指定的目錄地址。

?　AppID：管理員在微信公眾平臺上注冊的小程序ID。

?　項目名稱：由開發(fā)者自定義一個項目名稱，該名稱不會影響小程序被用戶看到的名字。

小程序的AppID可以登錄微信公眾平臺（https://mp.weixin.qq.com）查看，具體查看方法是單擊左側(cè)的“設(shè)置”選項，在“開發(fā)設(shè)置”面板中查看“開發(fā)者ID”標題下方的AppID（小程序ID），如圖2-2所示。

將查看到的小程序ID復(fù)制并粘貼到圖2-1（b）所示的AppID輸入框中，填完以后的效果如圖2-3所示。

AppID必須填實際的小程序ID，否則部分功能將無法使用。如果開發(fā)者暫時條件受限無法注冊申請小程序ID，可以選擇AppID輸入框下方的體驗小程序，此時也可以在開發(fā)者工具中進行開發(fā)，但無法真機預(yù)覽。

如果項目目錄選擇的是一個空白文件夾，則開發(fā)者工具會默認勾選“建立普通快速啟動模板”，該選項會自動生成代碼形成一個簡單的小程序效果供初學者入門學習。

填寫完畢后單擊“確定”按鈕完成操作，跳轉(zhuǎn)到開發(fā)頁面，如圖2-4所示。

該圖中左邊就是手機預(yù)覽效果圖，可見目前能夠顯示出一個“獲取頭像昵稱”按鈕和一個“Hello World”文本，這與手機運行的效果完全相同。

用戶可以直接在PC端用鼠標單擊模擬手指在手機屏幕上觸摸的效果，如圖2-5所示。

在圖2-5中，圖（a）顯示的是使用鼠標單擊來模擬手指在手機屏幕上觸摸的效果；圖（b）為單擊之后彈出的微信授權(quán)信息，只有單擊“允許”才可以獲得數(shù)據(jù)；圖（c）為最終顯示效果，由該圖可見小程序項目已經(jīng)成功地獲取了開發(fā)者的頭像和昵稱信息。

2.1.2 真機預(yù)覽和調(diào)試

1 真機預(yù)覽

除了可以在PC端使用鼠標模擬手機觸屏的單擊效果以外，還可以直接在真機上進行程序預(yù)覽。單擊“預(yù)覽”按鈕，即可自動生成一個預(yù)覽專用二維碼，如圖2-6所示。

此時用手機微信掃描圖2-6中的二維碼即可進行真機測試，如圖2-7所示。

由圖2-7可見效果基本與PC端的預(yù)覽圖一致。用戶需要注意，預(yù)覽所用的二維碼不是永久有效，要注意它的過期時間，一旦過期，需要重新單擊“預(yù)覽”按鈕生成新的預(yù)覽二維碼。

2 真機調(diào)試

真機預(yù)覽只能看到小程序頁面效果，如果在測試過程中需要像PC端一樣獲得小程序的狀態(tài)數(shù)據(jù)（例如console語句輸出、本地緩存數(shù)據(jù)變化、網(wǎng)絡(luò)抓包等），則需要進行真機調(diào)試。

單擊“遠程調(diào)試”按鈕，即可自動生成一個調(diào)試專用二維碼，如圖2-8所示。

此時用手機微信掃描圖2-8中的二維碼即可進行真機遠程調(diào)試，如圖2-9所示。

手機調(diào)試界面會比真機預(yù)覽多出一個浮窗，該浮窗會顯示與PC端的通信狀態(tài)。在調(diào)試過程中手機端的任何操作都可以在PC端調(diào)試器中同步進行查看。

2.1.3 代碼的提交

1 上傳代碼

預(yù)覽只能由開發(fā)者測試小程序的性能和表現(xiàn)，如果希望更多人使用小程序，需要進行代碼的上傳。注意，只有上傳后的代碼才可以由管理員進一步選擇發(fā)布為體驗版本或正式版本。

首先需要將代碼上傳到小程序的后臺管理端。單擊開發(fā)者工具頂端的“上傳”按鈕準備上傳代碼，具體操作如圖2-10所示。

單擊“確定”按鈕之后，會出現(xiàn)新的表單要求開發(fā)者填寫自定義的版本號和項目備注，如圖2-11所示。這兩個字段是為了方便管理員檢查版本而使用的。

上傳成功后就可以登錄小程序管理后臺，單擊“開發(fā)管理”選項，在開發(fā)管理面板中看到剛才提交的版本，如圖2-12所示。

同一個小程序允許同時有多名開發(fā)者提交自己的最新開發(fā)版本，管理員最終只能選擇其中一份進一步提交為體驗版或線上版。

2 提交體驗

管理員可以將開發(fā)版本提交為體驗版，體驗版目前最多可以供15名體驗者使用。單擊“提交審核”按鈕右邊的向下箭頭按鈕，選擇“選為體驗版本”選項，如圖2-13所示。

體驗版無須經(jīng)過審核，選中選項即可完成，已經(jīng)轉(zhuǎn)換成功的體驗版如圖2-14所示。

單擊體驗版的版本號下方的按鈕會出現(xiàn)一個二維碼，具有體驗者權(quán)限的用戶通過手機微信掃一掃就可以使用體驗版了。體驗版也可以繼續(xù)單擊“提交審核”按鈕提交為正式的線上版本，但是需要經(jīng)過審核。

3 提交審核

管理員可以將開發(fā)版或體驗版進一步提交審核，通過審核后的版本將成為正式的線上版。該版本沒有權(quán)限限制，所有微信用戶都可以使用。正式發(fā)布的線上版本如圖2-15所示。

2.1.4 小程序的版本

小程序根據(jù)項目階段分為開發(fā)測試、審核過程和最終發(fā)布，如圖2-16所示。

在不同階段小程序的版本主要有開發(fā)版本、體驗版本、審核中版本和線上版本。

1 開發(fā)版本

使用開發(fā)者工具可以將代碼上傳到開發(fā)版本中。開發(fā)版本只保留每位開發(fā)者最新的一份上傳代碼，該版本只有開發(fā)者權(quán)限用戶可以預(yù)覽、測試。開發(fā)版本可以刪除，不影響線上版本和審核中版本的代碼。開發(fā)版可以由管理員繼續(xù)提交為體驗版或?qū)徍酥邪姹尽?/p>

2 體驗版本

開發(fā)版可以由管理員繼續(xù)提交為體驗版，該版本無須審核且只有體驗者權(quán)限用戶可以使用，其他用戶無法打開。該版本主要用于正式上線前的測試體驗。

3 審核中版本

開發(fā)版全部完成后可以由管理員正式提交上線。小程序正式上線前的待審核狀態(tài)稱為審核中版本，同一個小程序的所有開發(fā)版本只能有一份處于此狀態(tài)。該版本可在更新代碼后重新提交審核，在等待審核的過程中不影響現(xiàn)有正式版本的使用。

4 線上版本

該版本是審核通過后的版本，所有微信用戶都可以查看和使用。如果有新上傳的代碼重新被審核通過，該版本將被覆蓋更新。