1.總結小程序生命周期

1. 小程序冷啟動，鉤子函數執行的順序
2. 保留當前頁面，進入下一個頁面，鉤子函數執行的順序
3. 銷毀當前頁面，進入下一個頁面，鉤子函數執行的順序
4. 小程序熱啟動，鉤子函數執行的順序

2.使用Component構造頁面

用于創建自定義組件
component方法必page更強大

Component({// 可以用component方法配置// 注意事項：// 1. .json文件中必須包含usingComponents字段// 2. 里面的配置項需要和Component中的配置項一致// 3. 頁面中Page方法有一些鉤子函數，事件監聽方法，這些鉤子函數，事件監聽方法必須寫在methods對象中// 4. 頁面的屬性 properties 也可以接受頁面的參數，在onLoad鉤子函數中可以通過this.data 進行獲取properties: {id: String,title: String},data: {name: 'tom'},methods: {updateName () {   this.setData({name : 'jerry'})},onLoad (options) {console.log(this.data.id);console.log(this.data.title);console.log(this.properties.id);}}
})

3. 組件復用機制behaviors

• behaviors是一種代碼復用的方式，將通用的邏輯和方法提取出來，在多個組件中復用
• 如果要用behaviors復用代碼，用Behaviors()方法，每個behaviors可以包含一組屬性、數據、生命周期函數的方法
• 組件引用它時，他的屬性、數據、方法被合并到組件中，生命周期也會在對應的時機被調用

const behavior = Behavior({/*** 組件的屬性列表*/properties: {label: {type: String,value: '我已同意'}},/*** 組件的初始數據*/data: {name: 'tom',obj: {name: 'tyke'}},/*** 組件的方法列表 */methods: {updateName () {this.setData({name: 'jerry'})}},lifetimes: {attached () {console.log('我是組件的生命周期函數')}}
})
export default behavior

// 導入
import behavior from './behavior';
Component({// 注冊behaviors: [behavior]
})  

在以后開發中，組件與behavior存在相同的字段時：

1. properties相同的話，會使用組件內部的數據
2. data相同的話，如果是對象類型會進行合并（相同的也會以組件內部為先），不是對象類型，以組件內部為準
3. methods相同的話，使用組件內部的數據
4. 生命周期函數相同的話，兩個都會被觸發，先執行behavior的，在執行組件內部的

4.外部樣式類

在使用組件時，組件使用者可以給組件傳入CSS類名，通過傳入的類名修改組件的樣式。
如果需要外部樣式類修改組件的樣式，在Component中要用externalClasses定義若干個外部樣式類。

// Component中 .js
// 組件接受的外部樣式類externalClasses: [ 'extend-class' ],// page頁面中
<!-- 屬性是在 externalClasses 里面定義的元素 -->
<!-- 屬性值必須是一個類名 -->
<custom08 extend-class="my-class"/>.my-class {color: aquamarine;
}// Component中 .wxml
<!-- 如果外部樣式類和普通樣式類都存在，兩個類的優先級未定義，建議在添加外部樣式類時加!important增加權重 -->
<view class="extend-class">通過外部樣式類修改組件樣式</view>

5.完善復選框案例以及總結自定義組件

6.使用npm包

npm init -y
npm i @vant/weapp
不是所有的包都能在微信小程序內使用，要先確定是否能在小程序使用

7.自定義構建npm

對目錄進行調整優化，要在project.config.json中指定node_modules的位置和目標miniprogram_npm的位置
具體配置如下：

1. 配置 project.config.json 的 miniprogramRoot 指定小程序源碼的目錄
2. 配置 project.config.json 的 setting.packNpmManually 為 true，開啟自定義 node_modules 和 miniprogram_npm 位置的構建 npm 方式
3. 配置 project.config.json 的 setting.packNpmRelationList 項，指定 packageJsonPath 和 miniprogramNpmDistDir 的位置

{"compileType": "miniprogram","miniprogramRoot": "/miniprogram","setting": {"es6": true,"postcss": true,"minified": true,"uglifyFileName": false,"enhance": true,"packNpmManually": true,"packNpmRelationList": [{"packageJsonPath": "/package","miniprogramNpmDistDir": "/miniprogram"}],"babelSetting": {"ignore": [],"disablePlugins": [],"outputPath": ""},"useCompilerPlugins": ["sass"],"minifyWXML": true},"compileType": "miniprogram","simulatorPluginLibVersion": {},"packOptions": {"ignore": [],"include": []},"appid": "wx28f413c3f05907a4","editorSetting": {}
}

8.Vant Weapp組件庫的使用

將style: v2 去除
在使用van-image圖片組件渲染本地圖片時，不能使用…/ ，需要相對于小程序源碼的目錄來查找圖片才可以

// app.json全局樣式
"usingComponents": {"van-image": "@vant/weapp/image/index","van-loading": "@vant/weapp/loading/index"}// index.wxml
<!-- 圖片組件接收外部樣式類 -->
<van-image 
custom-class="custom-class"
width="100" 
height="100" 
round 
src="https://img.yzcdn.cn/vant/cat.jpeg" 
bind:tap="imageHandler"
>
<!-- slot插槽的使用 -->
<van-loading slot="loading" type="spinner" size="20" vertical />
<text slot="error">加載失敗</text>
</van-image>

9.Vant Weapp組件樣式覆蓋

1. 解除樣式隔離：在頁面中使用 Vant Weapp 組件時，可直接在頁面的樣式文件中覆蓋樣式

在自定義組件中如果需要Vant Weapp組件的樣式，需要解除樣式隔離，shared

options: {styleIsolation: 'shared'},

2. 使用外部樣式類：需要注意的是普通樣式類和外部樣式類的優先級是未定義的，使用時需要添加 !important 保證外部樣式類的優先級

<van-button custom-class="custom-class" type="primary">主要按鈕</van-button>

3. 使用 CSS 變量：在頁面或全局對多個組件的樣式做批量修改以進行主題樣式的定制

10.小程序分包加載

限制：
整個小程序所有分包大小（主包加分包）不超過20MB
單個分包/珠寶大小不超過2MB