组件化开发

小程序在未出现组件之前，要重用的话，只能简单（复制）粗暴（黏贴）组件化开发的优势：1、可复用（wxml/wxss/js）2、代码分离，可维护（更重要）

• 定义组件

先创建components文件夹：用于存放组件，然后再创建组件文件夹

注意：

组件的文件名并不是组件名，而页面文件名是页面名，组件名是引用时才确定的

• 引入与使用组件

页面先引用后使用在页面的配置文件（.json）中引入组件{    "usingComponents": {        "组件名"："/components/tab/index"    }}在页面中使用组件
    <组件名 />

• 全局样式的继承

（定义在app.wxss中）全局样式，页面是全部继承的，而自定义组件只是部分继承**全局样式一般设置字体和字体大小

只支持font、color样式组件可以继承，其他样式不继承

• 组件设计原则

1、尽量不要留空白间距

• 组件事件与绑定

1、给组件绑定事件（.wxml）
    
     components/love/index.wxml
    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:touchmovecatch:tap/catch:touchmovebind与catch的区别bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

• 事件分类

事件分为页面事件和组件事件页面事件主要写在页面中，在页面wxml内组件先绑定事件bind:tap，在js中再绑定事件处理函数组件事件主要写在组件中，在组件wxml内组件先绑定事件bind:tap，在js中再绑定事件处理函数**页面与组件在事件绑定和处理上是完全独立的2个部分，互相没有关联，也不能互换**组件的事件可以冒泡到页面上去

• 自定义事件激活及处理

// 自定义事件激活this.triggerEvent('myevent', {    param:"wutao"}, {});// 第一个参数：自定义事件名称// 第二个参数：detail对象，自定义数据（传参数）// 第三个参数：触发事件的选项// 自定义事件处理：在页面wxml的组件调用标签处写下如下代码
    

新布局

flex 新一代布局样式，以前很难实现的布局，现在变简单了

• 注意

1、元素本身不会因为display:flex而改变原本块状或行间特性2、flex下的item元素会变成行间特性（原本块状特性改变）

新单位

rpx 是小程序提供的一种自适应单位，与iphone6的尺寸是1:1，

推荐设计稿以IPHONE6为原型

---

rpx 与 px 的区别是什么？1、px不会自适应，无论什么机型，什么尺寸屏幕都是一个大小，有些字体不随设备屏幕发生变化时使用px2、rpx会自适应，根据机型发生相应改变

Promise

• 串行请求（请求之间有依赖）

// 请求1let req1 = new Promise((resolve, reject) => {});// 请求2let req2 = new Promise((resolve, reject) => {});// 请求3let req3 = new Promise((resolve, reject) => {});// 要求执行顺序1、2、3req1.then(res => {    return req2;}).then(res => {    return req3;});

• 并行请求（请求之间无依赖）

// 请求1let req1 = new Promise((resolve, reject) => {});// 请求2let req2 = new Promise((resolve, reject) => {});// 请求3let 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 => {});

• 复合请求（既有串，也有并）

// 请求1let req1 = new Promise((resolve, reject) => {});// 请求2let req2 = new Promise((resolve, reject) => {});// 请求3let 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()方法// 有返回值valresolve(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.wxsvar foo = "'hello world' from tools.wxs";var bar = function (d) {  return d;}module.exports = {  FOO: foo,  bar: bar,};module.exports.msg = "some msg";
    
    
    
      {
   {tools.msg}} 
    
    
      {
   {tools.bar(tools.FOO)}} 
    2、使用
    
     标签（在wxml中）
     
     
      var msg = "hello world";module.exports.message = msg;
     
     
       {
   {m1.message}} 
     
    

注意事项

1、CSS选择器其实比官方文档支持得更多2、自定义组件的容器如果是行间元素，那么最外层元素会有最小高度21px，所以请尽量使用块状元素作为容器3、wxml不但可以获取对象的属性，还可以获取具体数组元素
    
     {
   {arr[0]}}
    
    
     {
   {obj.pro}}