摘要：組件化開發(fā)小程序在未出現(xiàn)組件之前，要重用的話，只能簡單復(fù)制粗暴黏貼組件化開發(fā)的優(yōu)勢可復(fù)用代碼分離，可維護(hù)更重要定義組件先創(chuàng)建文件夾用于存放組件，然后再創(chuàng)建組件文件夾注意組件的文件名并不是組件名，而頁面文件名是頁面名，組件名是引用時才確定的引

小程序在未出現(xiàn)組件之前，要重用的話，只能簡單（復(fù)制）粗暴（黏貼）

組件化開發(fā)的優(yōu)勢：
1、可復(fù)用（wxml/wxss/js）
2、代碼分離，可維護(hù)（更重要）

定義組件

先創(chuàng)建components文件夾：用于存放組件，然后再創(chuàng)建組件文件夾
注意：組件的文件名并不是組件名，而頁面文件名是頁面名，組件名是引用時才確定的

引入與使用組件

頁面先引用后使用

在頁面的配置文件（.json）中引入組件
{
    "usingComponents": {
        "組件名"："/components/tab/index"
    }
}

在頁面中使用組件
<組件名 />

全局樣式的繼承

（定義在app.wxss中）全局樣式，頁面是全部繼承的，而自定義組件只是部分繼承

**全局樣式一般設(shè)置字體和字體大小

只支持font、color樣式組件可以繼承，其他樣式不繼承

組件設(shè)計(jì)原則

1、盡量不要留空白間距

組件事件與綁定

1、給組件綁定事件（.wxml）
components/love/index.wxml

2、實(shí)現(xiàn)組件事件處理函數(shù)（.js）
methods: {
   tapLove(ev){
      console.log(ev);
   }
}

組件data與properties的區(qū)別

頁面只有data，而組件有data和properties

data與properties中的數(shù)據(jù)都可以在組件中進(jìn)行單向數(shù)據(jù)綁定

原理：
與頁面其實(shí)一樣，小程序編譯后，data與properties將會和并成一個data 
（如果data中與peoperties中有重名數(shù)據(jù)，優(yōu)先peoperties）
所以進(jìn)行動態(tài)數(shù)據(jù)綁定還是使用this.setData()方法

使用原則：
data：內(nèi)部數(shù)據(jù)
properties：外部數(shù)據(jù)（頁面調(diào)用組件，傳遞進(jìn)來的數(shù)據(jù)，不傳遞就使用默認(rèn)值）

組件獲取外部數(shù)據(jù)的途徑

1、通過組件屬性（接收參數(shù)，而頁面是通過onLoad(options)接收）
2、通過getApp().globalData.xxx 獲取全局?jǐn)?shù)據(jù)
3、通過緩存獲取全局?jǐn)?shù)據(jù)

組件與業(yè)務(wù)邏輯

到底業(yè)務(wù)邏輯是放在組件中還是該放在頁面中？

由于組件是可復(fù)用的，每個頁面都可以使用同一個組件，此時需要看清楚這個業(yè)務(wù)邏輯是 **共有** 還是 **個性** 的
共有的必須寫在組件內(nèi)（例如樣式）
個性的必須寫在頁面中（例如請求URL）

observer函數(shù)

組件的屬性值被更改時的響應(yīng)函數(shù)，注意如果在observer函數(shù)中使用this.setData()修改自身屬性可能發(fā)生死循環(huán)導(dǎo)致內(nèi)存溢出

事件作用

1、事件是視圖層到邏輯層的通訊方式（小程序內(nèi)置事件）
2、組件與頁面的通訊（自定義事件）

小程序內(nèi)置事件

長按事件：longpress
點(diǎn)擊事件：tap
觸摸動作開始：touchstart
觸摸后移動：touchmove
觸摸動作結(jié)束：touchend

還有各個組件上都有各自特定的事件

事件綁定（綁定事件處理函數(shù)）

有2種方式：bind、catch  無論是內(nèi)置還是自定義事件，都是使用這種方式

寫法：
bind:tap/bind:touchmove
catch:tap/catch:touchmove

bind與catch的區(qū)別
bind事件綁定不會阻止冒泡事件向上冒泡，catch事件綁定可以阻止冒泡事件向上冒泡。

事件分類

事件分為頁面事件和組件事件

頁面事件主要寫在頁面中，在頁面wxml內(nèi)組件先綁定事件bind:tap，在js中再綁定事件處理函數(shù)
組件事件主要寫在組件中，在組件wxml內(nèi)組件先綁定事件bind:tap，在js中再綁定事件處理函數(shù)

**頁面與組件在事件綁定和處理上是完全獨(dú)立的2個部分，互相沒有關(guān)聯(lián)，也不能互換
**組件的事件可以冒泡到頁面上去

自定義事件激活及處理

// 自定義事件激活
this.triggerEvent("myevent", {
    param:"wutao"
}, {});
// 第一個參數(shù)：自定義事件名稱
// 第二個參數(shù)：detail對象，自定義數(shù)據(jù)（傳參數(shù)）
// 第三個參數(shù)：觸發(fā)事件的選項(xiàng)

// 自定義事件處理：在頁面wxml的組件調(diào)用標(biāo)簽處寫下如下代碼

flex 新一代布局樣式，以前很難實(shí)現(xiàn)的布局，現(xiàn)在變簡單了

注意

1、元素本身不會因?yàn)閐isplay:flex而改變原本塊狀或行間特性
2、flex下的item元素會變成行間特性（原本塊狀特性改變）

rpx 是小程序提供的一種自適應(yīng)單位，與iphone6的尺寸是1:1，推薦設(shè)計(jì)稿以IPHONE6為原型

rpx 與 px 的區(qū)別是什么？

1、px不會自適應(yīng)，無論什么機(jī)型，什么尺寸屏幕都是一個大小，有些字體不隨設(shè)備屏幕發(fā)生變化時使用px
2、rpx會自適應(yīng)，根據(jù)機(jī)型發(fā)生相應(yīng)改變

串行請求（請求之間有依賴）

// 請求1
let req1 = new Promise((resolve, reject) => {});
// 請求2
let req2 = new Promise((resolve, reject) => {});
// 請求3
let req3 = new Promise((resolve, reject) => {});

// 要求執(zhí)行順序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) => {});

// 要求并行執(zhí)行1、2、3 全部執(zhí)行完才執(zhí)行then中的回調(diào)函數(shù)
Promise.all([req1, req2, req3])
.then(res => {

});

// 要求并行執(zhí)行1、2、3 誰先執(zhí)行完就執(zhí)行then中的回調(diào)函數(shù)
Promise.race([req1, req2, req3])
.then(res => {

});

復(fù)合請求（既有串，也有并）

// 請求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;
})

// 要求串行執(zhí)行1、2，與3并行執(zhí)行
Promise.all([req4, req3])
.then(res => {

});

// 要求串行執(zhí)行1、2，與3并行執(zhí)行
Promise.race([req4,, req3])
.then(res => {

});

then中的返回值

有4種情況：
1、返回Promise   
2、返回具體的值   
3、不返回 
4、拋錯誤

無論2還是3，then都會返回一個Promise對象，而且對象中執(zhí)行resolve()方法
// 有返回值val
resolve(val)

// 不返回
resolve(undefined)

**所以后面then都會執(zhí)行第一個函數(shù)

catch

catch為then的語法糖，它是then(null, rejection)的別名。
也就是說，catch也是then，它用于捕獲錯誤，它的參數(shù)也就是是then的第二個參數(shù)。
所以，假設(shè)catch中如果return 值的話，新的Promise對象也會是接受狀態(tài)。

var example = new Promise((fulfill, reject)=>{
    let i = 1;
    reject(i);
})
example
.catch(()=>{console.log("我是第一個catch的回調(diào)函數(shù)"); return 1;})
.then(() =>{console.log("我是第一個then的回調(diào)函數(shù)");    throw Error    })
.catch(()=>{console.log("我是第二個catch的回調(diào)函數(shù)")})
.then(() => {console.log("我是第二個then的回調(diào)函數(shù)")})


調(diào)用reject函數(shù)后，promise變?yōu)閞ejected狀態(tài)，故執(zhí)行第一個catch的回調(diào)函數(shù)
第一個catch的回調(diào)函數(shù)return 1，故執(zhí)行第一個then的回調(diào)函數(shù)
第一個then的回調(diào)函數(shù)throw Error，故執(zhí)行第二個catch的回調(diào)函數(shù)
第二個catch的回調(diào)函數(shù)ruturn undefined（如上文所言），故執(zhí)行第二個then的回調(diào)函數(shù)

鏈接描述

全局樣式寫在：app.wxss

page{
    color: #999999;
    font-size: 33rpx;
}

wxs作用

1、頁面渲染

2、數(shù)據(jù)處理

**wxs可以使用js代替，是否代替取決于個人決定
**wxs類似html頁面中內(nèi)嵌js代碼
**wxml文件內(nèi)部不能編寫js或調(diào)用js，如果想調(diào)用，必須使用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";




 {{tools.msg}} 
 {{tools.bar(tools.FOO)}} 

2、使用標(biāo)簽（在wxml中）



var msg = "hello world";

module.exports.message = msg;


 {{m1.message}} 

1、CSS選擇器其實(shí)比官方文檔支持得更多
2、自定義組件的容器如果是行間元素，那么最外層元素會有最小高度21px，所以請盡量使用塊狀元素作為容器
3、wxml不但可以獲取對象的屬性，還可以獲取具體數(shù)組元素
{{arr[0]}}
{{obj.pro}}