前言
去年9月份的時候，小程序開發者工具還需要破解，每個版本的API會有一些改進，所以在開發的過程中要不時的檢查自己項目中用到的API，如果發現你的項目掛了，去查看官方文檔，小程序學習難度較RN容易，實質上是一個MVVM模式，無需操作DOM，實現數據綁定，推薦小程序學習方法： 最好的教程是官方文檔，但是不建議把官網所有內容全部看一遍，意義不是很大，而是你需要做什么樣的功能的時候再去查文檔，文檔正確的打開方式你有get到嗎？在熟悉了基本的用法之后可以去試著理解一下小程序的生命周期，這對幫助你理解事件處理函數應該綁定在哪一個狀態下有幫助。
快速創建一個小程序
- 點擊添加項目
Paste_Image.png
2.如果沒有AppID就選擇無AppID，無AppID無法進行真機預覽，以及上傳，某些API無法使用
Paste_Image.png
開發者工具簡單介紹
左側菜單
- 編輯
- 調試
1.在source下Mac使用command+P（windows下使用Ctrl+P）可以快速打開查找文件的搜索框進行斷點調試，記住選擇[sm]文件
Paste_Image.png
2.Appdata顯示當前頁面從后臺獲取到的數據結構及內容
Paste_Image.png
3.Wxml模式下可以查看頁面css
- 項目
Paste_Image.png
4.編譯
5.后臺
在模擬器上模擬App在后臺運行時的狀態，可以查看此時頁面處于生命周期的哪一步，其他的用處暫時還沒研究到
6.緩存，可以清理文件緩存和數據緩存，緩存的信息顯示在調試>>Storage中
關于處理緩存的API 如wx.clearStorage()，更多用法參考官網
7.關閉
項目結構
Paste_Image.png
- pages
放置頁面文件，表示頁面下有index和logs 2個文件
.wxml放置html文件，.wxss放置css文件
可以在app.json的pages中快速創建pages下的文件目錄
例如在app.json的pages下添加"pages/test/test"就會在pages下自動生成test目錄
手動創建pages下的文件需注意.json文件在為空的時候要放置一個{}，.js文件為空時也要添加Page({})注冊函數，否則會出現“pages/test/test 出現腳本錯誤或者未正確調用 Page()”的錯誤 - utils
放置功能性的js，供整個項目使用的
業務性的js建議放在pages下各個項目對應的js文件中 - app.js頁面入口文件js，注冊了一個App({})，globalData對象中設置全局變量，在其他js文件中調用的時候采用getApp()，例如：var app = getApp();
- app.json頁面配置文件，我們使用app.json文件來對微信小程序進行全局配置，決定頁面文件的路徑、窗口表現、設置網絡超時時間、設置多 tab 等
Paste_Image.png
(1)項目中所有的pages下的文件目錄必須要寫在pages下，pages是一個包含所有頁面路徑的數組集合，第一個元素是頁面的首頁
(2)window用于設置小程序的狀態欄、導航條、標題、窗口背景色，pages文件夾下每個頁面的.json只能設置 window 相關的配置項，以決定本頁面的窗口表現，所以無需寫 window 這個鍵，在這里的配置項會覆蓋掉app.json下的同名屬性
- app.wxss 設置全局樣式
