1、app.json是對整個小程序的全局配置。
2、app.wxss是整個小程序的公共樣式表。
3、邏輯層:
App和Page方法：用於程序和頁面註冊
getApp和getCurrentPages方法：用於獲取App實例和當前頁面棧
API:微信提供了掃一掃，支付等微信功能
1）App()函數用來註冊應用程序，通過傳入一個對象參數來操作程序，參數說明：
onLaunch:程序初始化完成時觸發
onShow:程序啟動或由後臺進入前臺時觸發
onHide:程序從前臺進入後臺時觸發
onError：程序發生腳本錯誤時觸發
其他：可以在對象內自定義數據或者方法應用於全局作用域中
2）getApp()函數是一個用於獲取小程序實例的全局函數
3）Page()函數用於註冊一個頁面，傳入一個對象作為參數，用於指定初始數據，生命週期函數等，參數說明：
data：頁面初始數據
onLoad：頁面加載時的生命週期函數
onReady:頁面初次渲染完成的生命週期函數
onShow:頁面顯示
onHide：頁面隱藏
onUnload：頁面卸載
onShareAppMessage：右上角分享
其他：自定義函數（如事件響應函數等 ）
4）setData()用於將數據的改變及時通過到View層進行相應改變，同時改變對應的this.data值
注意：不能直接通過this.data來修改數據，這樣會造成數據不一致的問題。
5）getCurrentPages()用於獲取當前頁面實例
4、微信小程序框架的視圖層主要內容：WXML、WXSS，WXML，WXSS可以看成是HTML，CSS對應的結構，其寫法也大致相同。
WXML是小程序框架實現的標籤語言，有點像React的組件標籤。其結合基礎組件、事件系統，可以構建出頁面的結構。
常用的幾個標籤如下：
1）數據綁定
// page.js
Page({
data: {
message: 'Hello World!'
}
})
如上： 在Page()內傳入對象，並初始化數據data，設置了一個叫message的key，對應value值hello World。在對面的wxml頁面中，使用view標籤結合{{}}表達式的形式進行數據的渲染。
2）列表渲染 wx:for
// page.js
Page({
data: {
array: [1, 2, 3, 4, 5]
}
})
數據的初始化定義仍然在data中進行，頁面中使用wx:for進行數據遍歷，拿到每項item即為列表元素。這裡的wx:for指令跟Vue的v-for指令相似
3）條件渲染 wx:if
// page.js
Page({
data: {
view: 'MINA'
}
})
如上：通過wx: 前綴結合js中類似的條件分支語句實現條件判斷
4）模板 template
微信提供了template標籤用於定義一個頁面的部分組件模板，從而實現代碼複用。通過name屬性來設置template名字，在template內寫wxml代碼，從而實現模板的定義。
通過is屬性來引用對應name的模板，數據的傳入則使用data屬性，數據寫法類似於react的屬性延展式寫法。
注意：屬性都是要加“雙引號”的，即使是表達式，數據如下：
Page({
data: {
item: {
index: 0,
msg: 'this is a template',
time: '2016-09-15'
}
}
})
5、事件機制
什麼是事件？
1）事件是視圖層到邏輯層的通訊方式。
2）事件可以將用戶的行為反饋到邏輯層進行處理。
3）事件可以綁定在組件上，當達到觸發事件，就會執行邏輯層中對應的事件處理函數。
4）事件對象可以攜帶額外信息，如 id, dataset, touches。
事件綁定：
在wxml的標籤中進行事件綁定主要有兩種方式：bind+事件名 或者 touch+事件名
1）bind
bind+事件名可以綁定一個事件處理函數，函數傳入參數即為事件對象
示例：
如上，通過bindtap，綁定一個觸摸點擊事件，tap為小程序封裝的一個事件名。在Page函數的參數中，定義對應的事件響應函數，id，dataset，touches是事件對象攜帶的信息。
Page({
showMe: function(event) {
console.log(event)
}
})
事件對象event是小程序包裝過的對象，其中常用的是currentTarget屬性：dataset中存放了在標籤中通過data-自定的屬性值 key即為data-中*定義的內容，value即為對應的值，touches:中存放了事件觸發的具體信息
2）catch
catch+事件名 ：是綁定事件的另一種方法
Page({
handleTap1:function(e){
console.log(e)
}
})
3）catch和bind的區別
二者都用於綁定事件，但bind不能阻止事件冒泡，而catch方法可以阻止事件冒泡
冒泡事件：當一個組件上的事件被觸發後，該事件會向父節點傳遞。
非冒泡事件：當一個組件上的事件被觸發後，該事件不會向父節點傳遞。
冒泡事件：touchstart,touchmove,touchcancel,touchend,tap,longtap
4）事件對象
如上2：打印出的事件對象具有多個屬性
type:事件類型，timeStamp：事件時間戳，target：事件源 currentTarget:事件綁定的組件
6、樣式表wxss
6.1 引入模板：小程序提供了兩個引入外部模板的方法：import和include，使用外部模板可以實現大部分共同頁面的代碼利用，在一個app中，頭部和腳部基本不會 變動太大，這時就可以通過模板的方式引入，實現多個頁面的複用。
1）import
示例：
引入：
注意：import有作用域，即import引入的模板只在當前頁面有效，即import不會向下查找另外的模板
2）include
include標籤可以看作是對 “html”的一個拷貝，即將外部的wxml片段拷貝進文檔中
示例：
外部wxml片段
引入：
總結：import是引入模板片段，且有作用域限制，不能進行模板嵌套。include是引入wxml片段，相當於代碼拷貝。
小程序中，頁面樣式的渲染通過wxss文件實現，.wxss可以看成是css，因為它們都在實現相同的功能。實質上wxss也是在css的基礎之上進行了擴充和修改得到的。wxss在css上的擴展特性：
1）尺寸單位：rpx
rpx：是一個相對像素單位，可以根據屏幕寬度進行自適應。
針對移動端的開發，設計稿一般都是以iphone6為標準的。而iphone用的是視網膜屏，即我們css中設定的1px，在iphone上實際是由2px*2px的像素點組成的。
以iphone6為準，屏幕寬度375px，共有750個物理像素，則750rpx=350px,即1rpx=0.5px
2）樣式導入 @import
跟在css中的外部樣式表的導入類似：@import "common.wxss";
7、組件
什麼是組件？
1）組件是視圖層的基本組成單元。
2）組件自帶一些功能與微信風格的樣式。
3）一個組件通常包括開始標籤和結束標籤，屬性用來修飾這個組件，內容在兩個標籤之內。
注意：所有組件與屬性都是小寫，以連字符-連接
組件的屬性：
所有組件都有如下的屬性：id,class,style,hidden(組件是否顯示)，data-（自定義屬性），bind/catch*（事件綁定）。
小程序中，基礎組件分為了七大類：視圖容器、基礎內容、表單組件、導航、多媒體、地圖、畫布、客服會話。
7.1 視圖容器 view
view組件是很常用的一個標籤
7.2 button組件
button組件在微信官方API中屬性表單組件的一部分。通過小程序提供的樣式屬性就可以實現基本的按鈕樣式。
7.3 icon 列表
小程序中封裝了一些常用的圖標icon。有三個屬性可以對icon樣式進行設置：
> type:icon類型，有效值有success, success_no_circle, info, warn, waiting, cancel, download, search, clear
> size：單位px
> color:與css的color值一致
7.4 image組件
在小程序中，可以通過image組件的mode屬性控制圖片的顯示。mode共有13種模式，其中有4種縮放模式，9種裁剪模式
1）、縮放模式（當圖片寬高與設定的image寬高不一致時）
scaleToFill:不保持縱橫比縮放圖片，使圖片拉伸至填滿image元素
aspectFit:保持縱橫比縮放，使長邊完全填滿圖片
aspectFill：保持縱橫比縮放，使短邊完全顯示出來
widthFix:寬度不變，高度自動變化，保持原圖寬高比不變
2)、裁剪模式
當圖片超出image設定的寬高時所做的處理
top:不縮放圖片，只顯示圖片的頂部區域
bottom:不縮放圖片，只顯示圖片的底部區域
center:不縮放圖片，只顯示圖片的中間區域
left 不縮放圖片，只顯示圖片的左邊區域
right 不縮放圖片，只顯示圖片的右邊區域
8、數據綁定
在微信小程序中提供了類似於模板引擎的方法來實現數據的綁定。從而動態控制頁面顯示內容。
注意：這是單向數據綁定，即只能在js裡來控制wxml裡的數據，而不能通過視圖層的數據變化來直接改變model層數據的變化。
1）數據綁定
在小程序中，通過{{}}將js中初始的數據綁定到視圖中
1.1）簡單綁定：
Page({
data:{
msg:'hello world'
}
})
如上：在js中通過data屬性進行數據的初始化，在wxml中通過{{}}表達式將數據綁定到視圖
注意：
1、數據值作為組件（標籤）的屬性進行綁定時，要寫在“雙引號”之內
2、針對布爾值true,false要用表達式來寫，例如checkbox的checked屬性，不能直接寫checked=”false”,這樣計算出來的結果是字符串，轉換來布爾值還是true，因此使用checked={{false}}來設置checkbox的是否選中屬性
1.2）{{}}內的運算：
1.2.1）在{{}}內可以進行值的運算，包括算數運算，三元運算，字符串的運算，以即邏輯判斷
1.2.2）{{}}內可以對數據進行組合，例如下面代碼：
A、數組與屬性的組合
Page({
data: {
zero: 0
}
})
B、對象組合
Page({
data: {
a: 1,
b: 2
}
})
最終組合成的對象是 {for: 1, bar: 2}
2）條件渲染 wx:if
通過wf:if判斷一個表達式的方式來控制標籤的顯示與否，wf:if添加在標籤上，傳入一個判斷表達式，實現條件判斷
例：如下簡單示例,前兩條都為false所以走else這條，最終頁面只會顯示3
進階：因為 wx:if 是標籤內的。但項目中經常需要判斷的不是一個標籤的顯示與否，而是一塊兒區域，這裡可以通過標籤將多個組件包裝起來，在block標籤中使用wx:if來控制元素的顯示。
注意：並不是一個組件，它僅僅是一個包裝元素，不會在頁面中做任何渲染，只接受控制屬性。
例：
3）列表渲染 wx:for
在組件上用wx:for使用數組中各項的數據重複渲染該組件。
3.1)默認數組的當前項的下標變量名默認為index，數組當前項的變量名默認為item
3.2)wx:for-item用於指定數組當前元素的變量名，wx:for-index用於指定數組當前下標的變量名：
3.3)wx:for可以進行嵌套使用
例：九九乘法表
{{i}} * {{j}} = {{i * j}}
進階：使用標籤包裝多節點的結構
注意：在使用wx:for遍歷數組時，會報一個需指定wx:key的警告，此警告的作用指當用戶所遍歷的數據是會動態改變的或者有新項目添加到列表中時，需要有一個key來與之前的數據做參考對比。
Page({
data:{
arrs:[1,2,3,4,5,6]
}
})
如上是一個簡單的數據遍歷示例，wx:key的值可以有兩種形式：
A）就如上面一樣用this，指帶當前for循環中的item本身（即用item本身作為遍歷的標識）
B）字符串，代表在 for 循環的 array 中 item 的某個 property，該 property 的值需要是列表中唯一的字符串或數字，且不能動態改變。
4）模板template
定義模板：
姓名：{{item.name}} 年齡：{{item.age}}
Page({
data:{
user:[
{ name:"小強", age:18 },
{ name:"小明", age:18 },
{ name:"小紅", age:18 },
{ name:"小花", age:18 }
]
}
})
使用模板：
補充：運算符{{…object}}可以將object展開傳入到視圖中進行渲染。
閱讀更多 熱血萌寵 的文章
