微信小程序開發流程包括哪些
2019-04-19
2017年微信小程序的出現，一直以來都是不溫不火，直到開放了個人注冊小程序之后，2018年小程序開始大火，如雨后春筍一般破土而出，那么如果想要開發一個微信小程序應該怎么做呢？首先你得了解關于微信小程序的開發流程，隨小編一起來看看。
1、首先，打開微信小程序注冊頁面，注冊賬號跟密碼管理擁有權限
2、登錄微信公眾平臺獲得AppID(小程序ID)
3、找到設置->開發設置
4、下載開發者工具，然后輸入自己的Id
5、自動打開開發者工具平臺
6、分析項目結構和各個文件的含義
首先來開一下目錄結構
文件后綴的含義
a.json后綴的JSON配置文件（沒什么好說的,就是普通的json文件）
b.wxml后綴的WXML模板文件(類Html文件)
c.wxss后綴的WXSS樣式文件（類CSS文件）
d.js后綴的JS腳本邏輯文件（沒什么好說的，就是普通的js）
7、但是重點來了
app.js
代碼中定義了一個App對象，該對象包含onLaunch方法和globalData成員變量，其中onLaunch方法會在程序啟動時由框架來進行調用。在該方法中，程序通過微信提供的本地存儲接口獲取了一個logs變量，第一次獲取時會返回空，這時將變量初始化為空數組，之后在數組頭部添加一個格式化的時間字符串，最后將數組變量存儲在本地。login和getSetting方法很容易理解，會執行獲取用戶信息的功能。代碼最后定義了globalData成員變量，該成員包含userInfo變量，用來保存用戶信息。
8、app.json
app.json是對當前小程序的全局配置，包括了小程序的所有頁面路徑、界面表現、網絡超時時間、底部tab等。tabBar就是我自己添加的。pages是用于描述當前小程序所有頁面路徑。window是小程序所有頁面的頂部背景顏色，文字顏色定義在這里的。
9、app.wxcss
這個不用說肯定是定義的一個全局css文件，就略過了
10、project.config.json
通常大家在使用一個工具的時候，都會針對各自喜好做一些個性化配置，例如界面顏色、編譯配置等等，當你換了另外一臺電腦重新安裝工具的時候，你還要重新配置?？紤]到這點，小程序開發者工具在每個項目的根目錄都會生成一個project.config.json，你在工具上做的任何配置都會寫入到這個文件，當你重新安裝工具或者換電腦工作時，你只要載入同一個項目的代碼包，開發者工具就自動會幫你恢復到當時你開發項目時的個性化配置，其中會包括編輯器的顏色、代碼上傳時自動壓縮等等一系列選項。
11、pages
可以看到有兩個文件夾，每個文件夾里面都有與文件夾名稱一樣的幾個文件，這里面的定幾個js,json,wxml,wxss只是針對此文件夾里面的文件有效果。index里面也可以寫一個json文件用來展現界面表現等，但是名稱必須是idex.json。
12、WXML模板
和HTML非常相似，有標簽、屬性等等構成，總結起來有兩點
1）標簽名字有點不一樣往往寫HTML的時候，經常會用到的標簽是div,p,span，開發者在寫一個頁面的時候可以根據這些基礎的標簽組合出不一樣的組件，例如日歷、彈窗等等。換個思路，既然大家都需要這些組件，為什么我們不能把這些常用的組件包裝起來，大大提高我們的開發效率。從上邊的例子可以看到，小程序的WXML用的標簽是view,button,text等等，這些標簽就是小程序給開發者包裝好的基本能力，我們還提供了地圖、視頻、音頻等等組件能力；
2）多了一些wx:if這樣的屬性以及{{}}這樣的表達式在網頁的一般開發流程中，我們通常會通過JS操作DOM，以引起界面的一些變化響應用戶的行為。例如，用戶點擊某個按鈕的時候，JS會記錄一些狀態到JS變量里邊，同時通過DOMAPI操控DOM的屬性或者行為，進而引起界面一些變化。當項目越來越大的時候，你的代碼會充斥著非常多的界面交互邏輯和程序的各種狀態變量，顯然這不是一個很好的開發模式，因此就有了MVVM的開發模式(例如React,Vue)，提倡把渲染和邏輯分離。簡單來說就是不要再讓JS直接操控DOM，JS只需要管理狀態即可，然后再通過一種模板語法來描述狀態和界面結構的關系即可。
13、小程序的框架也是用到了這個思路，如果你需要把一個HelloWorld的字符串顯示在界面上，WXML是這么寫:
14、JS只需要管理狀態即可，可以這樣寫
15、通過{{}}的語法把一個變量綁定到界面上，我們稱為數據綁定。僅僅通過數據綁定還不夠完整的描述狀態和界面的關系，還需要if/else,for等控制能力，在小程序里邊，這些控制能力都用wx:開頭的屬性來表達。
以上全部內容便是關于微信小程序流程開發的詳細內容介紹了，作為一名開發者，學會小程序開發還是很有必要的，不知道看到了，想要微信小程序開發的你了解多少呢？
（編輯：檸檬味）