簡介
微信小程序(下文簡稱小程序)的整體與使用腳手架搭建出的vue項目(個人使用vue-cli)有一些類似之處，關注一些差別可以幫助原先vue開發者更快上手小程序。注意，雖然本文從vue出發，但是小程序的框架更類似於多個框架的混合，與vue是不同的框架，本文的比較只是為了幫助開發者快速上手，避免一些常見的錯誤。
詳述
開始
創建微信小程序項目首先需要注冊小程序賬號(微信公眾平台)，在小程序管理頁得到appid，下載微信開發者工具，在開發者工具中選擇新建項目即可，具體創建流程參照官網指南。創建項目后，開發者工具會提供一個簡單的框架，本文從這個框架開始。
項目結構
一個常見的微信小程序結構如下：
在構建一個微信小程序項目時，開發者工具會自動准備好大部分的構架
。除了自帶的pages、utils文件夾以外，個人根據習慣增加images,js,components文件夾。
pages文件夾用於存放頁面，components用於存放組件：區別於vue，小程序組件和頁面是不同的，因此，個人習慣創建一個components文件夾用於存放組件，將組件與頁面區分開。
images等文件夾用於存放不同類型的靜態資源，小程序對靜態資源的位置沒有嚴格要求，只要在項目目錄內即可，所以你也可以創建一個assets文件夾用以存放全部靜態資源。
utils文件夾用於存放公用的函數。
project.config.json文件相當於vue中的package.json，主要進行項目整體配置，包括基礎庫版本、是否使用es6語法、是否使用npm模塊等，這些內容可以在開發者工具-詳情-本地設置中修改。需要注意的是，不同與vue，project.config.json中不包含項目引入的依賴庫信息等。
app.json文件包括引入庫、路由設置、導航欄設置、窗口設置等。
app.js，小程序生命周期函數、全局數據(類似vuex)等。
app.wxss，全局樣式。
總體來說，小程序對不同文件的划分會更加清晰，json文件用於配置，js文件專注於邏輯。
頁面/組件文件
一個小程序頁面的結構如下所示：
可以看到，一個頁面/組件從vue常用的.vue單文件，變成了一個包含{wxml,wxss,js,json}四個文件的文件夾。
根據之前整體構架的敘述，我們不難理解各個文件的功能：
| 文件 | 功能 |
|---|---|
| wxml | 結構 |
| wxss | 樣式 |
| js | 邏輯 |
| json | 配置 |
值得一提的是，引入第三方庫等配置功能集中在.json文件中，js文件則專注於邏輯交互的代碼。
小程序中，組件和頁面是不同的！
組件要求在json文件中聲明components: true，而后在對應json文件中的usingComponents中引入，引入方法與vue中的components一致。其他的組件基本使用與vue項目中一致。有意思的是，在實際代碼書寫中，我發現一定程度上組件和頁面是可以互換的（來自一次小失誤，不要這么做！）。
微信官方提供的微信開發者工具，對小程序的開發的支持是我體驗過最好的（雖然沒有插件、沒有補齊等功能）。創建組件/頁面，首先在components/pages文件夾內，創建文件夾，再在開發者工具的資源管理器中對文件夾右鍵，選擇新建page/新建component，即可快速創建需要的四個文件。注意，編輯器默認不會為頁面/組件創建文件夾。
wxml
小程序中的wxml與html非常類似，使用方法也基本一樣，存在的區別主要有：
-
標簽名差別：
view是小程序中最常見的標簽名，主要功能與div相同。此外，小程序標題、文本、段落統一為text。這里需要注意的是，小程序對不同的標簽提供了不同的基本功能，構建頁面時選擇不同的標簽會有不同的渲染，比如使用view和text在文字處理時就會有不同的渲染，要盡量使用原生標簽進行書寫。各個標簽提供的基本功能也不盡相同，有一些與html有着較大差別（比如image，巨坑）。
同時，小程序提供更多移動端常用的原生組件，如iconpicker等。
具體內容請看官方文檔 -
模板語法區別：
小程序同樣采用MVVM開發模式，整體提供的功能與vue類似，但是語法和實現卻不大相同。與vue相同，數據綁定使用雙大括號{% raw %}{{}}{% endraw %}，邏輯控制同樣有if、for等等。但是，在小程序中，控制屬性使用wx:開頭，如v-if在小程序中就是wx:for，動態屬性則需要wx:if={% raw %}"{{...}}"{% endraw %}，即在引號內仍需要雙大括號進行數據綁定。數據綁定的方式也與vue不同。
小程序的wxml使用中還有很多變化的地方容易踩坑，后續說明。
js
小程序中我們寫邏輯主要仍是在.js文件中，與vue類似，小程序每個頁面/組件有一個主入口：Page()/Component()。
其中可以使用的參數也非常類似：
- data
Page({
data: {
"data名": 默認數值,
},
})
- 事件
page中與data同層，在component中則寫在methods中。
Page({
clickMe: function() {
this.setData({ msg: "Hello World" })
}
})
Component({
methods: {
clickMe() {
this.setData({ msg: "Hello World" })
}
}
})
此外，小程序主要是觸摸操作，因此，官方提供了一些移動端常用的頁面事件，比如下拉、下拉觸底等。
- 生命周期
小程序頁面的生命周期與組件的生命周期不同，但是兩者的流程整體與vue中並無太大差異，存在一些名稱的差異等。
小程序組件在2.2.3版本庫前生命周期書寫方法與頁面中一樣，之后添加了lifetimes字段，現在推薦在lifetimes中聲明：
Component({
lifetimes: {
attached: function() {}
}
})
此外，小程序組件與頁面的生命周期也不同，具體參考：頁面|組件。
wxss
為了適配移動端，wxss中的最大變化就是提供rpx尺寸單位，單位的像素大小根據屏幕寬度進行自適應，與iphone6顯示的像素比為1rpx = 0.5px
動態更新
小程序的數據更新與vue中不同，雖然官方文檔說是雙向綁定，但是本質上來說是 單向綁定 。視圖層更新會影響邏輯層更新，同時會影響頁面上全部相同綁定value的更新，但是邏輯層的更新不能直接更新視圖層。具體來說，就是頁面上的數據更新會直接修改data,但是每次data的更新 需要使用setData()進行更新 。
根據小程序的實現，我們必須盡量少的使用setData()
關於動態更新，詳見官方文檔
總結
由此，從 創建小程序-梳理框架-寫第一個頁面 需要關注的流程就基本介紹完了，都是微信小程序開發的基礎知識，想要更詳細的內容請前往 官方文檔-指南。
參考文獻
備注
文章同時發布於博客