• 自定义组件、使用npm包、全局数据共享、分包

    自定义组件

    组件的创建与引用

    1.创建组件

    ①在项目的根目录中，鼠标右键，创建components->test文件夹
    ②在新建的components->test文件夹上，鼠标右键，点击“新建Component”
    ③键入组件的名称之后回车，会自动生成组件对应的四个文件，后缀名分别为.js,.json,.wxml和.wxss

    2.局部引用

    组件的引用方式分为“局部引用”和“全局引用”，顾名思义：
    ①局部引用：组件只能在当前被引用的页面内使用
    ②全局引用：组件可以在每个小程序页面使用

    3.局部引用组件

    在这里插入图片描述

    4.全局引用组件

    在这里插入图片描述

    5.全局引用 VS局部引用

    根据组件的使用频率和范围，来选择合适的引用方式：
    ①如果某组件在多个页面中经常被用到，建议进行“全局引用”
    ②如果某个组件只在特定的页面中被用到，建议进行“局部引用”

    6.组件和页面的区别

    在这里插入图片描述

    自定义组件-样式

    1.组件样式隔离

    在这里插入图片描述

    2.组件样式隔离的注意点

    在这里插入图片描述

    3.修改组件的样式隔离选项

    在这里插入图片描述

    4.stylelsolation的可选值

    在这里插入图片描述

    自定义组件-数据、方法和属性

    1.data数据

    在这里插入图片描述

    2.methods方法

    在这里插入图片描述
    wx.showToast()弹窗，类似于alert()

    3.properties属性

    在这里插入图片描述

    4.data和properties的区别

    在这里插入图片描述

    5.使用setData修改properties的值

    在这里插入图片描述

    自定义组件-数据监听器

    1.什么是数据监听器

    在这里插入图片描述

    2.数据监听器的基本用法

    在这里插入图片描述
    在这里插入图片描述

    3.监听对象属性的变化

    在这里插入图片描述

    自定义组件-纯数据字段

    1.什么是纯数据字段

    在这里插入图片描述

    2.使用规则

    在这里插入图片描述
    快速修改一样的代码 选中变量，crtl+D

    自定义组件-组件的生命周期

    1.组件的全部生命周期函数

    在这里插入图片描述

    2.组件主要的生命周期函数

    在这里插入图片描述

    3.lifetimes节点

    在这里插入图片描述

    自定义组件-组件所在页面的生命周期

    1.什么是组件所在页面的声明周期

    在这里插入图片描述

    2.pageLifetimes节点

    在这里插入图片描述

    3.随机初始化组件展示内容

    在这里插入图片描述
    在组件所在页面被展示时就调用
    在这里插入图片描述

    自定义组件-插槽

    1.什么是插槽

    在这里插入图片描述

    2.单个插槽

    在这里插入图片描述

    3.启用多个插槽

    在这里插入图片描述

    4.定义多个插槽

    在这里插入图片描述

    自定义组件-父子组件之间的通信

    1.父子组件之间通信的3种方式

    在这里插入图片描述

    2.属性绑定

    在这里插入图片描述
    在这里插入图片描述

    3.事件绑定

    在这里插入图片描述
    事假绑定步骤
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    4.获取组件实例

    在这里插入图片描述

    自定义组件-behaviors

    1.什么是behaviors

    在这里插入图片描述

    2.behaviors的工作方式

    每个behavior可以包含一组属性、数据、生命周期函数和方法。组件引用他时，它的属性、数据和方法会被合并到组件中
    每个组件可以引用多个behavior,behavior也可以引用其他behavior.

    3.创建behavior

    在这里插入图片描述
    在这里插入图片描述

    4.导入并使用behavior

    在这里插入图片描述

    5.behavior中所有可用的节点

    在这里插入图片描述

    6.同名字段的覆盖和组合规则

    在这里插入图片描述

    使用npm包

    小程序对npm的支持与限制

    在这里插入图片描述

    使用npm包-Vant Weapp

    1.什么是Vant Weapp

    Vant Weapp是有赞前端团队开源的一套小程序UI组件库，助力开发者快速搭建小程序应用。它所使用到是MIT开源许可协议，对商业
    使用比较友好

    2.安装Vant组件库

    在小程序项目中，安装Vant组件库主要分为如下三步：
    ①通过npm安装
    ②构建npm包
    ③修改app.son
    先查看项目中有没有package.json包管理配置文件，
    配置命令

    npm inint -y

    • 1

    3.使用vant组件

    在这里插入图片描述

    4.定制全局主题样式

    在这里插入图片描述
    在这里插入图片描述
    CSS自定义变量也是有作用于的，全局html{定义CSS自定义变量}，微信小程序的根节点为page,page{//设置CSS自定义变量}
    在这里插入图片描述

    5.定制全局主题样式

    在这里插入图片描述
    在这里插入图片描述

    使用npm包-API Promise化

    1.基于回调函数的异步API的缺点

    在这里插入图片描述
    缺点：容易造成回调地狱的问题，代码的可读性、维护性差

    2.什么是API Promise化

    在这里插入图片描述

    3.实现API Promise化

    在这里插入图片描述

    npm i --save miniprogram-api-promise

    • 1

    小程序无法直接使用node_modulese里面的包，通过构建npm会生成miniprogram_npm来使用刚下好的包，每次构建之前建议删除miniprogram_npm文件夹以免报错

    4.调用Promise化之后的异步API

    在这里插入图片描述

    全局数据共享

    1.什么是数据共享

    在这里插入图片描述

    2.小程序中的全局数据共享方案

    在这里插入图片描述

    全局数据共享-MobX

    1.安装MobX相关的包

    在这里插入图片描述

    2.创建MobX的Store实例

    在这里插入图片描述

  • 相关阅读:
    ThreadLocal 原理
    TSINGSEE青犀视频汇聚机房动环智能监控方案，提升机房安全稳定性
    商业智能BI与业务管理决策思维之四：业务成本分析
    .NET周报【11月第1期 2022-11-07】
    Qt SQL：QSqlRelation、QSqlRelationalTableModel、QSqlRelationalDelegate
    科技部原副部长吴忠泽：尽早抢占元宇宙高地，掌握下一代互联网的话语权和主动权
    【自然场景文字检测与识别】文字检测算法之DBNet
    总结Rabbitmq的六种模式
    Git入门实战教程之创建版本库
    外贸软件助力国际贸易企业业财共享数字化转型升级
  • 原文地址：https://blog.csdn.net/m0_51195865/article/details/125508310