一、创建自定义组件
.js中注册Component函数
.json使用"component": true
Component({}){"component": true
}二、使用自定义组件
全局配置、页面配置均可，全局配置就写在app.json中，页面配置就写在页面对应的json中。
配置之后，在页面中以组件形式引入。
<page-search />{"usingComponents": {"page-search":"/components/my_search/my_search"}
}三、自定义组件样式
小程序的样式是默认隔离（默认情况下页面的样式无法影响自定义组件的样式）的，允许外部文件修改组件样式的方法：
1、设置addGlobalClass
.js 文件中传入 options: { addGlobalClass: true }
注意：尽量不要使用标签、ID、属性选择器（会影响到全局）。
// components/my-nav/my-nav.js
Component({// 小程序组件默认样式是隔离，addGlobalClass设置为true可允许外部修改样式options: {addGlobalClass: true}
})// 组件内容
<view class="navigation-bar custom-class"><view class="navigation-bar-title title-class">自定义标题</view>
</view>// 组件样式
.navigation-bar {background-color: #fff;height: 88rpx;/* 顶部刘海预留 */padding-top: 100rpx;display: flex;justify-content: center;
}
.navigation-bar-title {font-weight: 600;
}// 使用组件的页面
<app-nav></app-nav>.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.js
Component({externalClasses: ["custom-class"],
})// 使用组件的页面
<app-nav custom-class="nav_title"></app-nav>.navigation-bar {background-color: gold !important;
}
.nav_title {color: #fff !important;
}
四、自定义插槽
小程序默认只能使用一个slot，需要多个插槽或需要使用具名插槽的时候，需要传入multipleSlots: true。
创建插槽：在组件的任一位置使用<slot />占位，slot一定要是闭合标签。
// components/my-nav/my-nav.js
Component({options: {// 只要使用到具名插槽，都需要将multipleSlots设置为truemultipleSlots: true},
})<view class="navigation-bar custom-class"><view class="navigation-bar-title title-class"><slot name="left"></slot>自定义标题<slot name="right"></slot></view>
</view><app-nav custom-class="nav_title"><text slot="left">◀</text><text slot="right">▶</text>
</app-nav>
五、组件生命周期
1、created
组件创建时触发，相当于vue的created，但是由于无法使用this.setData({})，所以，一般不用。
2、attached
组件初始完毕时触发，相当于vue的mounted，最常使用。
<view class="navigation-bar custom-class" style="padding-top: {{statusBarHeight}}px;"><view class="navigation-bar-title title-class"><slot name="left"></slot>自定义标题<slot name="right"></slot></view>
</view>// components/my-nav/my-nav.js
Component({options: {multipleSlots: true},data: {statusBarHeight: 0},// 生命周期lifetimes: {created(){},attached() {const { statusBarHeight } = wx.getSystemInfoSync()console.log(wx.getSystemInfoSync())console.log(statusBarHeight)this.setData({statusBarHeight: statusBarHeight})}}
}) 
