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

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

　　機(jī)型選擇：小程序以IPhone6的屏幕尺寸為設(shè)計(jì)標(biāo)準(zhǔn)，讓UI小姐姐按照IPhone6屏幕尺寸來切圖。

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

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

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

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

　　app文件

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

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