還是一如既往的 寫給自己看，當做筆記。畢竟官網是如此的詳細。
前文已經將一系列的頁面監聽寫了一下 ，這里再補充一些點。
1.onShareAppMessage()方法定義了之后 右上角才有轉發的按鈕
2.bindTap即點擊事件，可以調用自己在js寫好的方法。
3.setData的參數 通過key:value模式傳遞
4.像Page之類的有data 跟回調，還有一系列自定義的方法。小括號里面帶著大括號，里面想放什么都可以。
頁面路由
1.所有頁面的路由都由框架管理
2.他所謂的路由就是指頁面行為的意思嗎？
3.頁面棧跟java的活動棧一樣，第一個是首頁，最后一個是當前界面
4.文檔建議不要修改頁面棧，那豈不是不能跟android一樣隨便玩了。
5.在App.onLaunch（）方法中還沒生成頁面棧，即不能調用getCurrentPages()
6.打開第一個頁面的時候 頁面棧才會初始化
7.所謂的頁面重定向是指 銷毀當前界面+打開新頁面
8.還有一種特殊的模式：重加載。頁面全部出棧，只留下新的頁面。
9.getCurrentPage()獲取當前頁面棧
10.跳轉是用wx.navigateTo()，wx.rediectTo()
后者是重定向。
11. 第十條說的方法都不能打開有tabBar的界面
12.要打開有tabBar的界面需要用到wx.switchTo()
13.reLaunch()可以打開任何界面，但是他是重加載 參考第8條。
14.頁面返回 可以調用 wx.nagivateBack(),左上角的按鈕不需要自己設置
15.跳轉設置的參數可以在onLoad()方法中獲取
文件作用域
1.全局數據可以設置在App（）中
2.默認寫在文件里面的 肯定作用域是單獨一個文件，所以不同文件里面可以有相同名字的變量
模塊化
1.精煉出一些公用的方法，寫在公共js里面，然后特殊處理一下，就可以對外提供這些方法了。很類似工具類
2.第一條所說的一般也是寫在工具包里面的。
3.在公共.js里面實現好方法，然后加上 module.exports.方法名 = 方法名 ，這樣再在使用的地方 require（'公共.js'），就可以用這些對外暴露的方法了
// common.js
function sayHello(name) {
console.log(`Hello ${name} !`)
}
function sayGoodbye(name) {
console.log(`Goodbye ${name} !`)
}
module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbye
//用的時候
var common = require('common.js')
Page({
helloMINA: function() {
common.sayHello('MINA')
},
goodbyeMINA: function() {
common.sayGoodbye('MINA')
}
})
API
都是用wx來調用這些方法的
1.就是說命名規范跟規則了
2.監聽api ：命名on開頭，接受一個回調函數
3.同步api：以Sync來結尾，同步 API 的執行結果可以通過函數返回值直接獲取，如果執行出錯會拋出異常。同步意思就是即時處理。
4.異步api：大部分api都是異步的。這類 API 接口通常都接受一個 Object 類型的參數
1.success 成功回調
2.fail 失敗回調
3.complete 完成回調 1跟2之后都會走這個
wx.login({
success(res) {
console.log(res.code)
}
})
1.視圖層：WXML+WXSS
2.將邏輯層的數據反應成視圖，同時將視圖層的事件發送給邏輯層。
3.組件(Component)是視圖的基本組成單元。
WXML
1.數據綁定
wxml里面的動態數據也必須來自Page里面的data
就這樣 直接用js里面的數據 即數據綁定
<view>{{message}}</view> //內容
<view id="item-{{id}}"> </view>//組件屬性 必須在雙引號里面
<view wx:if="{{condition}}"> </view>//控制屬性 必須在雙括號里面
<checkbox checked="{{false}}"> </checkbox>//不要直接寫 checked="false"，其計算結果是一個字符串，轉成 boolean 類型后代表真值。
Page({ //Page即js文件打頭的，如果里面的數據多樣化 就要用{}包一下
data:{//同樣如此 里面數據不止一個 都要用{}包一下
message:'fuck you' //用key value的形式存放起來
id: 0
condition：true
}
})
//另外 如果要各種運算公式的話 也必須寫在{{}}里面
<view hidden="{{flag ? true : false}}"> Hidden </view>
<view wx:if="{{length > 5}}"> </view>//邏輯判斷也如此
2.列表渲染
就需要用到for語句了 wx:for
在組件上使用 wx:for 控制屬性綁定一個數組，即可使用數組中各項的數據重復渲染該組件。
默認數組的當前項的下標變量名默認為 index，數組當前項的變量名默認為 item
<view wx:for="{{array}}"> {{item}} </view>
<view wx:for="{{array}}">
{{index}}: {{item.message}}
</view>
Page({
data: {
array: [{
message: 'foo',
}, {
message: 'bar'
}]
}
})
使用 wx:for-item 可以指定數組當前元素的變量名，
使用 wx:for-index 可以指定數組當前下標的變量名：
意思就是別名啦
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{itemName.message}}
</view>
wx:for 也可以嵌套，下邊是一個九九乘法表
<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
<view wx:if="{{i <= j}}">
{{i}} * {{j}} = {{i * j}}//這么一看 view不一定會產生控件
</view>
</view>
</view>
block 一個多節點的結構塊
<block wx:for="{{[1, 2, 3]}}">
<view> {{index}}: </view>
<view> {{item}} </view>
</block>
3.條件渲染
wx:if
在框架中，使用 wx:if="{{condition}}" 來判斷是否需要渲染該代碼塊
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>
//意味著上面只會展示一個
wx:if是一個控制屬性 他需要放置在一個組件上面，如果需要一次性判斷多個組件標簽，那么需要將這些組件包裹起來，這個時候可以用<block>
<block wx:if="{{true}}">//并不是一個組件，它僅僅是一個包裝元素，不會在頁面中做任何渲染，只接受控制屬性
<view> view1 </view>
<view> view2 </view>
</block>
wx:if在最初判斷為false的時候 是不會渲染組件的
hidden是始終會渲染 但是控制組件的顯隱
Page({
data: {
view: 'MINA'
}
})
4.模板
類似于重復代碼塊，設置后可以在多個地方直接使用
<!--wxml-->
<template name="staffName">//給模板命名咯 聲明模板的名字
<view>
FirstName: {{firstName}}, LastName: {{lastName}}//想要用data里面的數據 還是要用{{}}包裹一下
</view>
</template>
<template is="staffName" data="{{...staffA}}"></template>//is 來確定模板類名，...是擴展運算符 來將一個對象打開
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>
// page.js
Page({
data: {//數據就是要用json格式
staffA: {firstName: 'Hulk', lastName: 'Hu'},
staffB: {firstName: 'Shang', lastName: 'You'},
staffC: {firstName: 'Gideon', lastName: 'Lin'}
}
})
is后面可以跟判斷句 來決定自己究竟用哪個模板
<block wx:for="{{[1, 2, 3, 4, 5]}}">
<template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>//even 跟odd都是一個模板
模板擁有自己的作用域，只能使用 data 傳入的數據以及模版定義文件中定義的 <wxs /> 模塊。//這句話沒看懂？
5.事件
事件即用戶行為，從視圖層反饋到邏輯層進行處理后再展示到視圖層上
事件對象可以攜帶額外信息，如 id, dataset, touches。
<view bindtap="add"> {{count}} </view>//綁定點擊事件
Page({
data: {
count: 1
},
add: function(e) {//方法參數 是可以直接設置在view上的
this.setData({
count: this.data.count + 1
})
}
})
<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>
//這樣 id 跟hi對應的value 都是可以拿到的
//事件還分 冒泡事件跟非冒泡事件 差別就是前者觸發后會向父類傳遞
//其他組件自定義事件如無特殊聲明都是非冒泡事件
//事件綁定的寫法同組件的屬性，以 key、value 的形式
//key 以bind或catch開頭，然后跟上事件的類型，如bindtap、catchtouchstart,所以說bindtap 其實是 bind tap ，tap為冒泡事件：手指觸摸后馬上離開.還可以攜程bind:tap
.
//bind事件綁定不會阻止冒泡事件向上冒泡，catch事件綁定可以阻止冒泡事件向上冒泡。
//這個例子中，點擊 inner view 會先后調用handleTap3和handleTap2(因為tap事件會冒泡到 middle view，而 middle view 阻止了 tap 事件冒泡，不再向父節點傳遞)，點擊 middle view 會觸發handleTap2，點擊 outer view 會觸發handleTap1。
<view id="outer" bindtap="handleTap1">
outer view
<view id="middle" catchtap="handleTap2">
middle view
<view id="inner" bindtap="handleTap3">
inner view
</view>
</view>
</view>
//事件捕獲 capture-bind、capture-catch關鍵字，后者將中斷捕獲階段和取消冒泡階段
//事件傳遞的時候會有基礎屬性
type/timeStamp/target/currentTarget/detail
target里面有個屬性為dataset（事件源組件上由data-開頭的自定義屬性組成的集合）
currentTarget(事件綁定的當前組件。)里面也有個屬性叫dataset(當前組件上由data-開頭的自定義屬性組成的集合)
detail為自定義事件所攜帶的數據，如表單組件的提交事件會攜帶用戶的輸入，媒體的錯誤事件會攜帶錯誤信息。
6.引用
WXML 提供兩種文件引用方式import和include。
import可以在該文件中使用目標文件定義的template
<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>//那個模板名字就是item
import 有作用域的概念，即只會 import 目標文件中定義的 template，而不會 import 目標文件 import 的 template。
C import B，B import A，在C中可以使用B定義的template，在B中可以使用A定義的template，但是C不能使用A定義的template。
include 可以將目標文件除了 <template/> <wxs/> 外的整個代碼引入，相當于是拷貝到 include 位置