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

自定义组件

组件的创建与引用

1.创建组件

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

2.局部引用

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

3.局部引用组件

自定义组件、使用npm包、全局数据共享、分包_第1张图片

4.全局引用组件

自定义组件、使用npm包、全局数据共享、分包_第2张图片

5.全局引用 VS局部引用

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

6.组件和页面的区别

自定义组件、使用npm包、全局数据共享、分包_第3张图片

自定义组件-样式

1.组件样式隔离

自定义组件、使用npm包、全局数据共享、分包_第4张图片

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

自定义组件、使用npm包、全局数据共享、分包_第5张图片

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

自定义组件、使用npm包、全局数据共享、分包_第6张图片

4.stylelsolation的可选值

自定义组件、使用npm包、全局数据共享、分包_第7张图片

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

1.data数据

自定义组件、使用npm包、全局数据共享、分包_第8张图片

2.methods方法

自定义组件、使用npm包、全局数据共享、分包_第9张图片
wx.showToast()弹窗,类似于alert()

3.properties属性

自定义组件、使用npm包、全局数据共享、分包_第10张图片

4.data和properties的区别

自定义组件、使用npm包、全局数据共享、分包_第11张图片

5.使用setData修改properties的值

自定义组件、使用npm包、全局数据共享、分包_第12张图片

自定义组件-数据监听器

1.什么是数据监听器

自定义组件、使用npm包、全局数据共享、分包_第13张图片

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

自定义组件、使用npm包、全局数据共享、分包_第14张图片
自定义组件、使用npm包、全局数据共享、分包_第15张图片

3.监听对象属性的变化

自定义组件、使用npm包、全局数据共享、分包_第16张图片

自定义组件-纯数据字段

1.什么是纯数据字段

自定义组件、使用npm包、全局数据共享、分包_第17张图片

2.使用规则

自定义组件、使用npm包、全局数据共享、分包_第18张图片
快速修改一样的代码 选中变量,crtl+D

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

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

自定义组件、使用npm包、全局数据共享、分包_第19张图片

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

自定义组件、使用npm包、全局数据共享、分包_第20张图片

3.lifetimes节点

自定义组件、使用npm包、全局数据共享、分包_第21张图片

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

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

自定义组件、使用npm包、全局数据共享、分包_第22张图片

2.pageLifetimes节点

自定义组件、使用npm包、全局数据共享、分包_第23张图片

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

自定义组件、使用npm包、全局数据共享、分包_第24张图片
在组件所在页面被展示时就调用
自定义组件、使用npm包、全局数据共享、分包_第25张图片

自定义组件-插槽

1.什么是插槽

自定义组件、使用npm包、全局数据共享、分包_第26张图片

2.单个插槽

自定义组件、使用npm包、全局数据共享、分包_第27张图片

3.启用多个插槽

自定义组件、使用npm包、全局数据共享、分包_第28张图片

4.定义多个插槽

自定义组件、使用npm包、全局数据共享、分包_第29张图片

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

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

自定义组件、使用npm包、全局数据共享、分包_第30张图片

2.属性绑定

自定义组件、使用npm包、全局数据共享、分包_第31张图片
自定义组件、使用npm包、全局数据共享、分包_第32张图片

3.事件绑定

自定义组件、使用npm包、全局数据共享、分包_第33张图片
事假绑定步骤
自定义组件、使用npm包、全局数据共享、分包_第34张图片
自定义组件、使用npm包、全局数据共享、分包_第35张图片
在这里插入图片描述
自定义组件、使用npm包、全局数据共享、分包_第36张图片

4.获取组件实例

自定义组件、使用npm包、全局数据共享、分包_第37张图片

自定义组件-behaviors

1.什么是behaviors

自定义组件、使用npm包、全局数据共享、分包_第38张图片

2.behaviors的工作方式

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

3.创建behavior

自定义组件、使用npm包、全局数据共享、分包_第39张图片
自定义组件、使用npm包、全局数据共享、分包_第40张图片

4.导入并使用behavior

自定义组件、使用npm包、全局数据共享、分包_第41张图片

5.behavior中所有可用的节点

自定义组件、使用npm包、全局数据共享、分包_第42张图片

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

自定义组件、使用npm包、全局数据共享、分包_第43张图片

使用npm包

小程序对npm的支持与限制

自定义组件、使用npm包、全局数据共享、分包_第44张图片

使用npm包-Vant Weapp

1.什么是Vant Weapp

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

2.安装Vant组件库

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

npm inint -y
3.使用vant组件

自定义组件、使用npm包、全局数据共享、分包_第45张图片

4.定制全局主题样式

自定义组件、使用npm包、全局数据共享、分包_第46张图片
自定义组件、使用npm包、全局数据共享、分包_第47张图片
CSS自定义变量也是有作用于的,全局html{定义CSS自定义变量},微信小程序的根节点为page,page{//设置CSS自定义变量}
自定义组件、使用npm包、全局数据共享、分包_第48张图片

5.定制全局主题样式

自定义组件、使用npm包、全局数据共享、分包_第49张图片
自定义组件、使用npm包、全局数据共享、分包_第50张图片

使用npm包-API Promise化

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

自定义组件、使用npm包、全局数据共享、分包_第51张图片
缺点:容易造成回调地狱的问题,代码的可读性、维护性差

2.什么是API Promise化

自定义组件、使用npm包、全局数据共享、分包_第52张图片

3.实现API Promise化

自定义组件、使用npm包、全局数据共享、分包_第53张图片

npm i --save miniprogram-api-promise

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

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

自定义组件、使用npm包、全局数据共享、分包_第54张图片

全局数据共享

1.什么是数据共享

自定义组件、使用npm包、全局数据共享、分包_第55张图片

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

自定义组件、使用npm包、全局数据共享、分包_第56张图片

全局数据共享-MobX

1.安装MobX相关的包

自定义组件、使用npm包、全局数据共享、分包_第57张图片

2.创建MobX的Store实例

自定义组件、使用npm包、全局数据共享、分包_第58张图片

3.将Store里面的成员绑定到页面中

自定义组件、使用npm包、全局数据共享、分包_第59张图片

4.在页面上使用Store中的成员

自定义组件、使用npm包、全局数据共享、分包_第60张图片

5.将Store中的成员绑定到组件中

自定义组件、使用npm包、全局数据共享、分包_第61张图片

6.在组件中使用Store中的成员

自定义组件、使用npm包、全局数据共享、分包_第62张图片

分包

1.什么是分包

分包指的是把一个完整的小程序项目,按需求划分为不同的子包,在构建时打包成不同的分包,用户在使用时按需加载

2.分包的好处

对小程序进行分包的好处主要有以下两点:
①可以优化小程序首次启动的下载时间
②在多团队共同开发时可以更好的解耦协作

3.分包前项目的构成

自定义组件、使用npm包、全局数据共享、分包_第63张图片

4.分包之后项目的构成

自定义组件、使用npm包、全局数据共享、分包_第64张图片

5.分包的加载规则

自定义组件、使用npm包、全局数据共享、分包_第65张图片

6.分包的体积限制

自定义组件、使用npm包、全局数据共享、分包_第66张图片

分包-使用分包

1.配置方法

自定义组件、使用npm包、全局数据共享、分包_第67张图片
自定义组件、使用npm包、全局数据共享、分包_第68张图片

2.打包原则

自定义组件、使用npm包、全局数据共享、分包_第69张图片

3.引用原则

自定义组件、使用npm包、全局数据共享、分包_第70张图片

分包-独立分包

1.什么是独立分包

自定义组件、使用npm包、全局数据共享、分包_第71张图片

2.独立分包和普通分包的区别

自定义组件、使用npm包、全局数据共享、分包_第72张图片

3.独立分包的应用场景

自定义组件、使用npm包、全局数据共享、分包_第73张图片

4.独立分包的配置方法

自定义组件、使用npm包、全局数据共享、分包_第74张图片

5.引用原则

自定义组件、使用npm包、全局数据共享、分包_第75张图片

分包-分包预下载

1.什么是分包预下载

分包预下载指的是:在进入小程序的某个页面时,由框架自动预下载可能需要的分包,从而提升进入后续分包页面时的启动速度

2.配置分包的预下载

自定义组件、使用npm包、全局数据共享、分包_第76张图片

3.分包预下载的限制

自定义组件、使用npm包、全局数据共享、分包_第77张图片

你可能感兴趣的:(小程序开发,npm,前端,javascript,微信小程序)