1.頁面配置
- navigationStyle：導航欄樣式，僅支持以下值：
- default 默認樣式
- custom 自定義導航欄疫赎，只保留右上角膠囊按鈕
2.計算導航欄的高度
2-1.wx.getMenuButtonBoundingClientRect
wx.getMenuButtonBoundingClientRect
獲取菜單按鈕（右上角膠囊按鈕）的布局位置信息糠赦。坐標信息以屏幕左上角為原點锅铅。
- height：高度，單位：px绍在。
- top：上邊界坐標，單位：px。
2-2.wx.getSystemInfo
獲取系統(tǒng)信息枣购。
- statusBarHeight：狀態(tài)欄的高度，單位px擦耀。
2-3.計算
導航欄的高度 = 狀態(tài)欄高度 + 菜單按鈕高度 + 菜單按鈕的上下間隔的高度
3.基礎(chǔ)組件
3-1.什么是組件
什么是組件：
- 組件是視圖層的基本組成單元棉圈。
- 組件自帶一些功能與微信風格一致的樣式。
- 一個組件通常包括 開始標簽 和 結(jié)束標簽眷蜓，屬性 用來修飾這個組件分瘾，內(nèi)容 在兩個標簽之內(nèi)。
注意：所有組件與屬性都是小寫吁系，以連字符-連接
<組件 屬性1="" 屬性2="" ... >
組件內(nèi)容
</組件>
3-2.屬性類型
3-3.公共屬性
id, class, style, hidden, data-*, bind*/catch*
4.數(shù)據(jù)綁定
數(shù)據(jù)綁定使用 Mustache 語法（雙大括號）將變量包起來德召。
4-1.組件內(nèi)容
<view> {{ message }} </view>
Page({
data: {
message: 'Hello MINA!'
}
})
4-2.組件屬性(需要在雙引號之內(nèi))
<view id="item-{{id}}"> </view>
Page({
data: {
id: 0
}
})
4-3.控制屬性(需要在雙引號之內(nèi))
<view wx:if="{{condition}}"> </view>
Page({
data: {
condition: true
}
})
4-4.關(guān)鍵字(需要在雙引號之內(nèi))
true：boolean 類型的 true，代表真值汽纤。
false： boolean 類型的 false上岗，代表假值。
<checkbox checked="{{false}}"> </checkbox>
特別注意：不要直接寫 checked="false"蕴坪，其計算結(jié)果是一個字符串肴掷，轉(zhuǎn)成 boolean 類型后代表真值。
4-5.運算
可以在 {{}} 內(nèi)進行簡單的運算背传。
4-6.擴展運算符
擴展運算符 ... 來將一個對象展開
<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>
Page({
data: {
obj1: {
a: 1,
b: 2
},
obj2: {
c: 3,
d: 4
}
}
})
最終組合成的對象是 {a: 1, b: 2, c: 3, d: 4, e: 5}呆瞻。
5-3.事件對象
target：觸發(fā)事件的源組件。
dataset:事件源組件上由data-開頭的自定義屬性組成的集合径玖。currentTarget：事件綁定的當前組件痴脾。
6.WXSS
6-1.尺寸單位
rpx: iPhone6 上，屏幕寬度為375px挺狰，共有750個物理像素明郭，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素丰泊。
建議： 開發(fā)微信小程序時設(shè)計師可以用 iPhone6 作為視覺稿的標準薯定。
6-2.選擇器
- .class：類選擇器。
-
id：id選擇器瞳购，具有唯一性话侄。
- element：組件選擇器。
6-3.樣式的三種方式
- 內(nèi)聯(lián)(行內(nèi))樣式 --- 通過 style 設(shè)置。
- 全局樣式
定義在 app.wxss 中的樣式為全局樣式年堆，作用于每一個頁面吞杭。 - 局部(頁面)樣式
在 page 的 wxss 文件中定義的樣式為局部樣式，只作用在對應(yīng)的頁面变丧，并會覆蓋 app.wxss 中相同的選擇器芽狗。
優(yōu)先級：行內(nèi)樣式 > 頁面樣式 > 全局樣式。
注意：一般靜態(tài)的樣式統(tǒng)一寫到 class 中痒蓬。style 接收動態(tài)的樣式童擎。
6-4.定位
display --- 規(guī)定元素應(yīng)該生成的框的類型。
inline --- 默認攻晒。此元素會被顯示為內(nèi)聯(lián)元素顾复，元素前后沒有換行符。
flex --- 微信小程序建議用鲁捏。
inline-block --- 行內(nèi)塊元素 芯砸。-
position
static --- 默認，沒有定位给梅。
absolute --- 生成絕對定位的元素假丧，相對于 static 定位以外的第一個父元素進行定位。 - 絕對定位的元素是相對離它最近的一個已定位的父級元素進行定位破喻。---> 父級元素是否已經(jīng)定位看是否設(shè)置了 position虎谢。relative --- 生成相對定位的元素
。
---> 相對定位的元素是在原來的位置上相對自己做了一個偏移曹质。
fixed --- 元素會被移出正常文檔流婴噩，并不為元素預(yù)留空間，而是通過指定元素相對于屏幕視口（viewport）的位置來指定元素位置羽德。元素的位置在屏幕滾動時不會改變几莽。
sticky --- 粘性定位，該定位基于用戶滾動的位置宅静。它的行為就像 position:relative; 而當頁面滾動超出目標區(qū)域時章蚣，它的表現(xiàn)就像 position:fixed;，它會固定在目標位置姨夹。
6-5.盒子
微信建議使用flex纤垂。
flex --- 復合屬性。設(shè)置或檢索彈性盒模型對象的子元素如何分配空間磷账。
flex:1 --- 讓所有彈性盒模型對象的子元素都有相同的長度峭沦，忽略它們內(nèi)部的內(nèi)容。flex-direction --- 該屬性通過定義flex容器的主軸方向來決定felx子項在flex容器中的位置 逃糟。
column --- 設(shè)置主軸為垂直方向吼鱼。
row --- 默認蓬豁。設(shè)置主軸為水平方向。justify-content --- 元素在主軸上的對齊方式菇肃。
flex-start（默認地粪，與開始位置對齊）、flex-end（與結(jié)束位置對齊）琐谤，元素排列順序不變蟆技。
baseline
center（居中對齊）。
space-around（元素平分所有空間笑跛，并且單個元素在自己的空間里面居中）付魔。
space-between（與 space-around 一樣，只是兩邊靠邊）飞蹂。align-items --- 元素在交叉軸上的對齊方式。
align-self --- 定義交叉軸方向元素自身的對齊方式翻屈。
flex-wrap --- 控制flex容器是單行或者多行陈哑。
nowrap --- 默認。規(guī)定靈活的項目不拆行或不拆列伸眶。
wrap --- 規(guī)定靈活的項目在必要的時候拆行或拆列惊窖。
6-6.用戶界面
- box-sizing
border-box --- 通過從已設(shè)定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度。
控件超過了父view的界限厘贼，就用這個屬性限制
6-7.邊框
- border-radius --- 圓角邊框 界酒。
- border-top: --- 復合屬性。設(shè)置對象頂部邊框的特性嘴秸。
可以按順序設(shè)置如下屬性： border-top-width, border-top-style, and border-top-color毁欣。
例如：12rpx solid #f7f7f7;
solid --- 實線 。
dashed --- 虛線岳掐。
