微信小程序day04基础加强

594 0 0

作者:Heymar-10

一.自定义组件

1.1 组件的创建与引用

首先创建组件

然后我们组件的引用分为局部和全局引用

局部引用就是在当前页面能使用，在当前页面的json文件里面配置

全局引用同样的道理，注意跟page等是同级的

组件与页面的不同：

虽然都有相应的四个文件

1.2 组件样式

首先，默认情况下组件的样式就是隔离的==，组件之间不会相互影响，小程序也不会影响到组件，组件也影响不到小程序

注意：

虽然默认情况下是隔离的，但是也可以一些设置让其不隔离

styleIsolation的属性：

1.3 数据、方法和属性

数据就是组件js里面的data节点里面的数据

方法就是组件js文件里面methods方法，区别于其他页面js的函数是直接写在里面的，组件的函数都需要写在methods里面

主要注意一点，如果不是事件的处理函数，不是由事件来触发，一般这样的函数前面都为一个_下划线

属性：properties

是组件用来接收外部传进来的一些数据

两者区别是上一种不用传值也有默认值

data和properties区别：

都是可读可写的，data倾向于存储私有数据，properties倾向于存储外部传进来的数据

properties也是通过setData来修改

1.4 数据监听器

类似于watch 这里面是 observers

要监听多个字段，直接写在一起通过，分割

同样还支持监听对象里面单个或多个属性的变化

如果是要监听对象里面所有的属性，通过两个通配符 **

而且对应的新值也是整个对象

1.5 纯数据字段

不用于界面渲染的data字段就是纯数据字段

对于这类数据用纯数据来定义更性能会更快

1.6 生命周期

组件的生命周期函数一共六个：

第一个还没有放入到页面节点树中，类似于beforeCreate

第二是放入了页面节点树，但是还没有渲染出来类似于beforeMount

最重要的一共三个：

要定义组件的生命周期，需要用到 lifetimes对象里面来写生命周期函数

还有一个就是组件所在页面的生命周期

就是当组件的行为需要依赖页面的变化的时候，但是组件能访问到页面的生命周期也不多就三个

同样的也需要写到一个对象里面， pageLifetimes

1.7 组件插槽

单个插槽

首先在组件里面通过slot来占位，然后页面使用组件这里直接写你自己的组件，注意是直接写，因为是单个插槽也不需要指定什么
多个插槽

如果要启用多个插槽，就需要配置一下，现在组件js配置options里面为multipleSlots为true

然后定义slot的时候需要指定name

使用的时候用 slot来指明name

1.8 父子组件通信

有三种方式：

属性绑定：仅能设置json兼容数据也就是仅能传一些简单数据，不能传方法等

注意页面也可以当做父组件

在页面的data定义自己的数据

直接通过属性绑定给到子组件

子组件通过properties来接受
事件绑定

子组件给父组件传数据的时候

首先父组件要在js定义这个自定义函数

然后给到子组件，给的时候就通过bind语法加你的事件名，这里最好用第二种形式，可以跟原生事件做一个区别

子组件这边通过 this.triggerEvent里面是事件名，和你要带的参数（对象形式）

最后父组件这边通过 e.detail获取参数
获取组件实例

也是父给子传，类似于ref，需要给子组件设置 class或者id，通过 this.selectComponent来获取到子组件从而可以去修改他的一些data、properties或者调用它的一些方法

1.9 behaviors

behaviors就是mixin，组件中属性、数据、方法、生命周期函数等有共同的都可以通过behaviors来共享

每个组件可以引用多个behavior，behavior也可以引用其他behavior

创建：一般在根目录创建一个behavior文件夹，里面放一个js来专门存放behavior

导入并使用：

此时你的组件已经有这些属性、数据等了，直接用即可

behavior可以存放的属性有哪些：

当behavior与组件里面的一些属性、数据等同名时

有一些规则，还是比较多的，可以通过微信官方文档来看具体

二.使用npm包

虽然能使用npm包，但并不是所有包都能使用

依赖node（如：fs）、依赖浏览器内置对象（如：jQuery）、依赖c++

2.1 Vant Weapp

是有赞前端团队专门用于小程序的一套ui结构

首先安装，参考官网文档https://vant-contrib.gitee.io/vant-weapp/#/quickstart

在自己终端窗口打开，首先要先初始化

直接npm开始安装

接下来的两步查看官方文档配置

然后构建npm就完成安装了

使用

需要在app.json的usingComponents注册

2.2 使用css变量定制vant主题样式

首先css变量怎么用，类似于less变量，可以起到一个方便修改的作用

带有前缀--的属性名，比如--example--name，表示的是带有值的自定义属性，其可以通过 var 函数在全文档范围内复用的。

怎么来定制vant主题：

首先是需要在app.wxss里面修改page的样式

在小程序里面page就相当于html是整个页面的根节点

那么怎么来修改呢：

可以在官网文档找到

在这里面找到你要修改的那个组件的什么样式

将前面改成--

2.3 API promise化

小程序官方提供的很多api是基于回调来执行的，就比如发请求的request里面就有成功失败完成等回调，像这样回调一多了就容易产生一个问题，就是造成回调地狱的问题，代码的可读性、维护性差

要将官方api promise化需要用到一个包 miniprogram-api-promise

需要知道的是，我们微信小程序是不能直接识别这些npm包的，之所以能够使用完全是因为构建了npm包，所以这个时候一般下了一个包之后还需要构建一次npm

然后是使用需要在app.js里面顶级先注册调用

将wx上的方法都promise化给到了空对象wxp

中间一定要有个wx.p过渡，后面用也是用这个

怎么来用：

比如发起一个请求

所以现在就可以用async，await了

三.全局数据共享

类似于vuex实现各个组件间数据共享

需要两个包来实现：

下载
创建store

创建一个store文件夹专门来做仓库，里面导入observable，向外导出他，他就像new store一样，里面就可以放一些需要存放的数据

state

计算属性

直接在下面定义一个函数即可，依赖的数据产生变化，他也会跟着变

action

要修改store里面的数据也是需要action来修改的，需要先引入

然后直接在里面写action的函数，注意方法需要用action包起来

而且他会接受参数，也就是外部action传进来的参数

怎么来在page页面中来使用mobx中的数据或者actions

先引入上面这个方法和我们的store数据源

首先在我们onLoad钩子中用到这个方法来创建，第一个参数为this也就是这个页面的实例，第二个参数一个对象有我们的数据源，有我们的data、getters、还有actions里面的函数

创建之后就有了这个实例对象，就可以在onUnload钩子清理这些数据

绑定好之后，直接在页面中使用即可

注意我要修改numA的值，需要action接受参数，同时这边只能传进store里面去改

在组件中使用：

主要注意他有三种引入数据的方法，引入action前面是你自定义的名字，后面才是actions里面定义的函数名