还是一如既往的 写给自己看，当做笔记。毕竟官网是如此的详细。
前文已经将一系列的页面监听写了一下 ，这里再补充一些点。
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 位置