微信小程序71~80
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