1.总结小程序生命周期
- 小程序冷启动，钩子函数执行的顺序
- 保留当前页面，进入下一个页面，钩子函数执行的顺序
- 销毁当前页面，进入下一个页面，钩子函数执行的顺序
- 小程序热启动，钩子函数执行的顺序
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存在相同的字段时：
- properties相同的话，会使用组件内部的数据
- data相同的话，如果是对象类型会进行合并（相同的也会以组件内部为先），不是对象类型，以组件内部为准
- methods相同的话，使用组件内部的数据
- 生命周期函数相同的话，两个都会被触发，先执行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的位置
具体配置如下：
-
配置 project.config.json 的 miniprogramRoot 指定小程序源码的目录
-
配置 project.config.json 的 setting.packNpmManually 为 true，开启自定义 node_modules 和 miniprogram_npm 位置的构建 npm 方式
-
配置 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组件样式覆盖
- 解除样式隔离：在页面中使用 Vant Weapp 组件时，可直接在页面的样式文件中覆盖样式
在自定义组件中如果需要Vant Weapp组件的样式，需要解除样式隔离，shared
options: {
styleIsolation: 'shared'
},-
使用外部样式类：需要注意的是普通样式类和外部样式类的优先级是未定义的，使用时需要添加 !important 保证外部样式类的优先级
<van-button custom-class="custom-class" type="primary">主要按钮</van-button>
-
使用 CSS 变量：在页面或全局对多个组件的样式做批量修改以进行主题样式的定制
10.小程序分包加载
限制：
整个小程序所有分包大小（主包加分包）不超过20MB
单个分包/珠宝大小不超过2MB