學習筆記-初識小程序
2018年，我希望自己通過自學掌握小程序開發，因為對編程很感興趣，也很想將自己的設計方案變成產品。關於學習，最大的心得就是將自己所學的東西講給別人讓別人聽懂，這是掌握知識最快最好的方法。
首次接觸小程序，繞不開的就是開發者工具，關於這一點在微信開發者平台有完整的安裝教程和配置方法。下面總結了初次接觸小程序必備的學習知識點，大綱如下：
1.代碼結構
2.配置文件
3.版本規劃
4.開發者工具
01
代碼結構
談到小程序的代碼結構，我們不妨從書籍這一具象物體進行延展。書籍必備的幾大元素分別是：封面，目錄，內容，排版和書寫所用的工具。
／Image by 歡顏
綜上所述我們可以將小程序的代碼結構分為以下幾大部分：
app.js：用來註冊一個微信小程序，就好比每一本書籍都需要一個特定的封面去書柜上架，以此來表現它的唯一性；
app.json：主要是配置微信小程序全局信息（網路請求的超時時間，窗口的表現，各個頁面的註冊路徑），正如每一本書都需要一個目錄去闡述章節之間的關聯和每一章節所應包含的信息；
app.wxss：配置微信小程序的全局樣式，我們總能從《海子詩選》里讀出詩歌應有的浪漫，總能從《老人與海》中讀出故事的跌宕起伏，他們除了內容上的差異外，在文章的排版和字型大小的處理上也有明顯的差別，而app.wxss正是去設置於每個小程序所獨有的風格樣式；
pages：儲存所有小程序的頁面，每個頁面主要由四部分組成：js文件（處理邏輯和頁面交互）,json文件（頁面的配置信息）,wxml文件（元素和頁面內容）
,wxss文件（設置頁面元素的樣式）；
utils文件：存放一些工具類函數
02
基礎配置文件介紹
首次接觸小程序時，我們會發現小程序的配置文件主要包含兩部分：app.json的全局配置文件和頁面配置文件。
／Image by 歡顏
對於單個page頁面，同樣包含window的配置信息，如果單個頁面的window配置項與全局重複，則覆蓋全局的配置項。與此同時頁面也可以通過disableScroll這個選項去設置是否開啟滾動。
03
版本規劃
首次接觸小程序時，我們會發現小程序的配置文件主要包含兩部分：app.json的全局配置文件和頁面配置文件。
／Image by 歡顏
我們在開發小程序的過程中主要會經歷五個版本的迭代過程，預覽版（主要用於預覽調試），開發版本（我們將本地的代碼上傳成具有版本號的小程序應用，擁有開發者許可權的成員就可以通過開發者助手看到開發版本），體驗版本（小程序管理後台可以直接將開發版本轉換成體驗版本，讓更多具有許可權的朋友體驗測試），審核版本（當開發者將小程序提交平台審核後，此版本形成），最後則是線上版本，小程序正式發布。
04
開發者工具講解
小程序開發者工具只要分為四大塊：工具欄，模擬器，編輯器和調試器。
／Image by 歡顏
前三個部分很容易理解，這裡我重點講解一下調試器，
／Image by 歡顏
右邊我們會發現有一個調試器模塊，調試器模塊主要由七部分組成：
1.Console 主要列印小程序頁面的調試log信息；
2.Sources 展示所有腳本文件，可以對腳本文件進斷點調試；
2.Network 展示我們各個網路請求的狀態信息，以及請求資源的響應數據；
3.Storage 通調用wx.setStorage和wx.setStorageSync這些函數設置緩存的時候可以動態的去修改緩存數據；
4.AppData 是微信小程序頁面真實展示的數據，來測試小程序在不同設備的兼容情況；
5.Wxml 展示頁面上各個組件元素，可以對組件元素進行樣式屬性的修改；
6.Sensor 主要包含地理位置信息和設備旋轉角度的展示，我們可以動態的設置相關信息。
「
每一段學習歷程都值得被記錄，輸入→消化→再分享，(^o^)/
」
TAG:繩文筆記 |