组件化开发
小程序在未出现组件之前，要重用的话，只能简单（复制）粗暴（黏贴）
组件化开发的优势：
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>