手把手带你学习微信小程序 —— 十二 (自定义组件)

配合官方文档一起使用,效果更加 —— 传送门

一、自定义组件的介绍

自定义组件,类似于前面说到过的模板 template,但是比模板更加灵活,自定义组件可以定义自己的属性,使用起来也更加方便,但是用起来还是会有些限制,比如在自定义组件中我们只能在自定义组件中修改样式(wxss),不能在渲染界面进行更改样式等等。但是自定义组件有一个很大的好处,我们可以自己添加其他的组件,添加方法等等。总的来说,这也是一个很好用的组件。

二、创建并使用自定义组件

2.1 创建组件

  1. 单独创建一个名为 component 的文件夹,然后创建一个子文件,并命名为 mybox,然后再 mybox 文件装创建名为Component 的文件,并命名为 mybox
    在这里插入图片描述

tips:这样做,和新建一个 page 是没有区别的,但是不同的点是在 json 文件和js文件,不同点是多了如下一部分的代码

js文件

Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

json文件

{
  "component": true,
  "usingComponents": {}
}

这里的json 文件必须设置为 true

2.2 使用组件

在 mybox.wxml 文件与 mybox.wxss 设置两个盒子

2.2.1 自定义组件初始化
  1. wxml文件
<view class='outter' >
  <view class='inner'>
  </view>
</view>
  1. wxss样式
.outter{
  width: 200px;
  height: 200px;
  background: yellow;
}

.inner{
  width: 100px;
  height: 100px;
  background: red
}
  1. 确保 json 文件找那个的 component 为 true
2.2.2 渲染自定义组件
  1. 回到index.json 文件
    把 component 的信息添加进去
{
  "usingComponents": {
  // "创建的组件的名称":"路径"
    "mybox":"/component/mybox/mybox"
  }
}

tips:

  • 路径不能错
  • 名称必须与创建的子组件的名称一致
  1. 在index.wxml 文件中可以直接通过标签 <mybox></mybox> 实现我们自定义的模板

在这里插入图片描述

三、给我们创建的标签创建属性

3.1 创建属性

1.语法示范—— 回到自定义组件中,在mybox.js文件下的 properties中,创建对象,语法如下:

properties:{
    属性名称: {
        type: 数据类型,String Number Boolean Object Array
        value:  一个初始化的默认值
    }
}
  1. 我们给mybox.js 文件,分别给外边框和内边框设置两个属性
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    innerText:{
      type:String,
      value:"112233"
    },

    outterSize:{
      type:Number,
      value:200
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

3.2 使用属性

  1. 然后就可以在 mybox.wxml 文件中通过 style 设置属性
<view class='outter' style="width:{{outterSize}}px;height:{{outterSize}}px">
  <view class='inner'>
  {{innerText}} <!--设置输出的语句,默认为空字符串-->
  </view>
</view>
  1. 由于前面设置过 json 路径,所以我们就可以直接通过属性名,正常的修改样式
<mybox innerText="内部盒子" outterSize="400"></mybox>

效果图:
在这里插入图片描述

四、给属性添加组件

通过 slot 标签才可以添加组件

  • 新建一个名为 mypage 的组件,在mypage.js 中添加 options 代码
Component({
  options:{
    multipleSlots:true
  },
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})
  1. 在展示界面 的json 文件把路径添加上
  2. 设置wxss 样式,与 wxml 文件

设置纵向布局,并结合全局的样式 container
mypage.wxss

.body{
  width: 100%;
  display: flex;
}

.left-group{
  flex: 1;
  background: yellow;
}

.right-group{
  flex: 1;
  background: green;
}

mypage.wxml

<!-- 设置全局变量修改样式 -->
<view class='container'>
  <view class='header'>
  这是header部分
  </view>
  <slot></slot>
  <!-- slot可以添加一个组件,可以在slot 中添加组件 --> 
   <view class='body'>
    <view class='left-group'>
      <slot name='left'></slot>
      <!-- 给slot 标签设置一个名称,然后最后通过名称 -->
    </view>

    <view class='right-group'>
      <slot name='right'></slot>
    </view> 
 </view> 
</view>

回到展示界面 —— index.wxml

<mypage>
<!-- 与上面的slot 设置的名称一一对应 -->
  <view slot='left'>我是左边</view>
  <view slot='right'>我是右边</view>
</mypage>

展示效果:
在这里插入图片描述

五、总结

  1. 创建属性,需要在自定义组件的json文件加入如下代码
{
  "component": true,
  "usingComponents": {}
}

component 一定要设置为 true

  1. 使用属性,在展示界面 json 文件加入如下代码
{
"usingComponents" :{
    "子文件的名称": "路径";
    }
}
  1. 给自定义组件添加属性,在自定义组件 的 js 文件下的 Component,文件添加 如下代码
properties:{
    属性名称: {
        type: 数据类型,String Number Boolean Object Array
        value:  一个初始化的默认值
    }
}
  1. 给自定义组件添加组件,在自定义组件的 js 文件添加 options
properties:{
	options:{
	multipleSlots:true
	},
}
  • 4
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值