柚子快報(bào)激活碼778899分享：微信小程序?qū)W習(xí)筆記(黑馬)

http://yzkb.51969.com/

1. 小程序-起步

1.1 小程序簡介

1.1.1 小程序與普通網(wǎng)頁開發(fā)的區(qū)別

運(yùn)行環(huán)境不同：網(wǎng)頁運(yùn)行在瀏覽器環(huán)境中，小程序運(yùn)行在微信環(huán)境中API不同：由于運(yùn)行 環(huán)境的不同，小程序無法調(diào)用DOM和BOM的API開發(fā)模式不同：網(wǎng)頁的開發(fā)模式–>瀏覽器+代碼編輯器；小程序的開發(fā)模式–>申請(qǐng)小程序開發(fā)賬

1.2 第一個(gè)小程序

注冊(cè)小程序開發(fā)賬號(hào)：使用瀏覽器打開: https://mp.weixin.qq.com 網(wǎng)址，點(diǎn)擊右上角的"立即注冊(cè)"，即可進(jìn)入小程序開發(fā)賬號(hào)的注冊(cè)流程，完成相關(guān)流程。獲取小程序的AppID：掃碼登入網(wǎng)址后->點(diǎn)擊開發(fā)->開發(fā)設(shè)置->AppID下載開發(fā)者工具：https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html安裝成功后，掃碼登錄

1.3 小程序代碼的構(gòu)成

1.App.json 文件

app.json是當(dāng)前?程序的全局配置，包括了?程序的所有??路徑、界?表現(xiàn)、?絡(luò)超時(shí)時(shí)間、底部tab等。普通快速啟動(dòng)項(xiàng)??邊的app.json配置

字段的含義:

pages字段?于描述當(dāng)前?程序所有??路徑，這是為了讓微信客?端知道當(dāng)前你的?程序??定義在哪個(gè)?錄。window字段定義?程序所有??的頂部背景顏?，?字顏?定義等。style：全局定義小程序組件所使用的樣式版本sitemapLocation：用來指明sitemap.json的位置

2. sitemap.json文件

?sitemap的索引提示是默認(rèn)開啟的，如需要關(guān)閉sitemap的索引提示，可在小程序項(xiàng)目配置文件project.config.json的setting中配置字段checkSiteMap為false

3.頁面的.json文件?

?頁面中的配置會(huì)覆蓋app.json的window中相同的配置項(xiàng)

1.4 小程序的宿主環(huán)境?

?1.4.1 什么是宿主環(huán)境

??宿主環(huán)境：指的是程序運(yùn)行所必須的依賴環(huán)境，脫離了宿主環(huán)境的軟件是沒有任何意義的

?1.4.2 小程序的宿主環(huán)境

? 手機(jī)微信就是小程序的宿主環(huán)境，小程序借助宿主環(huán)境提供的能力，可以完成許多普通網(wǎng)頁無法完成的功能

1.4.3 小程序宿主環(huán)境包含的內(nèi)容

通信模型

小程序通信的主體是邏輯層和渲染層，其中：WXML模板和WXSS樣式工作在渲染層，JS腳本工作在邏輯層小程序的通信模型：邏輯層和渲染層之間的通信(由微信客戶端進(jìn)行轉(zhuǎn)發(fā))；邏輯層和第三方服務(wù)器之間的通信(由微信客戶端進(jìn)行轉(zhuǎn)發(fā))

? ? 2.運(yùn)行機(jī)制

小程序啟動(dòng)過程：下載代碼包到本地–>解析app.json全局配置文件–>執(zhí)行app.js小程序入口文件，調(diào)用App()創(chuàng)建小程序?qū)嵗C>渲染小程序首頁–>小程序啟動(dòng)完成頁面渲染過程：加載解析頁面的.json配置文件–>加載頁面的.wxml模板和.wxss樣式–>執(zhí)行頁面的.js文件，調(diào)用Page()創(chuàng)建頁面實(shí)例–>頁面渲染完成

? ? 3.組件

容器類組件：view(普通視圖區(qū)域，類似于div，是塊級(jí)元素，用來實(shí)現(xiàn)頁面的布局效果)；scroll-view:(可滾動(dòng)的視圖區(qū)域，常用來實(shí)現(xiàn)滾動(dòng)列表效果)；swiper和swiper-item(輪播圖組件和輪播圖item組件)

如下是swiper的屬性：

基礎(chǔ)類組件：text(文本文件，類似于span，是行內(nèi)元素，text的selectable屬性，實(shí)現(xiàn)長按選中文本內(nèi)容)；rich-text(富文本文件，通過組件的nodes屬性結(jié)點(diǎn)，把HTML字符串渲染為對(duì)應(yīng)的UI結(jié)構(gòu))

? ? ? ?nodes屬性設(shè)置：

?button(按鈕組件，通過open-type屬性可以調(diào)用微信提供的各種功能)

?img(圖片組件，默認(rèn)width=300px,height=240px，支持懶加載)?

?navigator(頁面導(dǎo)航組件，類似于a標(biāo)簽)

4. API?

事件監(jiān)聽API：以on開頭，用來監(jiān)聽某些事件的觸發(fā)，如：wx.onWindowResize(function callback)監(jiān)聽窗口尺寸變化的事件同步API：以Sync結(jié)尾的API，同步API的執(zhí)行結(jié)果，可以通過函數(shù)返回值直接獲取，如果執(zhí)行出錯(cuò)會(huì)拋出異常，如：wx.setStorageSync(‘key’,‘value’) 向本地存儲(chǔ)中寫入內(nèi)容異步API：類似jquery中的**$.ajax(options)**函數(shù)，需要通過success、fail、complete接收調(diào)用的結(jié)果，如：wx.request() 發(fā)起網(wǎng)絡(luò)數(shù)據(jù)請(qǐng)求，通過success回調(diào)函數(shù)接收數(shù)據(jù)

2. 小程序-模板與配置

2.1 使用WXML模板語法渲染頁面結(jié)構(gòu)

2.1.1 數(shù)據(jù)綁定

數(shù)據(jù)綁定的基本原則

在data中定義數(shù)據(jù)在WXML中使用數(shù)據(jù)

? ? 2.在data中定義頁面的數(shù)據(jù)：在頁面對(duì)應(yīng)的js文件中，把數(shù)據(jù)定義到data對(duì)象中即可

? 3. Mustache語法的格式：把data中的數(shù)據(jù)綁定到頁面中渲染，使用Mustache語法(雙大括號(hào))將變量包起來即可

?{{info}}

?4.Mustache語法的應(yīng)用場景：綁定內(nèi)容、綁定屬性、運(yùn)算

?5.動(dòng)態(tài)綁定內(nèi)容：{{info}}

?6.動(dòng)態(tài)綁定屬性

?7.三元運(yùn)算：

?8.算數(shù)運(yùn)算：randomNum:Math.random().toFixed(2)

2.1.2 事件綁定?

常用事件

? ?2.事件對(duì)象的屬性列表

?

?其中，target是觸發(fā)該事件的源頭組件，而currentTarget則是當(dāng)前事件所綁定的組件

3.bindtap的語法格式?

?4.在事件處理函數(shù)中為data中的數(shù)據(jù)賦值?

?通過調(diào)用this.setData(dataObject)方法，可以給頁面data中的數(shù)據(jù)重新賦值，實(shí)例如下

5.事件傳參

不能在綁定事件的同時(shí)為事件處理函數(shù)傳遞參數(shù)，可以通過為組件提供data-*自定義屬性傳參，其中的*代表的是參數(shù)的名字，在事件處理函數(shù)中，可以通過even.target.dataset.參數(shù)名即可獲取到具體參數(shù)的值，實(shí)例代碼如下：

?注意：data-后面的參數(shù)不能寫駝峰

?6.bindinput的語法格式

7. 實(shí)現(xiàn)文本框和data之間的數(shù)據(jù)同步：定義數(shù)據(jù)，渲染結(jié)構(gòu)，美化樣式，綁定input事件處理函數(shù)

2.1.3 條件渲染?

1.wx:if

? ? ? ?在框架中，使?wx:if="{{condition}}"來判斷是否需要渲染該代碼塊

2. 結(jié)合使用wx:if

?:實(shí)現(xiàn)一次性控制多個(gè)組件的展示和隱藏，并在block標(biāo)簽上使用wx:if來控制屬性，另外，block并不是一個(gè)組件，只是一個(gè)包裹性質(zhì)的容器，不會(huì)在頁面中做任何渲染

3. hidden：直接使用hidden="{{condition}}"也可以實(shí)現(xiàn)元素的顯示與隱藏

?2.1.4 列表渲染??

1.wx:for 可以根據(jù)指定的數(shù)組，循環(huán)渲染重復(fù)的組件結(jié)構(gòu)

? ?wx:for-item可以指定數(shù)組當(dāng)前元素的變量名，wx:for-index可以指定數(shù)組當(dāng)前下標(biāo)的變量名

2.wx:key ?來提?數(shù)組渲染的性能?

2.2 使用WXSS樣式美化頁面結(jié)構(gòu)?

?與CSS相比，WXSS擴(kuò)展的特性：rpx尺寸單位，@import樣式導(dǎo)入

?2.2.1 rpx

?rpx（responsive pixel）：可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。規(guī)定屏幕寬為750rpx? ?

?建議：開發(fā)微信小程序時(shí)設(shè)計(jì)師可以?iPhone6作為視覺稿的標(biāo)準(zhǔn)。

使用步驟：

確定設(shè)計(jì)稿寬度pageWidth計(jì)算比例750rpx = pageWidth px,因此1px=750rpx/pageWidth。在less?件中，只要把設(shè)計(jì)稿中的px=>750/pageWidth rpx即可

?2.2.2 樣式導(dǎo)入

?語法格式：@import后跟需要導(dǎo)入的外聯(lián)樣式表的相對(duì)路徑，用==；==表示語句結(jié)束，如

@import '/common/common.wxss';

?2.2.3 全局樣式和局部樣式

全局樣式：定義在app.wxss中的樣式為全局樣式，作用于每一個(gè)頁面 在頁面的.wxss文件中定義的樣式為局部樣式，只作用于當(dāng)前頁面 當(dāng)局部樣式和全局樣式?jīng)_突時(shí)，根據(jù)就近原則，局部樣式會(huì)覆蓋全局樣式 當(dāng)局部樣式的權(quán)重大于或等于全局樣式的權(quán)重時(shí)，才會(huì)覆蓋全局樣式

?2.3 使用app.json對(duì)小程序進(jìn)行全局配置

?2.3.1 全局配置文件及常用的配置項(xiàng)

?2.3.2 window節(jié)點(diǎn)常用的配置項(xiàng)

?2.3.3 tabBar

tabBar是移動(dòng)端應(yīng)用常見的頁面效果，用于實(shí)現(xiàn)頁面的快速切換，小程序中通常將其分為：底部tabBar，頂部tabBar注意：tabBar中只能配置最后2個(gè)，最多5個(gè)tab頁簽，當(dāng)渲染頂部tabBar時(shí)，不顯示icon，只顯示文本tabBar的6個(gè)組成部分? ? ? ? ? ? ?? ? ? ? ?

backgroundColor：tabBar的背景色selectedIconPath:選中時(shí)的圖片路徑selectedColor:tabBar上的文字選中時(shí)的顏色borderStyle:tabBar上邊框的顏色iconPath:未選中時(shí)的圖片路徑color:tabBar上文字的默認(rèn)(未選中)顏色

? ? ?4.tabBar節(jié)點(diǎn)的配置項(xiàng)

? ? 5. 每個(gè)tabBar項(xiàng)的配置選項(xiàng)

?2.4 使用page.json對(duì)小程序頁面進(jìn)行個(gè)性化配置

當(dāng)頁面配置與全局配置沖突時(shí)，根據(jù)就近原則，最終的效果以頁面配置為準(zhǔn)頁面配置中常用的配置項(xiàng)與全局一樣

?2.5 發(fā)起網(wǎng)絡(luò)數(shù)據(jù)請(qǐng)求

?2.5.1 GET和POST請(qǐng)求

小程序中網(wǎng)絡(luò)數(shù)據(jù)請(qǐng)求的限制

只能請(qǐng)求HTTPS類型的接口必須將接口的域名添加到信任列表中?

? ? ?2.配置request的合法域名

?登錄到微信小程序的管理后臺(tái)->開發(fā)->開發(fā)設(shè)置->服務(wù)器域名->修改request合法域名

? ? ?3.發(fā)起GET請(qǐng)求

?調(diào)用微信小程序提供的wx.request()方法，可以發(fā)起GET數(shù)據(jù)請(qǐng)求

? ? 4.發(fā)起POST請(qǐng)求

? ? 5.在頁面加載時(shí)請(qǐng)求數(shù)據(jù)

? ?6.跳過request合法域名校驗(yàn)(只能在開發(fā)與調(diào)試階段使用)

?

3. 小程序-視圖與邏輯

3.1 頁面導(dǎo)航

3.1.1 聲明式導(dǎo)航?

小程序中實(shí)現(xiàn)頁面導(dǎo)航的兩種方式

聲明式導(dǎo)航：在頁面上聲明一個(gè)導(dǎo)航組件；通過點(diǎn)擊組件實(shí)現(xiàn)頁面跳轉(zhuǎn)編程式導(dǎo)航：調(diào)用小程序的導(dǎo)航 API，實(shí)現(xiàn)頁面的跳轉(zhuǎn)

? ? ?2.導(dǎo)航到 tabBar 頁面：在使用組件跳轉(zhuǎn)到指定的 tabBar 頁面時(shí)，需要指定 url 屬性和 open-type 屬性，其中：

url 表示要跳轉(zhuǎn)的頁面的地址，必須以?/開頭open-type 表示跳轉(zhuǎn)的方式，必須為?switchTab

? ? 3.導(dǎo)航到非tabBar頁面：在使用?組件跳轉(zhuǎn)到普通的非 tabBar 頁面時(shí)，則需要指定 url 屬性和 open-type 屬性，其中：

url 表示要跳轉(zhuǎn)的頁面的地址，必須以?/開頭open-type 表示跳轉(zhuǎn)的方式，必須為?navigate在導(dǎo)航到非 tabBar 頁面時(shí)，open-type=“navigate” 屬性可以省略

? ? ?4.后退導(dǎo)航：如果要后退到上一頁面或多級(jí)頁面，則需要指定 open-type 屬性和 delta 屬性，其中：

open-type 的值必須是 navigateBack，表示要進(jìn)行后退導(dǎo)航delta 的值必須是數(shù)字，表示要后退的層級(jí)如果只是后退到上一頁面，則可以省略 delta 屬性，因?yàn)槠淠J(rèn)值就是 1

?3.1.2 編程式導(dǎo)航

?導(dǎo)航到 tabBar 頁面：調(diào)用 wx.switchTab(Object object) 方法。參數(shù)的屬性如下：

? ? ?2.? 導(dǎo)航到非tabBar頁面：調(diào)用 wx.navigateTo(Object object) 方法，參數(shù)的屬性如下：

?

? ? 3.? 后退導(dǎo)航：調(diào)用 wx.navigateBack(Object object) 方法，可以返回上一頁面或多級(jí)頁面，參數(shù)的屬性如下：

?

?3.1.3 導(dǎo)航傳參

?1.聲明式導(dǎo)航傳參：在路徑的后面還可以攜帶參數(shù)：參數(shù)與路徑之間使用?分隔；參數(shù)鍵與參數(shù)值用?=相連；不同參數(shù)用&?分隔

?2.編程式導(dǎo)航傳參：調(diào)用 wx.navigateTo(Object object) 方法跳轉(zhuǎn)頁面時(shí)，也可以攜帶參數(shù)

?3.在onLoad中接收導(dǎo)航參數(shù)(聲明式或編程式都一樣接收，并且是在跳轉(zhuǎn)頁面對(duì)應(yīng)的onLoad中接收)

?3.2 頁面事件

?3.2.1 下拉刷新

啟用下拉刷新有兩種方式：

全局開啟下拉刷新：在 app.json 的 window 節(jié)點(diǎn)中，將 enablePullDownRefresh 設(shè)置為 true局部開啟下拉刷新：在頁面的 .json 配置文件中，將 enablePullDownRefresh 設(shè)置為 true(推薦使用)

? ? 2.? 在全局或頁面的 .json 配置文件中，通過 backgroundColor 和 backgroundTextStyle 來配置下拉刷新窗口的樣式，其中：

backgroundColor 用來配置下拉刷新窗口的背景顏色，僅支持16 進(jìn)制的顏色值backgroundTextStyle 用來配置下拉刷新 loading 的樣式，僅支持 dark 和 light

? ? 3.? 監(jiān)聽頁面的下拉刷新事件：在頁面的 .js 文件中，通過 onPullDownRefresh() 函數(shù)即可監(jiān)聽當(dāng)前頁面的下拉刷新事件

? ? 4.? 停止下拉刷新：調(diào)用 wx.stopPullDownRefresh() 可以停止當(dāng)前頁面的下拉刷新

?3.2.2 上拉觸底事件

?是指通過手指在屏幕上的上拉滑動(dòng)操作，從而加載更多數(shù)據(jù)的行為。

?監(jiān)聽頁面的上拉觸底事件：在頁面的 .js 文件中，通過 onReachBottom() 函數(shù)即可監(jiān)聽當(dāng)前頁面的上拉觸底事件?

? ? 2?.?配置上拉觸底距離(觸發(fā)上拉觸底事件時(shí)，滾動(dòng)條距離頁面底部的距離)：可以在全局或頁面的 .json 配置文件中，通過 onReachBottomDistance 屬性來配置上拉觸底的距離(默認(rèn)50px)

?3.2.3 自定義編譯模式

3.3 生命周期?

?3.3.1 生命周期與聲明周期函數(shù)

生命周期（Life Cycle）是指一個(gè)對(duì)象從創(chuàng)建 -> 運(yùn)行 -> 銷毀的整個(gè)階段，強(qiáng)調(diào)的是一個(gè)時(shí)間段 生命周期的分類：

應(yīng)用生命周期：特指小程序從啟動(dòng) -> 運(yùn)行 -> 銷毀的過程頁面生命周期：特指小程序中，每個(gè)頁面的加載 -> 渲染 -> 銷毀的過程

? ? ?3. 生命周期函數(shù)：是由小程序框架提供的內(nèi)置函數(shù)，會(huì)伴隨著生命周期，自動(dòng)按次序執(zhí)行，允? ? ? ? ? ?許程序員在特定的時(shí)間點(diǎn)，執(zhí)行某些特定的操作

? ? ? ? ?注意：生命周期強(qiáng)調(diào)的是時(shí)間段，生命周期函數(shù)強(qiáng)調(diào)的是時(shí)間點(diǎn)

? ? ?4. 生命周期函數(shù)的分類：

應(yīng)用的生命周期函數(shù)：特指小程序從啟動(dòng) -> 運(yùn)行 -> 銷毀期間依次調(diào)用的那些函數(shù)頁面的生命周期函數(shù)：特指小程序中，每個(gè)頁面從加載 -> 渲染 -> 銷毀期間依次調(diào)用的那些函數(shù)

? ? ?5. 應(yīng)用生命周期函數(shù)：小程序的應(yīng)用生命周期函數(shù)需要在 app.js 中進(jìn)行聲明

? ? 6. 頁面的生命周期函數(shù)：小程序的頁面生命周期函數(shù)需要在頁面的 .js 文件中進(jìn)行聲明

?3.4 WXS腳本

?? WXS（WeiXin Script）是小程序獨(dú)有的一套腳本語言，結(jié)合 WXML，可以構(gòu)建出頁面的結(jié)構(gòu)

??3.4.1 WXS與JavaScript的關(guān)系

wxs 有自己的數(shù)據(jù)類型

number 數(shù)值類型、string 字符串類型、boolean 布爾類型、object 對(duì)象類型、function 函數(shù)類型、array 數(shù)組類型、 date 日期類型、 regexp 正則?

? ? ?2. wxs 不支持類似于 ES6 及以上的語法形式

不支持：let、const、解構(gòu)賦值、展開運(yùn)算符、箭頭函數(shù)、對(duì)象屬性簡寫、etc…支持：var 定義變量、普通 function 函數(shù)等類似于 ES5 的語法

? ? ?3. wxs 遵循 CommonJS 規(guī)范

module 對(duì)象require() 函數(shù)module.exports 對(duì)象

?3.4.2 基礎(chǔ)語法

1.內(nèi)嵌WXS腳本?

?wxml 文件中的每個(gè)標(biāo)簽，必須提供 module 屬性，用來指定當(dāng)前 wxs 的模塊名稱，方便在 wxml 中訪問模塊中的成員

?2. 定義外聯(lián)的WXS腳本

??wxs 代碼還可以編寫在以 .wxs 為后綴名的文件內(nèi)，就像 javascript 代碼可以編寫在以 .js 為后綴名的文件中一樣

?3. 使用外聯(lián)的WXS腳本

?在 wxml 中引入外聯(lián)的 wxs 腳本時(shí)，必須為?標(biāo)簽添加 module 和 src 屬性，其中：module 用來指定模塊的名稱，src 用來指定要引入的腳本的路徑，且必須是相對(duì)路徑

4. 小程序-基礎(chǔ)加強(qiáng)

4.1 自定義組件

4.1.1 組件的創(chuàng)建與引用?

創(chuàng)建組件

在項(xiàng)目的根目錄中，鼠標(biāo)右鍵，創(chuàng)建 components -> test 文件夾在新建的 components -> test 文件夾上，鼠標(biāo)右鍵，點(diǎn)擊“新建 Component”鍵入組件的名稱之后回車，會(huì)自動(dòng)生成組件對(duì)應(yīng)的 4 個(gè)文件，后綴名分別為 .js，.json， .wxml 和 .wxss建議把不同的組件，存放到單獨(dú)目錄中

? ? ? 2.? 局部引用組件：在頁面的 .json 配置文件中引用組件的方式

? ? ?3. 全局引用組件：在 app.json 全局配置文件中引用組件的方式

? ?4. 組件和頁面的區(qū)別

組件的 .json 文件中需要聲明 “component”: true 屬性組件的 .js 文件中調(diào)用的是 Component() 函數(shù)組件的事件處理函數(shù)需要定義到 methods 節(jié)點(diǎn)中

?4.1.2 樣式

組件樣式隔離：默認(rèn)情況下，自定義組件的樣式只對(duì)當(dāng)前組件生效，不會(huì)影響到組件之外的 UI 結(jié)構(gòu) 組件樣式隔離的注意點(diǎn)：

app.wxss 中的全局樣式對(duì)組件無效只有 class 選擇器會(huì)有樣式隔離效果，id 選擇器、屬性選擇器、標(biāo)簽選擇器不受樣式隔離的影響

? ? 3. 修改組件的樣式隔離選項(xiàng)：可以通過 styleIsolation 修改組件的樣式隔離選項(xiàng)

?

?建議：在組件和引用組件的頁面中建議使用 class 選擇器，不要使用 id、屬性、標(biāo)簽選擇器

?4.1.3 數(shù)據(jù)、方法和屬性

data數(shù)據(jù)：在小程序組件中，用于組件模板渲染的私有數(shù)據(jù)，需要定義到 data 節(jié)點(diǎn)中，data 更傾向于存儲(chǔ)組件的私有數(shù)據(jù)methods 方法：在小程序組件中，事件處理函數(shù)和自定義方法需要定義到 methods 節(jié)點(diǎn)中properties屬性：在小程序組件中，properties 是組件的對(duì)外屬性，用來接收外界傳遞到組件中的數(shù)據(jù)，properties 更傾向于存儲(chǔ)外界傳遞到組件中的數(shù)據(jù)

?4.1.4 數(shù)據(jù)監(jiān)聽器

數(shù)據(jù)監(jiān)聽器用于監(jiān)聽和響應(yīng)任何屬性和數(shù)據(jù)字段的變化，從而執(zhí)行特定的操作。它的作用類似于 vue 中的 watch 偵聽器?

? ? 2. 數(shù)據(jù)監(jiān)聽器的基本用法:

? ? 3. 監(jiān)聽對(duì)象屬性的變化

? ? 4. 數(shù)據(jù)監(jiān)聽器案例

?

? ? 5.? 監(jiān)聽對(duì)象中所有屬性的變化:使用通配符**?來監(jiān)聽,如?'rgb.**':function(obj){}

?4.1.5 純數(shù)據(jù)字段

純數(shù)據(jù)字段指的是那些不用于界面渲染的 data 字段 使用規(guī)則：在 Component 構(gòu)造器的 options 節(jié)點(diǎn)中，指定 pureDataPattern 為一個(gè)正則表達(dá)式，字段名符合這個(gè)正則表達(dá)式的字段將成為純數(shù)據(jù)字段

?

?4.1.6 組件的生命周期

?1.小程序組件的聲明周期：

?2. lifetimes 節(jié)點(diǎn)：在小程序組件中，生命周期函數(shù)可以直接定義在 Component 構(gòu)造器的第一級(jí)參數(shù)中，可以在 lifetimes 字段內(nèi)進(jìn)行聲明（這是推薦的方式，其優(yōu)先級(jí)最高）

?

?4.1.7 組件所在頁面的生命周期

組件所在頁面生命周期函數(shù)：

? ??2. pageLifetimes 節(jié)點(diǎn)：

?

?4.1.8 插槽

在自定義組件的 wxml 結(jié)構(gòu)中，可以提供一個(gè)?節(jié)點(diǎn)（插槽），用于承載組件使用者提供的 wxml 結(jié)構(gòu) 單個(gè)插槽：在小程序中，默認(rèn)每個(gè)自定義組件中只允許使用一個(gè)?進(jìn)行占位

? ?3. 啟用多個(gè)插槽：在組件的 .js 文件定義

? ? 4.?定義多個(gè)插槽：在組件的 .wxml 中使用多個(gè)標(biāo)簽，以不同的 name 來區(qū)分不同的插槽

?

4.1.9 父子組件之間的通信

父子組件的通信方式

? ? 2. 屬性綁定?

? ? 3.? 事件綁定步驟：

?在父組件的 js 中，定義一個(gè)函數(shù)，這個(gè)函數(shù)即將通過自定義事件的形式，傳遞給子組件

?

?在父組件的 wxml 中，通過自定義事件的形式，將步驟 1 中定義的函數(shù)引用，傳遞給子組件

?

在子組件的 js 中，通過調(diào)用?this.triggerEvent('自定義事件名稱', { /* 參數(shù)對(duì)象 */ })?，將數(shù)據(jù)發(fā)送到父組件

?

?在父組件的 js 中，通過 e.detail 獲取到子組件傳遞過來的數(shù)據(jù)

?

? ? ?4. 獲取組件實(shí)例：可在父組件里調(diào)用 this.selectComponent(“id或class選擇器”) ，獲取子組件的實(shí)例對(duì)象，從而直接訪問子組件的任意數(shù)據(jù)和方法。調(diào)用時(shí)需要傳入一個(gè)選擇器，如 this.selectComponent(".my-component")

?4.1.10 behaviors

是在小程序中，用于實(shí)現(xiàn)組件間代碼共享的特性，類似于 Vue.js 中的 “mixins”behaviors 的工作方式：每個(gè) behavior 可以包含一組屬性、數(shù)據(jù)、生命周期函數(shù)和方法。組件引用它時(shí)，它的屬性、數(shù)據(jù)和方法會(huì)被合并到組件中。每個(gè)組件可以引用多個(gè) behavior，behavior 也可以引用其它 behavior創(chuàng)建：調(diào)用 Behavior(Object object) 方法即可創(chuàng)建一個(gè)共享的 behavior 實(shí)例對(duì)象，供所有的組件使用

?

? ? ?4. 導(dǎo)入并使用：在組件中，使用 require() 方法導(dǎo)入需要的 behavior，掛載后即可訪問 behavior 中的數(shù)據(jù)或方法

? ? ?5.?behavior可用節(jié)點(diǎn)

? ? ?6.? 同名字段處理規(guī)則：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/behaviors.html

?4.2 使用npm包

?4.2.1 Vant Weapp

官方文檔地址 https://youzan.github.io/vant-weapp 安裝 ：https://youzan.github.io/vant-weapp/#/quickstart#an-zhuang

通過 npm 安裝（建議指定版本為@1.3.3）構(gòu)建 npm 包修改 app.json

? ? ?3. 使用：安裝完 Vant 組件庫之后，可以在 app.json 的 usingComponents 節(jié)點(diǎn)中引入需要的組件，即可在 wxml 中直接使用組件

?

? ? 4. 定義全局主體樣式：https://developer.mozilla.org/zh-? ? ? ? CN/docs/Web/CSS/Using_CSS_custom_properties

在 app.wxss 中，寫入 CSS 變量，即可對(duì)全局生效，所有可用的顏色變量

?

?4.2.2 API Promise化

?1. 默認(rèn)情況下，小程序官方提供的異步 API 都是基于回調(diào)函數(shù)實(shí)現(xiàn)的

?

?2. 實(shí)現(xiàn)：在小程序中，實(shí)現(xiàn) API Promise 化主要依賴于?miniprogram-api-promise?這個(gè)第三方的 npm 包

?

?注意，微信小程序每次安裝第三方包之后必須需要構(gòu)建npm,建議先將miniprogram_npm先刪除再構(gòu)建

3. 調(diào)用

?4.3 全局?jǐn)?shù)據(jù)共享

全局?jǐn)?shù)據(jù)共享（又叫做：狀態(tài)管理）是為了解決組件之間數(shù)據(jù)共享的問題，如Vuex,Redux,MobX 等 在小程序中，可使用 mobx-miniprogram 配合 mobx-miniprogram-bindings 實(shí)現(xiàn)全局?jǐn)?shù)據(jù)共享。其中：

mobx-miniprogram 用來創(chuàng)建 Store 實(shí)例對(duì)象mobx-miniprogram-bindings 用來把 Store 中的共享數(shù)據(jù)或方法，綁定到組件或頁面中使用

?4.3.1 MobX

安裝包：npm i --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1 注意：MobX 相關(guān)的包安裝完畢之后，記得刪除 miniprogram_npm 目錄后，重新構(gòu)建 npm

? ? ?2.創(chuàng)建 MobX 的 Store 實(shí)例 store.js

?

? ? ?3.? 將 Store 中的成員綁定到頁面中

?

? ? ? 4. 在頁面上使用 Store 中的成員

? ? ? 5.?將 Store 中的成員綁定到組件中

? ? ? 6.?在組件中使用 Store 中的成員

?4.4 分包

?4.4.1 概念

分包指的是把一個(gè)完整的小程序項(xiàng)目，按照需求劃分為不同的子包，在構(gòu)建時(shí)打包成不同的分包，用戶在使用時(shí)按需進(jìn)行加載 分包后，小程序項(xiàng)目由 1 個(gè)主包 + 多個(gè)分包組成：

主包：一般只包含項(xiàng)目的啟動(dòng)頁面或 TabBar 頁面、以及所有分包都需要用到的一些公共資源分包：只包含和當(dāng)前分包有關(guān)的頁面和私有資源

? ? ?3. 加載規(guī)則

在小程序啟動(dòng)時(shí)，默認(rèn)會(huì)下載主包并啟動(dòng)主包內(nèi)頁面：tabBar 頁面需要放到主包中當(dāng)用戶進(jìn)入分包內(nèi)某個(gè)頁面時(shí)，客戶端會(huì)把對(duì)應(yīng)分包下載下來，下載完成后再進(jìn)行展示：非 tabBar 頁面可以按照功能的不同，劃分為不同的分包之后，進(jìn)行按需下載

? ? 4. 體積限制

整個(gè)小程序所有分包大小不超過 16M（主包 + 所有分包）單個(gè)分包/主包大小不能超過 2M

?4.4.2 分包的基本用法

?1.配置方法

?

?2. 打包規(guī)則

小程序會(huì)按 subpackages 的配置進(jìn)行分包，subpackages 之外的目錄將被打包到主包中主包也可以有自己的 pages（即最外層的 pages 字段）tabBar 頁面必須在主包內(nèi)分包之間不能互相嵌套

?3.?引用規(guī)則

主包無法引用分包內(nèi)的私有資源分包之間不能相互引用私有資源分包可以引用主包內(nèi)的公共資源

?4.4.3 獨(dú)立分包

獨(dú)立分包本質(zhì)上也是分包，只不過它比較特殊，可以獨(dú)立于主包和其他分包而單獨(dú)運(yùn)行 獨(dú)立分包與普通分包的區(qū)別：

普通分包必須依賴于主包才能運(yùn)行獨(dú)立分包可以在不下載主包的情況下，獨(dú)立運(yùn)行

? ? ?3.? 應(yīng)用場景

當(dāng)小程序從普通的分包頁面啟動(dòng)時(shí)，需要首先下載主包 而獨(dú)立分包不依賴主包即可運(yùn)行，可以很大程度上提升分包頁面的啟動(dòng)速度 注意：一個(gè)小程序中可以有多個(gè)獨(dú)立分包

? ? ?4. 配置方法

? ? ?5.?引用規(guī)則

主包無法引用獨(dú)立分包內(nèi)的私有資源獨(dú)立分包之間，不能相互引用私有資源獨(dú)立分包和普通分包之間，不能相互引用私有資源特別注意：獨(dú)立分包中不能引用主包內(nèi)的公共資源

?4.4.4 分包預(yù)下載

是指在進(jìn)入小程序的某個(gè)頁面時(shí)，由框架自動(dòng)預(yù)下載可能需要的分包，從而提升進(jìn)入后續(xù)分包頁面時(shí)的啟動(dòng)速度。 配置：會(huì)在進(jìn)入指定的頁面時(shí)觸發(fā)，在 app.json 中，使用 preloadRule 節(jié)點(diǎn)定義分包的預(yù)下載規(guī)則

?

? ? 3. 限制：同一個(gè)分包中的頁面享有共同的預(yù)下載大小限額 2M

?4.5 自定義tabBar

?官方文檔：https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html

?1.首先在app.json中設(shè)置如下：

?2.在根目錄新建store/store.js文件

?3.在根目錄新建custom-tab-bar文件夾，在里面新建index組件，名字固定

// custom-tab-bar/index.js

import {storeBindingsBehavior} from 'mobx-miniprogram-bindings'

import {store} from '../store/store'

Component({

options:{

styleIsolation:'shared'

},

behaviors:[storeBindingsBehavior],

storeBindings:{

// 數(shù)據(jù)源

store,

fields:{

sum:'sum',

active:'activeTabBarIndex'

},

actions:{

updateActive:'updateActiveTabBarIndex'

}

},

observers:{

'sum':function(val){

this.setData({

'list[1].info':val

})

}

},

data: { // 組件的初始數(shù)據(jù)

"list": [

{

"pagePath": "/pages/home/home",

"text": "首頁",

"iconPath": "/images/tabs/home.png",

"selectedIconPath": "/images/tabs/home-active.png"

},

{

"pagePath": "/pages/message/message",

"text": "消息",

"iconPath": "/images/tabs/message.png",

"selectedIconPath": "/images/tabs/message-active.png",

"info":2

},

{

"pagePath": "/pages/contact/contact",

"text": "聯(lián)系我們",

"selectedIconPath": "/images/tabs/contact-active.png",

"iconPath": "/images/tabs/contact.png"

}

],

},

methods: { // 組件的方法列表

onChange(event) {

// event.detail 的值為當(dāng)前選中項(xiàng)的索引

// this.setData({ active: event.detail });

this.updateActive(event.detail)

wx.switchTab({

url: this.data.list[event.detail].pagePath,

})

},

}

})

{{item.text}}

/* custom-tab-bar/index.wxss */

.van-tabbar-item{

--tabbar-item-margin-bottom:0

}

4.? 實(shí)現(xiàn)效果

?

??

柚子快報(bào)激活碼778899分享：微信小程序?qū)W習(xí)筆記(黑馬)

http://yzkb.51969.com/

精彩內(nèi)容