小程序自定义组件
0 自定义组件特点
在微信小程序实际开发过程中,经常会有代码复用的情况,即在不同的页面中会经常使用结构类似的代码,这会造成代码的高耦合,还不利于代码的维护,微信小程序为了解决这一情况,支持了更为简洁的组件化编程,称之为自定义组件。
1 创建自定义组件
- 在项目根目录中,鼠标右键创建 components 文件夹
- 右击components文件夹,创建item文件夹
- 右击item文件夹,点击新建Component,输入item
- 回车,自动生成四个小程序文件js json wxml wxss
2 自定义组件的使用
2.1 局部引用
在需要使用组件的页面的.json文件中 ,首先对组件进行引用。
{
"usingComponents": {
"cell":"/components/cell/cell"
}
}
//可同时引入多个组件,中间用逗号隔开
2.2 全局引用
在app.json中进行配置
{
"usingComponents": {
"cell":"/components/cell/cell"
}
}
//可同时引入多个组件,中间用逗号隔开
3 组件的使用
3.1 自定义组件的样式
3.1.1 样式的隔离styleIsolation
(1)当值为isolated,则为开启样式隔离
(2)若为apply-shared,父影响子,即页面的样式可以影响到组件,但是组件不能影响组件外的样式。
(3)若为shared父子影响,为双向影响。
3.1.2 外部类externalClasses:[“cell-class”],
3.1.3 插槽
组件内插槽一般分默认插槽与命名插槽,经常使用的为命名插槽,方便布局。命名插槽在组件内定义时 属性name=“插槽名”,在页面使用时属性slot=“插槽名”。
3.2 组件传参
- 父传子
- 子传父
4 案例item组件
4.1 定义组件
4.2 编写wxml
<!--components/item/item.wxml-->
<navigator class="item itemclass" url="{
{url}}" open-type="{
{openType}}" bindtap="itemclick">
<view class="icon" wx:if="{
{icon}}">
<image src="{
{icon}}" mode="aspectFill"/>
</view>
<view class="content">