序言:
今年的01月09號備受關注的微信小程序正式上線了, 眾多的互聯網企業也相繼發布了自家的小程序。趁着最近上班不是特別忙,自己閑來無事也跟着搗鼓了一款個人記賬用的小程序:小記一筆。用戶可以方便、快捷的將自己平時的開銷與收入記錄下來,還有各種類型的統計,以便實時的准確掌握自己的財務狀況。目前此程序已正式上線,大家可以在微信中搜索“小記一筆”點擊使用,下面是其中幾張效果截圖:
准備工作:
1、要開發微信小程序,首先得有工具,可以先去微信公眾平台官網(https://mp.weixin.qq.com/)注冊帳號,登錄到后台后,在最右上方點擊“文檔”切換到開發文檔頁面,里面有開發小程序的各種教程。再點擊“開發”-“工具”-“開發者工具”鏈接,可以選擇下載相應的小程序開發工具,目前官方提供了"windows64","windows32","mac"三種平台的開發工具,大家可以根據自己的實際情況選擇相對應的工具即可。
2、AppID: 官方規定沒有AppID, 能進行微信小程序的開發,也能在真機上進行調試預覽,但不能正式上線發布。所以如果只是自己開發着玩,可以不用申請appid,但如果想正式上線發布自己的小程序以便大家使用,則需要申請AppID。在前幾天(03-27)微信小程序又有了重大更新, 為增強小程序能力,擴大小程序使用場景,對個人開發者開放注冊了。在這之前只有企業用戶才能申請appid, 申請時需要提供企業相關資料,需要用對公帳號給騰訊指定的銀行帳號打幾分錢進行認證。而現在則不需要了,個人也可以申請了。小程序開放個人開發者申請注冊后,個人用戶可訪問微信公眾平台,掃碼驗證個人身份后即可完成小程序帳號申請並進行代碼開發。
開發環境介紹:
安裝好開發工具后,雙擊啟動會要求管理員微信掃描,同意即可進入。跟大多數開發工具一樣,在啟動界面會列出以前的歷史項目,點擊項目名稱可進入之前的項目,點擊“+”可以創建新的項目。
如果填寫了appid則開發完了后可以發布上線,填寫完項目名稱,選擇了相應的目錄后,注意下面的復選框。此復選框的意思是官方為大家提供了一個默認的小程序目錄結構,里面有小程序正常運行所需要的配置文件與主要頁面。建議大家練習的時候勾選上,這樣項目創建完成后即可運行,否則需要手動創建所需的各種文件。我最開始練習時因為沒有勾選,也不知道要創建相應的配置文件,導致項目一運行各種報錯,折騰了半天。
小程序默認包含pages、 utils 、app.js、 app.json、 app.wxss五個部分。
1):其中pages文件夾主要存放小程序的頁面文件,每個文件夾為一個頁面,每個頁面中包含.js, .wxml,.wxss,.json四個文件: .js文件是小程序的腳本文件,用於處理界面的腳本事件,如獲取數據,點擊事件等,使用我們熟悉的JS腳本編寫。.wxml是頁面結構文件,用於組織頁面上的元素,與Html非常類似。.json文件是配置文件,只能配置本頁面,如配置本頁面的導航欄的文字,背景色等。.wxss是樣式表文件,類似於css,主要是讓界面顯示的更加漂亮。
2):utils文件夾主要用於存放全局的一些.js文件, 如封裝的常用JS網絡請求方法,日期處理方法等。
3):app.js文件是系統方法處理的全局文件,也就是說文件中聲明的函數和數據,在整個小程序中都可以使用,如存儲后台接口API地址。
4):app.json文件是系統全局配置文件,是必須包含的。在這里面聲明整個小程序有哪些頁面,也可以聲明小程序是否帶有tabbar選項卡及選項卡里面的頁面地址與文字等。此配置文件是全局的,如果子頁面的.json文件也配置了相同的內容,則子頁面中的配置優先級更高。
5):app.wxss文件是全局的樣式美化文件,其優先級同樣沒有子頁面中的wxss文件配置的樣式優先級高。
下面結合我在開發"小記一筆"過程中碰到的幾個問題說一下如果大家在開發自己的微信小程序時需要注意的幾點:
1):小程序開發工具的保存加編譯的快捷鍵是"ctrl+s", 也就是編寫完代碼后,直接按這兩個鍵就能保存並重新生成了。需要注意的是編寫了多個頁面中的代碼,按這兩個鍵只會保存當前頁面的代碼,不會保存所有頁面的代碼。所以如果有時沒有達到自己想要的效果時,記得看看是否有其他頁面的代碼沒有保存,我剛開始編寫小記一筆時,經常發現有頁面代碼沒保存,導致效果出不來,這一點需要大家細心一點。
2):小程序的緩存在開發工具中可以手動清除,但是在真機上沒法手動清除,所以要想在真機中手動清除,得寫一個清除事件,點擊按鈕啥的,手動調用清除方法進行清除,這點有點坑。
3):官方規定如果小程序要獲取后台接口數據必須走https協議,如果后台服務器暫時不支持https協議而又想在模擬器中獲取數據,則只需要在開發工具中設置一下即可。點擊開發工具左側的“項目”按鈕,然后勾選上右側的“開發環境不校驗請求域名以及TLS版本”復選框,這樣后台服務器不配置https協議也能返回數據了。但是如果小程序要正式上線發布且需要后台服務器提供數據,則必須配置https協議。
4): 我在開發練習過程中是調用豆瓣提供的測試接口,此接口地址支持https協議,大家在練習調用后台數據時,也可以用此接口做測試。現將此接口地址提供給大家以便參考:
正在上映的電影:https://api.douban.com/v2/movie/in_theaters
即將上映的電影:https://api.douban.com/v2/movie/coming_soon
排行榜top250的電影:https://api.douban.com/v2/movie/top250
真機調試&上線&體驗:
真機調試:開發完代碼想要在真機上預覽怎么弄?很簡單,只需要輕輕兩步即可搞定。開發完代碼后,還是點擊開發工具左側的“項目”按鈕,然后在右側再點擊“預覽”按鈕就會生成一個二維碼,用注冊時填寫的微信號掃描此二維碼即可真機查看效果了。需要注意的是,以上面查看豆瓣電影數據為例,在真機上會出現數據不顯示的問題,這時只用在手機右上角打開調試模式即可。
上線:開發完了代碼也測試好了,這時候大家肯定想正式發布上線以便更多的人使用,這時候怎么操作呢?首先點擊開發工具左側的“項目”按鈕,然后在右側再點擊“上傳”按鈕點擊確定,掃描二維碼同意上傳,此時會要求填寫此次上傳的版本號與備注,填寫完后點擊上傳按鈕就上傳到微信公眾平台后台了,如下圖所示:
上傳到后台后,可以設置為體驗版本,也可以直接提交審核,填寫相應的審核信息提交審核后,會出現一個審核版本,審核通過了,在右側會出現一個發布按鈕,只有點擊了此發布按鈕了,你的小程序才算正式發布上線了,這時大家才可以在微信中搜索到。目前小記一筆總共提交了6個版本,一般騰訊審核工作人員周末不審核,工作日才審核,正常情況下一到兩個工作日就能審核通過。
體驗:在正式提交審核之前可以將上傳的版本設置為體驗版,這樣非管理員也可以體驗小程序以便發現小程序存在的問題好及時改正。在微信公眾平台后台的“用戶身份”-“體驗者”頁面可以綁定體驗者微信號,只有被綁定了體驗者的微信號才能體驗,而且必須將上傳的小程序版本設置為體驗版才能體驗,大家需要記住要同時滿足這兩個條件才行。我做小記一筆時最開始只綁定了體驗者微信號,沒有設置體驗版本,導致別人掃描二維碼時總提示沒有體驗權限,這點大家需要清楚。
后台服務器:
要提供后台接口,則必須有服務器。現在可供大家選擇的雲服務器比較出名的有騰訊雲,阿里雲,小記一筆選擇的是阿里雲,穩定、高效。一般供個人用的雲服務器一年的費用也沒多少。有了雲服務器,要給小程序提供接口則必須配置https協議和TLS版本。如果購買的是阿里雲服務器,可以直接采用其官方提供的免費證書,官方有安裝教程,大家參照其教程安裝即可。下面提供一個網站,可以檢測你的接口是否支持https協議,地址是:https://www.ssllabs.com/ssltest/index.html
結束語:
小程序自上線以來,各種聲音都有,有看好的,有各種唱衰的。個人認為小程序就像幾年前的微信公眾號,剛出來時也不被大家看好,但經過幾年的發展,現在微信公眾號也是滲透到各行各業中了。我相信經過騰訊的大力推廣,小程序會被越來越多的人所接受。
最后,歡迎大家使用我的小程序,在微信中搜索“小記一筆”,或掃描下方的二維碼進行使用,使用過程有什么好的建議也記得反饋給我哦,歡迎大家拍磚。