1.小程序起步
（1）點擊https://mp.weixin.qq.com/wxopen/waregister?action=step1根據(jù)指引填寫信息和提交相應(yīng)的資料挡鞍，就可以擁有自己的小程序賬號兽间。
（2）登陸https://mp.weixin.qq.com暂殖，可以在菜單設(shè)置-開發(fā)設(shè)置看到小程序的AppID.小程序AppID相當(dāng)于小程序平臺的一個身份證。
（3）安裝開發(fā)者工具当纱。https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html?t=18101520呛每。
2.代碼構(gòu)成
（1）我們可以通過開發(fā)者工具快速創(chuàng)建一個項目。留意里面生成的不同文件類型.
1. .json后綴的JSON配置文件
2. .wxml后綴的WXML模板文件
3. .wxss后綴的WXSS樣式文件
4. .js后綴的JS腳本邏輯文件
（2）JSON配置坡氯。
????????在項目的根目錄有一個app.json和project.config.json,此外在page/logs目錄下還有一個logs.json.依次說明它們的用途晨横。
? ? ? ? 1.app.json是小程序的全局配置洋腮，包括了小程序的所有頁面路徑、界面表現(xiàn)手形、網(wǎng)絡(luò)超時時間啥供、底部tab等。
????????上圖兩個配置的含義：
????????（1）pages字段：用于描述當(dāng)前小程序所有頁面路徑库糠，這是為了讓微信客戶端知道當(dāng)前你的小程序頁面定義在哪個目錄伙狐。
????????（2）window字段：定義小程序所有頁面的頂部背景顏色，文字顏色等瞬欧。
????????2.工具配置project.config.json
????????????通常大家在使用一個工具的時候贷屎，都會針對各自的喜好做一些個性化配置。例如界面顏色艘虎、編譯配置等等唉侄。
????????3.page.json
? ? ????????每個小程序頁面都可以有一個page.json，用于配置一些當(dāng)前頁面的信息和功能野建。
（3）WXMl模板属划。
? ? ? ? WXML就類似于HTML的角色。和HTML非常相似候生，但有很多地方也不一樣同眯。
? ? ? ? ? ? 1.標簽名字不一樣
? ? ? ? ? ? 2.多了wx:if這樣的屬性以及{{}}這樣的表達式。
（4）WXSS樣式
? ? ? ? 具有css大部分的特性陶舞，小程序在WXSS也做了一些擴充和修改嗽测。
? ? ? ? ? ? 1.新增尺寸單位。rpx
? ? ? ? ? ? 2.提供了全局樣式和局部樣式肿孵。你可以寫一個app.wxss作為全局樣式唠粥，會作用與當(dāng)前小程序的所有頁面，局部樣式? ? ? ? ?page.wxss僅對當(dāng)前頁面生效
? ? ? ? ? ? 3.WXSS僅支持部分CSS選擇器停做。
（5）JS交互邏輯
3.小程序的啟動
? ? {
? ? ? ? 'pages':[
? ? ? ? ? ? "pages/index/index",
? ? ? ? ? ? "pages/logs/logs"
? ? ? ? [
? ? 這個配置文件說名小程序項目定義了兩個頁面晤愧，分別位于pages/index/index和pages/logs/logs。而寫在pages字段的第一個頁面就是小程序的首頁蛉腌。（小程序打開的第一個頁面）官份。小程序在啟動之后，在app.js定義的App實例的onLaunch回調(diào)會被執(zhí)行：
App()?函數(shù)用來注冊一個小程序烙丛。接受一個?Object?參數(shù)舅巷，其指定小程序的生命周期回調(diào)等。
App() 必須在?app.js?中調(diào)用河咽，必須調(diào)用且只能調(diào)用一次钠右。不然會出現(xiàn)無法預(yù)期的后果。
? App(
? ? onLaunch:function(){//小程序啟動之后觸發(fā)}
）
整個小程序只有一個App實例忘蟹，是全頁面共享的飒房，更多的事件回調(diào)參考文檔注冊程序 · 小程序搁凸。
前臺、后臺定義：當(dāng)前用戶點擊左上角關(guān)閉狠毯，或則按了設(shè)備Home鍵離開微信护糖，小程序并沒有直接銷毀，而是進入了后臺嚼松；當(dāng)再次進入微信或再次打開小程序嫡良，又會從后臺進入前臺。需要注意的是：只有當(dāng)小程序進入后臺一定時間惜颇，或則系統(tǒng)資源占用過高皆刺，才會被真正銷毀。
關(guān)閉小程序：當(dāng)用戶從掃一掃凌摄、轉(zhuǎn)發(fā)等入口（場景值為1007羡蛾，1008，1011锨亏，1025）進入小程序痴怨，且沒有置頂小程序的情況下退出，小程序會被銷毀器予。
options:
開發(fā)者可以在onPageNotFound回調(diào)中進行重定向處理浪藻，但是必須在回調(diào)中同步處理，異步處理無效乾翔。
注意：
1.如果開發(fā)者沒有添加onPageNotFound監(jiān)聽爱葵，當(dāng)跳轉(zhuǎn)頁面不存在時，將推入微信客戶端原生的頁面不存在提示頁面反浓。
2.如果onPageNotFound回調(diào)中又重定向到另一個不存在的頁面萌丈，將推入微信你客戶端原生的頁面不存在提示頁面，并且不在回調(diào)onPageNotFound.
getApp(object)函數(shù)可以用來獲取到小程序App實例雷则。注意：
1.不要在定義與App()內(nèi)的函數(shù)中調(diào)用getApp(),使用this就可以拿到app實例辆雾。
2.通過getApp()獲取實例之后，不要私自調(diào)用生命周期函數(shù)月劈。
獨立分包
? ? 獨立分包是小程序中一種特殊類型的分包度迂，可以獨立于主包和其他分包運行。從獨立分包中頁面進入小程序時猜揪，不需要下載主包惭墓。當(dāng)用戶進入普通分包或主包內(nèi)頁面是，主包才會被下載而姐。
開發(fā)者可以按需將某些具有一定功能獨立性的頁面配置到獨立分包中诅妹。當(dāng)小程序從普通分包頁面啟動時，需要先下載主包；而獨立分包不依賴主包即可運行吭狡，可以很大程度上提升分包頁面的啟動速度。一個小程序可以有多個獨立分包丈莺。小游戲不支持獨立分包划煮。
開發(fā)者通過app.json的subPackages字段中對應(yīng)的分包配置項中定義independent字段聲明對應(yīng)分包為獨立分包。
限制：
獨立分包屬于分包的一種缔俄。普通分包的所有限制都對獨立分包有效弛秋。獨立分包中插件、自定義組件的處理方式同普通分包俐载。此外蟹略，使用獨立分包時要注意：
? ? *獨立分包中不能依賴主包和其它分包中的內(nèi)容。包括js文件遏佣、template挖炬、wxss、自定義組件状婶、插件等意敛。主包中app.wxss對獨立分包無效，應(yīng)避免在獨立分包頁面中使用app.wxss中的樣式膛虫；
? ? *App只能在主包內(nèi)定義草姻，獨立分包中不能定義App，會造成無法預(yù)期的行為稍刀。
? ? *獨立分包中暫時不支持插件撩独。
注意事項：
（1）關(guān)于getApp();
? ? ? ? 與普通分包不同，獨立分包運行時账月，App并不一定被注冊综膀，因此getApp()也不一定可以獲得App對象。?
? ? ? ? ? ? *當(dāng)用戶從獨立分包頁面啟動小程序時捶障，主包不存在僧须，App也不存在，此時調(diào)用getApp()獲取到的是undefind项炼；當(dāng)用戶進入普通分包或主包內(nèi)頁面時担平，主包才會被下載，App才會被注冊锭部。
? ? ? ? ? ? *當(dāng)用戶是從普通分包或主包內(nèi)頁面跳轉(zhuǎn)到獨立分包頁面時暂论，主包已經(jīng)存在，此時調(diào)用getApp()可以獲取到真正的App拌禾。
由于這一限制取胎，開發(fā)者無法通過App對象實現(xiàn)獨立分包和小程序其它部分的全局變量共享。
為了在獨立分包中滿足這一需求，getApp支持allowDefault參數(shù)闻蛀，在App未定義時返回一個默認實現(xiàn) 匪傍。當(dāng)主包加載，App被注冊時觉痛，默認實現(xiàn)中定義的屬性會被覆蓋合并到真正的App中役衡。
? ? （2）關(guān)于App生命周期
? ? ? ? ? ? 當(dāng)從獨立分包啟動小程序時，主包中App的onLaunch和首次onShow會在從獨立分包頁面首次進入主包或其它普通分包頁面時調(diào)用薪棒。
小程序運行機制
小程序啟動會有兩種情況手蝎，一種是冷啟動，一種是熱啟動俐芯。假如用戶已經(jīng)打開過某小程序棵介，此時無需重新啟動，只需要將后臺的小程序切換到前臺吧史，這個過程就是熱啟動邮辽；冷啟動指的是用戶首次打開或小程序被微信主動銷毀后再次打開的情況，此時小程序需要重新加載啟動扣蜻。
更新機制：
? ? 小程序冷啟動時如果發(fā)現(xiàn)有新的版本逆巍，將會異步下載新版本的代碼包，并同時用客戶端本地的包進行啟動莽使，即新版本的小程序需要下一次冷啟動才會應(yīng)用上锐极。如果需要馬上應(yīng)用最新的版本，可以使用wx.getUpdateManagerAPI進行處理芳肌。
運行機制：
? ? .小程序沒有重啟概念灵再。
? ? .當(dāng)小程序進入后臺，客戶端會維持一段時間的運行狀態(tài)亿笤，超過一定時間后（目前是5分鐘）會被微信主動銷毀翎迁。
? ? .當(dāng)短時間內(nèi)（5s）連續(xù)收到兩次以上收到系統(tǒng)內(nèi)存警告，會進行小程序的銷毀净薛。
wx.getUpdateManager()返回值是UpdateManager汪榔，獲取全局唯一的版本更新管理器，用于管理小程序的更新肃拜。
UpdateManager：更新管理器對象痴腌。用來管理更新，可以通過wx.getUpdateManager接口獲取實例燃领。
方法：
? ? 1.UpdateManager.applyUpdate()
? ? ? ? 當(dāng)小程序新版本下載完成后（即onUpdateReady回調(diào)）士聪，強制小程序重啟并使用新版本。
? ? 2.UpdateManager.onCheckForUpdate(function callback)
? ? ? ? 監(jiān)聽像微信后臺請求檢查跟新結(jié)果的事件猛蔽。微信你小程序冷啟動時自動檢查更新剥悟，不需要由開發(fā)者主動觸發(fā)灵寺。
? ? 3. UpdateManager.onUpdateReady(function callback)
? ? ? ? 艦艇小程序有版本更新事件∏冢客戶端主動觸發(fā)下載（無需開發(fā)則者觸發(fā)）略板，下載成功后回調(diào)。
? ? 4.UpdateManager.onUpdateFailed(function callback)
? ? ? ? 監(jiān)聽小程序更新失敗事件慈缔。小程序有新版本蚯根，客戶端主動出發(fā)下載，下載失敗后回調(diào)函數(shù)胀糜。
注冊頁面
Page(Object)
? ? Page(Object)函數(shù)用來注冊一個頁面。接受一個Object類型的參數(shù)蒂誉，其指定頁面的初始數(shù)據(jù)教藻、生命周期回調(diào)、事件處理函數(shù)等右锨。
data
? ? data是頁面第一次渲染使用的初始數(shù)據(jù)括堤。
? ? 頁面加載時，data將會以JSON字符串的形式由邏輯層傳至渲染層鸠删，因此data中的數(shù)據(jù)必須是可以轉(zhuǎn)成JSON的類型：字符串净响，數(shù)字萝挤，布爾值，對象轧抗，數(shù)組。渲染層可以通過WXML對數(shù)據(jù)進行綁定瞬测。
示例代碼：
生命周期回調(diào)函數(shù)
? ? onload（Object query）
? ? 頁面加載時觸發(fā)横媚。一個頁面只會調(diào)用依次，可以在onLoad的參數(shù)中獲取打開當(dāng)前頁面路徑的參數(shù)月趟。
? ? onShow()：頁面顯示/切入前臺時觸發(fā)灯蝴。
? ? onReady()：頁面初次渲染完成時觸發(fā)。一個頁面只會調(diào)用一次孝宗，代表頁面已經(jīng)準備妥當(dāng)穷躁，可以和視圖層進行交互。
? ? onHide()：頁面隱藏/切入后臺時觸發(fā)因妇。如navigateTo或底部tab切換到其他頁面问潭，小程序切入后臺等。
? ? onUnload():頁面卸載時觸發(fā)沙峻。如redirectTo或navigateBack到其他頁面時睦授。
生命周期的觸發(fā)以及頁面的路由方式：
? ? 在小程序中所有的頁面的路由全部由框架進行管理∷ふ框架以棧的形式維護了當(dāng)前的所有頁面去枷。當(dāng)發(fā)生路由切換的時候，頁面棧的表現(xiàn)如下：
? ? ? ? 初始化：新頁面入棧。
? ? ? ? 打開新頁面：新頁面入棧删顶。
? ? ? ? 頁面重定向：當(dāng)前頁面出棧竖螃，新頁面入棧。
? ? ? ? 頁面返回：頁面不斷出棧逗余，直到目標返回頁特咆。
? ? ? ? Tab切換：頁面全部出棧，只留下新的tab頁面录粱。
? ? ? ? 重加載：頁面全部出棧腻格，只留下新的頁面。
getCurrentPagess()函數(shù)用于獲取當(dāng)前頁面棧的實例啥繁，以數(shù)組形式按棧的順序給出菜职，第一個元素為首頁，最后一個元素為當(dāng)前頁面旗闽。
? ? 注意：
? ? ? ? *不要嘗試修改頁面棧酬核，會導(dǎo)致路由以及頁面狀態(tài)錯誤。
? ? ? ? *不要在App.onLaunch的時候調(diào)用getCurrentPages(),此時page還沒有生成适室。
路由方式：
? ? ? ? 初始化：小程序打開的第一個頁面嫡意，路由當(dāng)前頁面（），路由后頁面（onload,onShow）.
? ? ? ? 打開新頁面：調(diào)用wx.navigateTo或使用組件<navigator open-type="navigateTo"/> 路由當(dāng)前頁面（onHide）路由后頁面（onLoad,onShow）
? ? ? ? 頁面重定向：調(diào)用API wx.redirectTo或使用組件<navigator open-type="redirectTo"/>路由前頁面（onUnload）,路由后頁面（onLoad,onShow）
? ? ? ? 頁面返回：調(diào)用API wx.navigateBack或使用組件<navigator open-type="navigateBack"/>路由前頁面（onUnload）路由后頁面（onShow）
? ? ? ? tab切換：調(diào)用API wx.switchTab或使用組件<navigator open-type="switchTab">路由前頁面（路由后頁面分情況：
? ? ? ? 重啟動：調(diào)用API wx.reLaunch或使用組件<navigator open-type="reLaunch"/>路由前頁面（onUnload）路由后頁面（onLoad捣辆，onShow）
tab切換對應(yīng)的生命周期（以A蔬螟、B頁面為Tabbar，C是從A頁面打開的頁面罪帖，D頁面是從C頁面打開的頁面）：
? ? ? ? *navigateTo促煮，redirectTo只能打開非TabBar頁面。
? ? ? ? *switchTab只能打開tabbar頁面整袁。
? ? ? ? *relaunch可以打開任意頁面菠齿。
? ? ? ? *頁面底部的tabBar由頁面決定，即只要定義為tabBar的頁面坐昙，底部都有tabbar.
? ? ? ? *調(diào)用頁面路由帶的參數(shù)可以在目標頁面的onload中獲取绳匀。
（1）wx.navigateTo(object object)保留當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面炸客，但是不能跳到tabbar頁面疾棵。
? ? （2）wx.navigateBack(object object)關(guān)閉當(dāng)前頁面，返回上一頁面或多級頁面痹仙∈嵌可以通過getCurrentPages()獲取當(dāng)前頁面棧，決定需要返回基層开仰。
? ? （3）wx.switchTab(object object)跳轉(zhuǎn)到tabBar頁面拟枚，并關(guān)閉其他所有非tabBar頁面薪铜。
? ? （4）wx.reLaunch(Object object)關(guān)閉所有頁面，打開到應(yīng)用內(nèi)的某個頁面.
頁面事件處理函數(shù)：
? ? onPullDownRefresh():
? ? ? ? 監(jiān)聽用戶下拉刷新事件恩溅。
? ? ? ? ? ? *需要在app.json的window選項中或頁面配置中開啟enablePullDownRefresh.
? ? ? ? ? ? *可以通過wx.startPullDownRefresh觸發(fā)下拉刷新隔箍，調(diào)用后觸發(fā)下拉刷新動畫，效果與用戶手動下拉刷新一致脚乡。
? ? ? ? ? ? *當(dāng)處理完數(shù)據(jù)刷新后蜒滩，wx.stopPullDwonRefresh可以停止當(dāng)前頁面的下拉刷新。
? ? onReachBottom()
? ? ? ? 監(jiān)聽用戶上拉觸底事件奶稠。
? ? ? ? ? ? *可以在app.json的window選項中或頁面配置中設(shè)置觸發(fā)距離onReachBottomDistance俯艰。
? ? ? ? ? ? *在出發(fā)距離內(nèi)滑動期間，本事件只會觸發(fā)一次锌订。
? ? onPageScroll(Object):
? ? ? ? 監(jiān)聽用戶滑動頁面事件蟆炊。
? ? ? ? ? ? Object參數(shù)說明：scrollTop 類型：Number，頁面在垂直方向已滾動的距離（單位px）瀑志。
? ? onShareAppMessage(Object)
? ? ? ? 監(jiān)聽用戶點擊頁面內(nèi)轉(zhuǎn)發(fā)按鈕或<button>組件open-type="share"或右上角菜單轉(zhuǎn)發(fā)按鈕的行為，并且自定義轉(zhuǎn)發(fā)內(nèi)容污秆。
? ? ? ? 注意：只有定義了此事件處理函數(shù)劈猪，右上角菜單才會顯示轉(zhuǎn)發(fā)按鈕。
? ? ? ? ? ? 參數(shù)? ? ? ? ? ? ? ? ? ? ? ? ? 類型? ? ? ? ? ? ? 說明
? ? ? ? ? ? from? ? ? ? ? ? ? ? ? ? ? ? ?String? ? ? ? ? ? ?button:頁面內(nèi)轉(zhuǎn)發(fā)按鈕良拼；战得，menu右上角轉(zhuǎn)發(fā)菜單。
? ? ? ? ? ? target? ? ? ? ? ? ? ? ? ? ? ?Object? ? ? ? ? ? 如果from值是button庸推，則target是觸發(fā)這次轉(zhuǎn)發(fā)事件的button常侦，否則為undefined。
? ? ? ? ? ? webViewUrl? ? ? ? ? ? ?String? ? ? ? ? ? ? 頁面中包含<web-view>組件時贬媒，返回當(dāng)前<web-view>的url
? ? ? ? 此事件需要一個return一個Object聋亡，用于自定義轉(zhuǎn)發(fā)內(nèi)容，返回內(nèi)容如下：
? ? ? ? ? ? 字段? ? ? ? ? ? ? ? ? ?說明? ? ? ? ? ? ? ? ? ? ? ?默認值
? ? ? ? ? ? title? ? ? ? ? ? ? ? ? ? ?轉(zhuǎn)發(fā)標題? ? ? ? ? ? ? ?當(dāng)前小程序名稱
? ? ? ? ? ? path? ? ? ? ? ? ? ? ? ? 轉(zhuǎn)發(fā)路徑? ? ? ? ? ? ? ?當(dāng)前頁面path际乘，必須是以/開頭的完整路徑
? ? ? ? ? ? imageUrl? ? ? ? ? ? ?自定義圖片路徑? ? ?使用默認截圖
? ? 組件事件處理函數(shù)
? ? ? ? page中還可以定義組件事件處理函數(shù)坡倔。在渲染層的組件中加入事件綁定，當(dāng)事件被觸發(fā)時脖含，就會執(zhí)行Page中定義的事件處理函數(shù)罪塔。
? ? Page.route
? ? ? ? 到當(dāng)前頁面的路徑，類型為string
? ? ? ? Page.prototype.setData(Object data,Function callback):setData函數(shù)用于將數(shù)據(jù)從邏輯層發(fā)送到視圖層（異步）养葵，同時改變對應(yīng)的this.data的值征堪。?
? ? ? ? 字段? ? ? ? ? ? ? ? ? ? ? 類型? ? ? ? ? ? ? ? ? 必填? ? ? ? ? ? ? ? 描述? ? ? ? ? ? ? ? ? ? ?
? ? ? ? data? ? ? ? ? ? ? ? ? ? ? ?Obejct? ? ? ? ? ? ? ?是? ? ? ? ? ? ? ? ? ?這次要改變的數(shù)據(jù)
? ? ? ? callBack? ? ? ? ? ? ? ? ?Function? ? ? ? ? ?否? ? ? ? ? ? ? ? ? ?setData引起的界面更新渲染完畢后的回調(diào)函數(shù)
objec以key：value的形式表示，將this.data中key對應(yīng)的值改變?yōu)関alue关拒。
其中key可以以數(shù)據(jù)路徑的形式給出佃蚜，支持改變數(shù)組中的某一項或?qū)ο蟮哪硞€屬性庸娱，如arry[2].message,a,b,c,d,并且不需要在this.data中預(yù)先定義。
注意：
? ? 1.直接修改this.data而不調(diào)用this.setData是無法改變頁面的狀態(tài)的爽锥，還會造成數(shù)據(jù)不一致涌韩。
? ? 2.僅支持設(shè)置可JSON化的數(shù)據(jù)。
? ? 3.單次設(shè)置的數(shù)據(jù)不能超過1024kb氯夷，請盡量避免一次設(shè)置過多的數(shù)據(jù)臣樱。
? ? 4.請不要把data中任何一項的value設(shè)為undefined，否則這一項將不被設(shè)置并可能遺留一些潛在問題腮考。
視圖層
WXML
WXML是框架設(shè)計的一套標簽語言雇毫，結(jié)合基礎(chǔ)組件、系統(tǒng)事件踩蔚，可以構(gòu)建出頁面的結(jié)構(gòu)棚放。
自定義組件
1.創(chuàng)建自定義組件
? ? 類似于頁面，一個自定義組件由json馅闽，wxml,wxss飘蚯，js4個文件組成。要編寫一個自定義組件福也，首先需要在json文件中進行自定義組件聲明（將component字段設(shè)為true可這一組文件設(shè)為自定義組件）：
? ? {
? ? ? ? "component":true
????}
同時局骤，還要在wxml文件中編寫組件模板，在wxss文件中加入組件樣式暴凑，它們的寫法與頁面的寫法類似峦甩。具體細節(jié)和注意事項參見組建模板和樣式。
注意：在組件wxss中不應(yīng)使用ID選擇器现喳、屬性選擇器和標簽名選擇器凯傲。
? ? ? ? 在自定義組件js文件中，需要使用Component()來注冊組件嗦篱，并提供組件的屬性定義冰单、內(nèi)部數(shù)據(jù)和自定義方法。
? ? ? ? 組件的屬性值和內(nèi)部數(shù)據(jù)將被用于組件WXML的渲染灸促，其中球凰，屬性值是可由組件外部傳入的。
使用已注冊的自定義組件前腿宰，首先要在頁面的json文件中進行引用聲明呕诉。此時需要提供每個自定義組件的標簽名和對應(yīng)的自定義組件路徑：
Component構(gòu)造器
? ? Component構(gòu)造器可用于定義組件，調(diào)用Component構(gòu)造器時可以指定組件的屬性吃度、數(shù)據(jù)甩挫、方法等。
? ? 定義段? ? ? ? ? ? ? 類型? ? ? ? ? ? 是否必填? ? ? ?描述
? ? properties? ? ? ? ?Object Map 否? ? ? ? ? ? ? ? ? 組件的對外屬性椿每，是屬性名到屬性設(shè)置的映射表伊者，屬性設(shè)置中可包含三個字段英遭，type表示屬性類型、value表示屬性初始值亦渗、observer表示屬性值被更改時的響應(yīng)函數(shù)挖诸。
? ? data? ? ? ? ? ? ? ? ? ? Object? ? ? ? 否? ? ? ? ? ? ? ? ?組件的內(nèi)部數(shù)據(jù)，和properties一同用于組件的模板渲染
? ? methods? ? ? ? ? ? ?Object? ? ? ?否? ? ? ? ? ? ? ? ? 組件的方法法精，包含事件響應(yīng)函數(shù)和任意的自定義方法多律，關(guān)于事件的響應(yīng)函數(shù)的使用，參見組件事件
? ? behaviors? ? ? ? ? ?String Array? 否? ? ? ? ? ? ? ?類似于mixins和traits的組件間代碼復(fù)用機制搂蜓，參見behaciors
? ? created? ? ? ? ? ? ? ?Function? ? 否? ? ? ? ? ? ? ? ? 組件生命周期函數(shù)狼荞，在組件實例進入頁面節(jié)點樹時執(zhí)行，注意此時不能調(diào)用setData
? ? attached? ? ? ? ? ? ?Function? ? ?否? ? ? ? ? ? ? ? ?組件生命周期函數(shù)帮碰，在組件實例進入頁面節(jié)點樹時執(zhí)行相味。
? ? ready? ? ? ? ? ? ? ? ? Function? ? ?否? ? ? ? ? ? ? ? ?組件生命周期函數(shù)，在組件布局完成后執(zhí)行殉挽，此時可以獲取節(jié)點信息丰涉。
? ? moved? ? ? ? ? ? ? ? Function? ? ?否? ? ? ? ? ? ? ? ?組件生命周期函數(shù)，在組件實例被移動到節(jié)點樹另一個位置時執(zhí)行斯碌。
? ? detached? ? ? ? ? ? Function? ? ?否? ? ? ? ? ? ? ? ?組件生命周期函數(shù)昔搂，在組件實例被從頁面節(jié)點樹移除時執(zhí)行。
? ? relations? ? ? ? ? ? ?Object? ? ? ? ?否? ? ? ? ? ? ? ? ?組件間關(guān)系定義输拇，參見組件間關(guān)系
? ? externalClasses String Array 否? ? ? ? ? ? ? ? 組件接受的外部樣式類，參見外部樣式類贤斜。
? ? options? ? ? ? ? ? ? ?Object Map? 否? ? ? ? ? ? ? ? 一些選項（文檔中介紹相關(guān)特性時會涉及具體的選項設(shè)置策吠，這里暫不列舉）
? ? lifetimes? ? ? ? ? ? ?Object? ? ? ? ? 否? ? ? ? ? ? ? ? 組件生命周期聲明對象，組件的生命周期：created瘩绒、attached猴抹、ready、moved锁荔、detached將收歸到lifetimes字段內(nèi)進行聲明蟀给，原有聲明方式仍舊有效，如同時存在兩種聲明方式阳堕，則lifetimes字段內(nèi)聲明方式優(yōu)先級最高
? ? pageLifetimes? ? Object? ? ? ? ? 否? ? ? ? ? ? ? ? 組件所在頁面的生命周期聲明對象跋理，目前僅支持頁面的show和hide兩個生命周期
? ? definitionFilter? ? Function? ? ? 否? ? ? ? ? ? ? ? ?定義段過濾器，用于自定義組件擴展恬总，參見自定義組件擴展前普。
生成的組件實例可以在組件的方法、生命周期函數(shù)和屬性observer中通過this訪問壹堰。組件包含一些通用屬性和方法拭卿。
屬性名? ? ? ? ? ? ? ? ? ? ? ? 類型? ? ? ? ? ? ? ? ? ? ?描述
is? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? String? ? ? ? ? ? ? ? ? ?組件的文件路徑
id? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? String? ? ? ? ? ? ? ? ? ?組件節(jié)點id
dataset? ? ? ? ? ? ? ? ? ? ? ?String? ? ? ? ? ? ? ? ? ?節(jié)點 dataset
data? ? ? ? ? ? ? ? ? ? ? ? ? ? Object? ? ? ? ? ? ? ? ? 組件數(shù)據(jù)骡湖，包括內(nèi)部數(shù)據(jù)和屬性值
properties? ? ? ? ? ? ? ? ? ?Object? ? ? ? ? ? ? ? ? 組件數(shù)據(jù)，包括內(nèi)部數(shù)據(jù)和屬性值（與data一致）
方法名? ? ? ? ? ? ? ? ? ? ? ? 參數(shù)? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?描述
setData? ? ? ? ? ? ? ? ? ? ? Object newData? ? ? ? ? ? ? 設(shè)置data并執(zhí)行視圖層渲染
hasBehavior? ? ? ? ? ? ? Object behavior? ? ? ? ? ? ? ?檢查組件是否有behavior（檢查時會遞歸檢查被直接或間接引入的所有behavior）
triggerEvent? ? ? ? ? ? ? ?String name,Object detail,Object options 觸發(fā)事件峻厚，參見組件事件
createSelectorQuery? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 創(chuàng)建一個SelectorQuery對象响蕴，選擇器選取范圍為這個組件實例內(nèi)。
createIntersectionObserver? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 創(chuàng)建一個IntersectionObserver對象惠桃，選擇器選取范圍為這個組件實例內(nèi)
selectComponent? ? ? ?String selector? ? ? ? ? ? ? ? ?使用選擇器選擇組件實例節(jié)點浦夷，返回匹配到的第一個組件實例對象（會被?wx://component-export?影響）
selectAllComponents? String? ? ? ? ? ? ? ? ? ? ? ? ? ? ? selector使用選擇器選擇組件實例節(jié)點，返回匹配到的全部組件實例對象組成的數(shù)組
getRelationNodes? ? ? ?String?relationKey? ? ? ? ? ? 獲取這個關(guān)系所對應(yīng)的所有關(guān)聯(lián)節(jié)點刽射，參見?組件間關(guān)系
簡單的組件應(yīng)用demo：
組件間通信
組件間通信
組件間的基本通信方式有以下幾種：
? ? ? ? *WXML數(shù)據(jù)綁定：用于父組件向子組件的指定屬性設(shè)置數(shù)據(jù)军拟，僅能設(shè)置JSON兼容數(shù)據(jù)。
? ? ? ? *事件：用于子組件向父組件傳遞數(shù)據(jù)誓禁，可以傳遞任意數(shù)據(jù)懈息。
? ? ? ? *如果以上兩種方式不能滿足需要，父組件還可以通過this.selectComponent方式獲取子組件實例對象摹恰，這樣就可以直接訪問組件的任意方法和數(shù)據(jù)辫继。
監(jiān)聽事件
? ? 事件系統(tǒng)是組件間通信的主要方式之一。自定義組件可以觸發(fā)任意的事件俗慈，引用組件的頁面可以監(jiān)聽這些事件姑宽。關(guān)于事件的基本概念和用法，參見事件闺阱。
? ? 監(jiān)聽自定義組件事件的方法與監(jiān)聽基礎(chǔ)組件事件的方法完全一致：
? ??觸發(fā)事件
? ? ? ? ? ? 自定義組件觸發(fā)事件時炮车，需要使用triggerEvent方法，指定事件名酣溃、detail對象和事件選項：
? ? ? ? ? ? ? 觸發(fā)事件的選項包括：
? ? ? ? ? ? ? ? bubbles? ? ? ? ? ?Boolean? ? ? ? ?不是必填? ? ? ? ? ? 默認值false? ? ? ? ? ? ? ?事件是否冒泡
? ? ? ? ? ? ? ? composed? ? ? ?Boolean? ? ? ? ? 不是必填? ? ? ? ? ?默認值false? ? ? ? ? ? ? ?事件是否可以穿越組件邊界瘦穆，為false時，事件將只能在引用組件的節(jié)點樹上觸發(fā)赊豌，不進入其他組件內(nèi)部扛或。
? ? ? ? ? ? ? ? captruePhase? Boolean? ? ? ? ?不是必填? ? ? ? ? ? 默認值false? ? ? ? ? ? ? ? 事件是否擁有捕獲階段。
behaviors
? ??定義和使用 behaviors
? ? ? ? behaviors是用于組件代碼共享的特性碘饼，類似于一些編程語言中的mixins或traits熙兔。
? ? ? ? 每個behavior可以包含一組屬性、數(shù)據(jù)艾恼、生命周期函數(shù)和方法住涉，組建引用它時，他的屬性钠绍、數(shù)據(jù)和方法都會被合并到組件中秆吵，生命周期也會對應(yīng)時機被調(diào)用。每個組件可以引用多個behavior五慈。behavior也可以引用其它behavior纳寂。
? ? ? ? behavior需要使用Behavior()構(gòu)造器定義主穗。
? ? ? ? 組件引用時，在behaviors定義段中將它們逐個列出即可毙芜。
? ? ? ? ? ? 在上例中忽媒，my-component組件定義中加入了my-behavior，而my-behavior中包含有myBehaviorProperty屬性腋粥、?myBehaviorData數(shù)據(jù)字段晦雨、?myBehaviorMethod?方法和一個?attached?生命周期函數(shù)。這將使得my-component中最終包含myBehaviorProperty?隘冲、?myProperty?兩個屬性闹瞧，myBehaviorData?、?myData?兩個數(shù)據(jù)字段和?myBehaviorMethod?展辞、?myMethod?兩個方法奥邮。當(dāng)組件觸發(fā)attached生命周期時，會依次觸發(fā)my-behavior?中的?attached?生命周期函數(shù)和?my-component?中的?attached?生命周期函數(shù)罗珍。
? ? ? ?字段的覆蓋和組合規(guī)則
? ? ? ? ? ? 組件和它引用的behavior中可以包含同名字段洽腺，對這些字段的處理方法如下：
? ? ? ? ? ? ? ? *如果有同名的屬性或方法，組件本身的屬性或方法會覆蓋behavior中的屬性或方法覆旱，如果引用了多個behavior蘸朋，在定義段中靠后behavior中的屬性和方法會覆蓋靠前的屬性或方法；
? ? ? ? ? ? ? ? *如果有同名的數(shù)據(jù)字段扣唱，如果數(shù)據(jù)是對象類型藕坯，會進行對象合并，如果是非對象類型則會進行相互覆蓋噪沙；
? ? ? ? ? ? ? ? *生命周期函數(shù)不會相互覆蓋炼彪，而是在對應(yīng)觸發(fā)時機逐個調(diào)用。如果同一個behavior被一個組件多次引用曲聂，他定義的生命周期函數(shù)只會被執(zhí)行依次。
? ? ? ? ?內(nèi)置behaviors
? ? ? ? ? ? ? ? 自定義組件可以通過引用內(nèi)置的behavior來獲取內(nèi)置組件的一些行為佑惠。
? ? ? ? ? ? ? ? 在上例中朋腋，wx://form-field?代表一個內(nèi)置?behavior，它使得這個自定義組件有類似于表單控件的行為膜楷。
? ? ? ? ? ? ? ? 內(nèi)置behavior往往會為組件添加一些屬性旭咽。在沒有特殊說明時，組件可以覆蓋這些屬性來改變它的type或添加observer赌厅。
? ? ? ? ? ? 組件中slot使用
? ? ? ? ? ? ? ? ? ? 如果引入組件的wxml中穷绵，想在組件中寫入其它的東西，需要在組件中寫入一個slot插槽特愿，這樣才會正常顯示仲墨。
? ? ? ? ? ? ? ? ? ? ? ? 使用多個slot勾缭，在正常情況下，一個組件只有一個slot，但有時候我們的自定義組件可能不止使用一個slot，需要使用多個slot時纵刘，可以在組件js中聲明啟用仆百。
? ? ? ? ? ? ? ? ? ? ? ? 1.在js中聲明
? ? ? ? ? ? ? ? ? ? ? ? 2.在組件中使用多個slot，以不同的name來區(qū)分：
? ? ? ? ? ? ? ? ? ? ? ? 3幔虏。使用時，用slot屬性來將節(jié)點插入到不同的slot上。
組件間關(guān)系
? ? ? ? 定義和使用組件間的關(guān)系
? ? ? ? ? ? ? ? 有時需要實現(xiàn)這樣的組件：
? ? ? ? ? ? 這個例子中碘梢，custom-ul和custom-li都是自定義組件，他們有相互間的關(guān)系伐蒂，相互間的通信往往比較復(fù)雜煞躬。此時在組件定義時加入relations定義段，可以解決這樣的問題饿自。示例：
? ? ? ? 1.引入組件的wxml：??
? ? ? ? ?2.custom-ul組件：父組件
? ? ? ? 3.custom-li組件：子組件
? ? ? ? ?4.在子組件和父組件中的js文件中Component中定義relations，并表明父子或則祖先關(guān)系昭雌。?
? ??關(guān)聯(lián)一類組件
? ? ? ? ? 有時需要關(guān)聯(lián)的是一類組件：
抽象節(jié)點
? ??????在組件中使用抽象節(jié)點
? ? ? ? ? ? 有時佛纫，自定義組件模板中的一些節(jié)點，其對應(yīng)的自定義組件不是由自定義組件本身確定的总放，而是自定義組件調(diào)用者確定的呈宇。這時可以把這個節(jié)點聲明為‘抽象節(jié)點’。
? ? ? ? ? ?例如局雄，我們現(xiàn)在來實現(xiàn)一個選項框組件甥啄，（selectable-group）組件，它其中可以放置單選框(custom-radio)或者復(fù)選框（custom-checkbox）炬搭。實例鏈接：https://github.com/WangShuXian6/miniprogram-demo/tree/develop/abstract-com
自定義組件擴展
? ? 通過例子可以發(fā)現(xiàn)蜈漓，自定義組件的擴展其實就是提供了修改自定義組件定義段的能力，上述例子中就是修改了自定義組件中的data定義段的內(nèi)容宫盔。
? ? Behavior()構(gòu)造器提供了新的定義段definitionFilter融虽，用于支持自定義組件擴展。definitionFilter是一個函數(shù)灼芭，在被調(diào)用時會注入兩個參數(shù)有额，第一個參數(shù)是使用該behavior的component/behavior的定義對象，第二個參數(shù)是該behavior所使用的behavior的definitionFilter函數(shù)列表。
上述代碼中聲明了1個自定義組件和3個behavior巍佑，每個behavior都使用了definitionFilter定義段茴迁。那么按照聲明的順序會有如下事情發(fā)生。
1.當(dāng)進行behavior2的聲明時就會調(diào)用behavior3的definitionFilter函數(shù)句狼，其中defFields參數(shù)是behavior2的定義段笋熬，definiyionFilterArr參數(shù)即為空數(shù)組，因為behavior3沒有使用其它的behavior腻菇。
2.當(dāng)進行behavior1的聲明時就會調(diào)用behavior2的definitionFilter函數(shù)胳螟，其中defFields參數(shù)是behavior1的定義段，definitionFilterArrr參數(shù)是一個長度為1的數(shù)組筹吐，definitionFilterArr[0]即為behavior3的definitionFilter函數(shù)糖耸，因為behavior2使用了behavior3.用戶在此處可以自行決定在進行behavior1的聲明時要不要調(diào)用behavior3的definitionFilter函數(shù)，如果需要調(diào)用丘薛，在此處補充代碼definitionFilterArr[0](defFields)?即可嘉竟，definitionFilterArr?參數(shù)會由基礎(chǔ)庫補充傳入。
3.同理洋侨，在進行 component 的聲明時就會調(diào)用 behavior1 的?definitionFilter?函數(shù)舍扰。
下面利用擴展簡單實現(xiàn)自定義組件的計算屬性功能:
? ? 在組件中使用：
實現(xiàn)原理很簡單，對已有的 setData 進行二次封裝希坚，在每次 setData 的時候計算出 computed 里各字段的值边苹，然后設(shè)到 data 中，已達到計算屬性的效果裁僧。
開發(fā)第三方自定義組件
? ? 開發(fā)一個開源的自定義組件包括給他人使用个束，首先需要明確他人是要如何使用這個包的，如果只是拷貝小程序目錄下直接使用的餓話聊疲，就可以跳過此文檔茬底。此文檔中后續(xù)內(nèi)容是以npm管理自定義組件的前提下進行說明的。
? ? 在開發(fā)之前获洲，要求開發(fā)者具有基礎(chǔ)的node.js和npm相關(guān)的知識阱表，同時需要準備好支持npm功能的開發(fā)者工具，點此下載贡珊。
