小記一筆 －微信小程序開發隨筆

　

序言：

　　今年的01月09號備受關注的微信小程序正式上線了， 衆多的互聯網企業也相繼發佈了自家的小程序。趁着最近上班不是特別忙，本身閒來無事也跟着搗鼓了一款我的記帳用的小程序：小記一筆。用戶能夠方便、快捷的將本身平時的開銷與收入記錄下來，還有各類類型的統計，以便實時的準確掌握本身的財務情況。目前此程序已正式上線，你們能夠在微信中搜索「小記一筆」點擊使用，下面是其中幾張效果截圖：

      

準備工做：

　　一、要開發微信小程序，首先得有工具，能夠先去微信公衆平臺官網（https://mp.weixin.qq.com/）註冊賬號，登陸到後臺後，在最右上方點擊「文檔」切換到開發文檔頁面，裏面有開發小程序的各類教程。再點擊「開發」－「工具」－「開發者工具」連接，能夠選擇下載相應的小程序開發工具，目前官方提供了"windows64","windows32","mac"三種平臺的開發工具，你們能夠根據本身的實際狀況選擇相對應的工具便可。

　　二、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

 

結束語：

    小程序自上線以來，各類聲音都有，有看好的，有各類唱衰的。我的認爲小程序就像幾年前的微信公衆號，剛出來時也不被你們看好，但通過幾年的發展，如今微信公衆號也是滲透到各行各業中了。我相信通過騰訊的大力推廣，小程序會被愈來愈多的人所接受。

　 最後，歡迎你們使用個人小程序，在微信中搜索「小記一筆」，或掃描下方的二維碼進行使用，使用過程有什麼好的建議也記得反饋給我哦，歡迎你們拍磚。