小程序–自定义组件

一、创建自定义组件

.js中注册Component函数

.json使用“component”:true

Component({})

{"component": true}

二、使用自定义组件

全局配置、页面配置均可，全局配置就写在app.json中，页面配置就写在页面对应的json中。

配置之后，在页面中以组件形式引入。

{"usingComponents": {"page-search":"/components/my_search/my_search"}}

三、自定义组件样式

小程序的样式是默认隔离（默认情况下页面的样式无法影响自定义组件的样式）的，允许外部文件修改组件样式的方法：

1、设置addGlobalClass

.js 文件中传入 options: { addGlobalClass: true }

注意：尽量不要使用标签、ID、属性选择器（会影响到全局）。

// components/my-nav/my-nav.jsComponent({// 小程序组件默认样式是隔离，addGlobalClass设置为true可允许外部修改样式options: {addGlobalClass: true}})

// 组件内容自定义标题

// 组件样式.navigation-bar {background-color: #fff;height: 88rpx;/* 顶部刘海预留 */padding-top: 100rpx;display: flex;justify-content: center;}.navigation-bar-title {font-weight: 600;}

// 使用组件的页面.navigation-bar {background-color: gold !important;}.nav_title {color: #fff !important;}

// 使用组件的js{"navigationStyle": "custom"}

2、设置externalClasses

.js 文件中传入 externalClasses: [ xxx, yyy]

// components/my-nav/my-nav.jsComponent({externalClasses: ["custom-class"],})

// 使用组件的页面.navigation-bar {background-color: gold !important;}.nav_title {color: #fff !important;}

四、自定义插槽

小程序默认只能使用一个slot，需要多个插槽或需要使用具名插槽的时候，需要传入multipleSlots: true。

创建插槽：在组件的任一位置使用占位，slot一定要是闭合标签。

// components/my-nav/my-nav.jsComponent({options: {// 只要使用到具名插槽，都需要将multipleSlots设置为truemultipleSlots: true},})

自定义标题

◀▶

五、组件生命周期

1、created

组件创建时触发，相当于vue的created，但是由于无法使用this.setData({})，所以，一般不用。

2、attached

组件初始完毕时触发，相当于vue的mounted，最常使用。

自定义标题

// components/my-nav/my-nav.jsComponent({options: {multipleSlots: true},data: {statusBarHeight: 0},// 生命周期lifetimes: {created(){},attached() {const { statusBarHeight } = wx.getSystemInfoSync()console.log(wx.getSystemInfoSync())console.log(statusBarHeight)this.setData({statusBarHeight: statusBarHeight})}}})