一直不溫不火的微信小程序2018年迎來了第二春，在我的記憶中隨著跳一跳小游戲的出現(xiàn)，一時間數(shù)千萬的微信小程序如雨后春筍般出現(xiàn)在我們的視線里。追著這波大浪潮，筆者所在的公司也開始將有些需求轉(zhuǎn)移到微信小程序上。接下來將以幾篇文章將最近的一個日歷打卡小程序的開發(fā)過程以及遇到的問題和大家做個分享。

　　(一)微信開發(fā)者工具小程序團隊推出了自己的開發(fā)工具-微信開發(fā)者工具，目前微信開發(fā)者工具任然在不斷的完善中，在開發(fā)小程序時經(jīng)常要不斷的更新。論壇上吐槽的文章也是一大堆，存在很多bug，筆者在開發(fā)過程中也是被它坑過。筆者是安卓開發(fā)者，習(xí)慣于這種可視化的編程，所以沒有選擇Webstrom或者其他開發(fā)工具，接下來將介紹微信開發(fā)者工具基本功能。

　　機型選擇：小程序以IPhone6的屏幕尺寸為設(shè)計標準，讓UI小姐姐按照IPhone6屏幕尺寸來切圖。

　　預(yù)覽界面：寫好視圖布局后點擊編譯，視圖界面刷新顯示遠程調(diào)試：手機端和PC端開發(fā)工具聯(lián)調(diào)(非常實用)上傳代碼：上傳到騰訊服務(wù)器，提交審核必經(jīng)步驟。可以填寫版本號和備注信息。

　　5-1：代碼體積，微信限制 2M 以內(nèi)。5-2：ES語法轉(zhuǎn)換，開發(fā)中一般不校驗合法域名信息 。5-3：域名信息：小程序后臺要做配置服務(wù)器域名，有request 域名，socket 域名以及uploadFile和downloadFile域名。注意：域名小程序要求必須是https控制臺：打印輸出信息，方便調(diào)試資源文件：對應(yīng)項目的文件目錄，一般可以在這里進行斷點調(diào)試本地數(shù)據(jù)存儲：顯示的是本地存儲的數(shù)據(jù)，對應(yīng)的相關(guān)API是wx.setStorageSync(key,data)視圖調(diào)試：標組件以子父層級結(jié)構(gòu)呈現(xiàn)，方便調(diào)試。以上就是在開發(fā)過程中微信開發(fā)者工具常用到的功能，微信開發(fā)者工具也在不斷的完善，為了以后更好的提升開發(fā)效率，也需要我們在開發(fā)過程中將遇到的問題不斷的反饋給小程序團隊做優(yōu)化，希望大家抱著包容的心態(tài)。開發(fā)過程中大家也可以依照自己的習(xí)慣選擇其他的開發(fā)工具

　　(二)小程序框架以及目錄結(jié)構(gòu)介紹

　　邏輯層小程序開發(fā)框架的邏輯層由 JavaScript 編寫。邏輯層將數(shù)據(jù)進行處理后發(fā)送給視圖層，同時接受視圖層的事件反饋。邏輯層對應(yīng)的是js文件，在每個頁面的js文件中，系統(tǒng)提供了一系列的方法如：頁面生命周期(),onShow(),onHide(),等，下拉刷新onPullDownRefresh()，頁面到底部(上拉加載)onReachBottom()方法，分享功能onShareAppMessage()等。視圖層框架的視圖層由 wxml 與 wxss 編寫，由組件來進行展示。將邏輯層的數(shù)據(jù)反應(yīng)成視圖，同時將視圖層的事件發(fā)送給邏輯層。wxml 由小程序提供的組件組成，wxss 是css 樣式。

　　app文件

　　app.json 文件用來對微信小程序進行全局配置，決定頁面文件的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時時間、設(shè)置多 tab 等。頁面的json文件一般用來配置當前頁面的窗口表現(xiàn)。app.js 用來提供全局變量，如baseUrl。app.wxss 提供全局的css樣式

　　utils/.json 系統(tǒng)提供的工具類，一般編寫公共的方法導(dǎo)出方便其他頁面調(diào)用。