微信小程序71~80

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