微信小程序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'
    },
  1. 使用外部样式类:需要注意的是普通样式类和外部样式类的优先级是未定义的,使用时需要添加 !important 保证外部样式类的优先级

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

  2. 使用 CSS 变量:在页面或全局对多个组件的样式做批量修改以进行主题样式的定制

10.小程序分包加载

限制:

整个小程序所有分包大小(主包加分包)不超过20MB

单个分包/珠宝大小不超过2MB

相关推荐
dssxyz7 小时前
uniapp打包微信小程序主包过大问题_uniapp 微信小程序时主包太大和vendor.js过大
javascript·微信小程序·uni-app
!win !7 小时前
被老板怼后,我为uni-app项目引入环境标志
前端·小程序·uni-app
澄江静如练_11 小时前
微信小程序发体验版
微信小程序·小程序
流口水的兔子15 小时前
作为一个新手,如果让你去用【微信小程序通过BLE实现与设备通讯】,你会怎么做,
前端·物联网·微信小程序
一念杂记15 小时前
免费开源!微信小程序商城源码,快速搭建你的线上商城系统!
微信小程序·uni-app
张晓~1833994812117 小时前
数字人源码部署流程分享--- PC+小程序融合方案
javascript·小程序·矩阵·aigc·文心一言·html5
The_era_achievs_hero19 小时前
微信小程序61~70
微信小程序·小程序
编程猪猪侠20 小时前
Taro+Vue3实现微信小程序富文本编辑器组件开发指南
vue.js·微信小程序·taro
汤姆yu1 天前
基于微信小程序的学校招生系统
微信小程序·小程序·招生小程序