微信小程序-进阶使用

自定义组件

组件和页面的区别

引用

局部引用

全局引用

样式隔离

页面样式不影响自定义样式，自定义样式不影响页面样式

全局样式也对组件无效

只有class选择器会有样式隔离效果，id 选择器、属性选择器、标签选择器不受样式隔离的影响

建议多使用class选择器

通过styleIsolation修改组件的样式隔离选项

properties属性

properties是组件的对外属性，用来接收外界传递到组件中的数据

==在小程序里，properties和data数据的用法相同，它们都是可读可写的==

数据监听器

类似于vue的watch侦听器

监听对象上的属性写法

'对象.属性A, 对象.属性A': function(a, b){
    
}
//**可以监听对象里所有的属性
'对象.**': function(obj){
    console.log(obj.a)
    console.log(obj.b)
}

纯数据字段

指那些不用于界面渲染的data字段，设置可以提升页面更新性能

指定pureDataPattern为一个正则表达式

组件生命周期函数

写在lifetimes节点里

分类

主要的生命周期函数

组件所在页面的生命函数

自定义组件的行为依赖于页面状态的变化

定义在pageLifetimes节点

插槽

默认组件只有一个插槽

如果需要多个插槽，要去手动配置

多个插槽用name属性来区分

//组件 test1
<slot name="one"></slot>
<slot name="two"></slot>

//使用者
<test1>
    <view slot="one"></view>
</test1>

通信

父子组件通信的3种方式

属性绑定

​ 父组件在子组件标签里传参，子组件用properties接收

事件绑定

获取子组件实例

behaviors

组件之间代码共享

创建

引入

同名覆盖和组合规则

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/behaviors.html

CSS自定义属性

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties

可以在app.wxss里配置全局属性

page{
    --danger-color: red;
}

全局数据共享

共享方案

分包

按需下载，减少小程序首次启动的下载时间

配置

引用原则

1. 主包无法引用分包内的私有资源
2. 分包之间不能互相引用
3. 分包可以引用主包内的公共资源

预下载

在app.json里配置preloadRule