個人開發者的福利
微信小程序,剛聽到這個新名詞的時候,我就興沖沖的去找入口,看看自己能不能搞個微信小程序的HelloWorld,畢竟能在微信上把自己寫的一些小工具跑起來還是滿炫酷的。
沒想,網上一查,當時還不支持個人開發者開發小程序。但是今天無意間看到公眾號的上的頭條,個人開發者也可以開發微信小程序了。

今天正好調休在家,就看了如何申請賬號,搭建環境以及運行發布項目的。
申請賬號
因為在微信公眾號看到這條消息,想當然認為小程序應該在公眾號里面,找了一通,除了在“開發者工具”->"開發者文檔"->"其他文檔"中看到有關小程序的介紹外,並沒有其他更詳細的信息了。
於是點開上圖中的鏈接,才知道需要到mp.weixin.qq.com注冊。

注冊的具體細節就不說了,官方有給詳細的文檔,點注冊文檔
注意:這里並不能直接用之前注冊號的公眾號的賬戶和密碼,需要用一個之前沒有注冊過的郵箱來注冊一個新的小程序的賬號。
賬號申請成功就可以登錄,登錄后的界面如下

環境搭建
按照上圖的“小程序發布流程”的提示,依次完成每個步驟。
- 小程序信息: 包括小程序的名稱, 頭像,介紹等信息
- 小程序開發與管理
-
開發工具:點擊超鏈接,我選的是Mac版本,安裝完后得到如下的小程序開發的IDE

-
添加開發者:顯然我是管理員,無需授權
-
配置服務器:在小程序界面左下方有個“設置”選項,點擊進入切換到“開發設置”可以看到有個AppID,這個ID可以用於后面發布以及搜索到你發布后的小程序
-
幫助文檔:自取
-
- 版本發布: 注冊文檔這個鏈接中同時也有如何上傳代碼,預覽你的小程序效果(因為我的手機版本太低,沒辦法預覽)提交審核到最終發布等等。我今天提交的一個小程序現在還在審核狀態~~~
實戰
工具文檔都有了,我們可以擼起袖子寫代碼了。印象中,有段時間在博客園中有看到不少同學些小程序的文章,悄悄搜了一把,確實不少,而且看做的效果都挺好的,既然這樣我就沒有必要造輪子了,畢竟一天的時間既要寫代碼又要調樣式還是有點不夠。
看了Oopsguy有多篇有關小程序的文章,並且開源了代碼。於是我在豆瓣圖書這個項目的基礎上寫了一個簡易的快遞查詢小程序——快遞一點通
- 准備API
找了一個可以查詢快遞的第三方網站,通過chrome瀏覽器的開發者工具看了下請求數據的過程,大致分為兩步
第一步:檢測用戶輸入的快遞單號,通過POST請求的方式向后台發送數據得到快遞所屬的快遞公司
(我仔細觀察了下,只有當訂單號超過5位的時候才會發送請求,另外如果輸入很快,則不會輸入一個數字就發送一個請求)

上圖就是我在較慢輸入的時候,每次輸入都生成一個post請求。
這次請求主要是為了得到這個快遞是來自哪家快遞公司,因為在查詢快遞單號的時候你並不需要選在是順豐還是圓通申通還是韻達等等。
在返回的結果中,我們可以得到快遞公司的名稱,類似這樣

第二步:根據上一步得到的快遞公司以及用戶輸入的快遞單號查詢快遞詳情
這次使用的是GET方式的請求,主要兩個參數分別是快遞公司的名稱,就是上圖中的comCode以及用戶輸入的快遞單號。
得到的結果就是該快遞單號對應的快遞詳情信息

- 編寫小程序
有了上面的API接口,我們就可以把這些用到小程序中了。下面就是基於Oopsguy的豆瓣圖書的小程序項目做了一個改動,使之從豆瓣圖書搜索的小程序編變成查詢快遞信息的快遞一點通小程序。
項目結構如下

其中分別對requests目錄下的app.js以及request.js和pages下的index做了改動。
得到效果如下


今天網絡太卡了,先到這吧,算是嘗鮮了。
小程序已經發布,微信搜索“快遞在哪里”就可以用了
如果您覺得閱讀本文對您有幫助,請點一下“推薦”按鈕,您的“推薦”將是我最大的寫作動力!如果您想持續關注我的文章,請掃描二維碼,關注JackieZheng的微信公眾號,我會將我的文章推送給您,並和您一起分享我日常閱讀過的優質文章。

