组件化开辟
小递次在未涌现组件之前，要重用的话，只能简朴（复制）粗犷（黏贴）
组件化开辟的上风：
1、可复用（wxml/wxss/js）
2、代码星散，可保护（更重要）- 定义组件
先建立components文件夹：用于寄存组件，然后再建立组件文件夹
注重：
组件的文件名并非组件名，而页面文件名是页面名，组件名是引用时才肯定的
- 引入与运用组件
页面先引用后运用
在页面的配置文件（.json）中引入组件
{
"usingComponents": {
"组件名"："/components/tab/index"
}
}
在页面中运用组件
<组件名 />- 全局款式的继续
（定义在app.wxss中）全局款式，页面是悉数继续的，而自定义组件只是部份继续
**全局款式平常设置字体和字体大小
只支撑font、color款式组件能够继续，其他款式不继续
- 组件设想准绳
1、只管不要留空缺间距- 组件事宜与绑定
1、给组件绑定事宜（.wxml）
<text bind:tap="tapLove">components/love/index.wxml</text>
2、完成组件事宜处置惩罚函数（.js）
methods: {
tapLove(ev){
console.log(ev);
}
}- 组件data与properties的区分
页面只要data，而组件有data和properties
data与properties中的数据都能够在组件中举行单向数据绑定
道理：
与页面实在一样，小递次编译后，data与properties将会和并成一个data
（假如data中与peoperties中有重名数据，优先peoperties）
所以举行动态数据绑定照样运用this.setData()要领
运用准绳：
data：内部数据
properties：外部数据（页面挪用组件，通报进来的数据，不通报就运用默认值）- 组件猎取外部数据的门路
1、经由过程组件属性（吸收参数，而页面是经由过程onLoad(options)吸收）
2、经由过程getApp().globalData.xxx 猎取全局数据
3、经由过程缓存猎取全局数据- 组件与营业逻辑
究竟营业逻辑是放在组件中照样该放在页面中？
由于组件是可复用的，每一个页面都能够运用同一个组件，此时须要看清楚这个营业逻辑是 **共有** 照样 **特征** 的
共有的必需写在组件内（比方款式）
特征的必需写在页面中（比方请求URL）- observer函数
组件的属性值被更改时的响应函数，注重假如在observer函数中运用this.setData()修正自身属性可能发作死循环致使内存溢出
插件开辟
事宜与事宜处置惩罚
- 事宜作用
1、事宜是视图层到逻辑层的通信体式格局（小递次内置事宜）
2、组件与页面的通信（自定义事宜）- 小递次内置事宜
长按事宜：longpress
点击事宜：tap
触摸行动最先：touchstart
触摸后挪动：touchmove
触摸行动完毕：touchend
另有各个组件上都有各自特定的事宜- 事宜绑定（绑定事宜处置惩罚函数）
有2种体式格局：bind、catch
不管是内置照样自定义事宜，都是运用这类体式格局
写法：
bind:tap/bind:touchmove
catch:tap/catch:touchmove
bind与catch的区分
bind事宜绑定不会阻挠冒泡事宜向上冒泡，catch事宜绑定能够阻挠冒泡事宜向上冒泡。- 事宜分类
事宜分为页面事宜和组件事宜
页面事宜重要写在页面中，在页面wxml内组件先绑定事宜bind:tap，在js中再绑定事宜处置惩罚函数
组件事宜重要写在组件中，在组件wxml内组件先绑定事宜bind:tap，在js中再绑定事宜处置惩罚函数
**页面与组件在事宜绑定和处置惩罚上是完整自力的2个部份，相互没有关联，也不能交换
**组件的事宜能够冒泡到页面上去- 自定义事宜激活及处置惩罚
// 自定义事宜激活
this.triggerEvent('myevent', {
param:"wutao"
}, {});
// 第一个参数：自定义事宜称号
// 第二个参数：detail对象，自定义数据（传参数）
// 第三个参数：触发事宜的选项
// 自定义事宜处置惩罚：在页面wxml的组件挪用标签处写下以下代码
<c-love bind:myevent="onMyEvent" />新规划
flex 新一代规划款式，之前很难完成的规划，如今变简朴了- 注重
1、元素自身不会由于display:flex而转变底本块状或行间特征
2、flex下的item元素会变成行间特征（底本块状特征转变）新单元
rpx是小递次供应的一种自适应单元，与iphone6的尺寸是1:1，
引荐设想稿以IPHONE6为原型
rpx 与 px 的区分是什么？
1、px不会自适应，不管什么机型，什么尺寸屏幕都是一个大小，有些字体不随装备屏幕发作变化时运用px
2、rpx会自适应，依据机型发作响应转变Promise
- 串行请求（请求之间有依靠）
// 请求1
let req1 = new Promise((resolve, reject) => {});
// 请求2
let req2 = new Promise((resolve, reject) => {});
// 请求3
let req3 = new Promise((resolve, reject) => {});
// 请求实行递次1、2、3
req1.then(res => {
return req2;
}).then(res => {
return req3;
});- 并行请求（请求之间无依靠）
// 请求1
let req1 = new Promise((resolve, reject) => {});
// 请求2
let req2 = new Promise((resolve, reject) => {});
// 请求3
let req3 = new Promise((resolve, reject) => {});
// 请求并行实行1、2、3 悉数实行完才实行then中的回调函数
Promise.all([req1, req2, req3])
.then(res => {
});
// 请求并行实行1、2、3 谁先实行完就实行then中的回调函数
Promise.race([req1, req2, req3])
.then(res => {
});- 复合请求（既有串，也有并）
// 请求1
let req1 = new Promise((resolve, reject) => {});
// 请求2
let req2 = new Promise((resolve, reject) => {});
// 请求3
let req3 = new Promise((resolve, reject) => {});
let req4 = req1.then(res => {
return req2;
})
// 请求串行实行1、2，与3并行实行
Promise.all([req4, req3])
.then(res => {
});
// 请求串行实行1、2，与3并行实行
Promise.race([req4,, req3])
.then(res => {
});- then中的返回值
有4种状况：
1、返回Promise
2、返回详细的值
3、不返回
4、抛毛病
不管2照样3，then都邑返回一个Promise对象，而且对象中实行resolve()要领
// 有返回值val
resolve(val)
// 不返回
resolve(undefined)
**所以背面then都邑实行第一个函数- catch
catch为then的语法糖，它是then(null, rejection)的别号。
也就是说，catch也是then，它用于捕捉毛病，它的参数也就是是then的第二个参数。
所以，假定catch中假如return 值的话，新的Promise对象也会是接收状况。
var example = new Promise((fulfill, reject)=>{
let i = 1;
reject(i);
})
example
.catch(()=>{console.log('我是第一个catch的回调函数'); return 1;})
.then(() =>{console.log('我是第一个then的回调函数'); throw Error })
.catch(()=>{console.log('我是第二个catch的回调函数')})
.then(() => {console.log('我是第二个then的回调函数')})
挪用reject函数后，promise变成rejected状况，故实行第一个catch的回调函数
第一个catch的回调函数return 1，故实行第一个then的回调函数
第一个then的回调函数throw Error，故实行第二个catch的回调函数
第二个catch的回调函数ruturn undefined（如上文所言），故实行第二个then的回调函数自定义登录态
请求封装
全局款式
全局款式写在：app.wxss
page{
color: #999999;
font-size: 33rpx;
}wxs页面剧本
- wxs作用
1、页面衬着
2、数据处置惩罚
**wxs能够运用js替代，是不是替代取决于个人决议
**wxs相似html页面中内嵌js代码
**wxml文件内部不能编写js或挪用js，假如想挪用，必需运用wxs- wxs运用两种体式格局
1、运用.wxs文件（可重用性更好）
// /pages/tools.wxs
var foo = "'hello world' from tools.wxs";
var bar = function (d) {
return d;
}
module.exports = {
FOO: foo,
bar: bar,
};
module.exports.msg = "some msg";
<!-- page/index/index.wxml -->
<wxs src="./../tools.wxs" module="tools" />
<view> {{tools.msg}} </view>
<view> {{tools.bar(tools.FOO)}} </view>
2、运用<wxs>标签（在wxml中）
<!--wxml-->
<wxs module="m1">
var msg = "hello world";
module.exports.message = msg;
</wxs>
<view> {{m1.message}} </view>注重事项
1、CSS选择器实在比官方文档支撑得更多
2、自定义组件的容器假如是行间元素，那末最外层元素会有最小高度21px，所以请只管运用块状元素作为容器
3、wxml不只能够猎取对象的属性，还能够猎取详细数组元素
<text>{{arr[0]}}</text>
<text>{{obj.pro}}</text>