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

Gorit

发布于 2021-12-08 12:52:45

1.2K00

代码可运行

文章被收录于专栏：Gorit 带你学全栈系列Gorit 带你学全栈系列

运行总次数：0

代码可运行

自定义组件

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

一、自定义组件的介绍

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

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

2.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 自定义组件初始化

wxml文件

<view class='outter' >
  <view class='inner'>
  view>
view>

wxss样式

.outter{
  width: 200px;
  height: 200px;
  background: yellow;
}

.inner{
  width: 100px;
  height: 100px;
  background: red
}

确保 json 文件找那个的 component 为 true

2.2.2 渲染自定义组件

回到index.json 文件把 component 的信息添加进去

{
  "usingComponents": {
  // "创建的组件的名称":"路径"
    "mybox":"/component/mybox/mybox"
  }
}

tips：

路径不能错
名称必须与创建的子组件的名称一致

在index.wxml 文件中可以直接通过标签实现我们自定义的模板

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

3.1 创建属性

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

properties:{
    属性名称: {
        type: 数据类型，String Number Boolean Object Array
        value:  一个初始化的默认值
    }
}

我们给mybox.js 文件，分别给外边框和内边框设置两个属性

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    innerText:{
      type:String,
      value:"112233"
    },

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

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

  },

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

  }
})

3.2 使用属性

然后就可以在 mybox.wxml 文件中通过 style 设置属性

<view class='outter' style="width:{{outterSize}}px;height:{{outterSize}}px">
  <view class='inner'>
  {{innerText}} 
  view>
view>

由于前面设置过 json 路径，所以我们就可以直接通过属性名，正常的修改样式

<mybox innerText="内部盒子" outterSize="400">mybox>

效果图：

四、给属性添加组件

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

新建一个名为 mypage 的组件，在mypage.js 中添加 options 代码

Component({
  options:{
    multipleSlots:true
  },
  /**
   * 组件的属性列表
   */
  properties: {

  },

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

  },

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

  }
})

在展示界面的json 文件把路径添加上
设置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>
   
   <view class='body'>
    <view class='left-group'>
      <slot name='left'>slot>
      
    view>

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

回到展示界面 —— index.wxml

<mypage>

  <view slot='left'>我是左边view>
  <view slot='right'>我是右边view>
mypage>

展示效果：

五、总结

创建属性，需要在自定义组件的json文件加入如下代码

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

component 一定要设置为 true

使用属性，在展示界面 json 文件加入如下代码

{
"usingComponents" :{
    "子文件的名称": "路径";
    }
}

给自定义组件添加属性，在自定义组件的 js 文件下的 Component，文件添加如下代码

properties:{
    属性名称: {
        type: 数据类型，String Number Boolean Object Array
        value:  一个初始化的默认值
    }
}

给自定义组件添加组件，在自定义组件的 js 文件添加 options

properties:{
	options:{
	multipleSlots:true
	},
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019/07/23 ，如有侵权请联系 cloudcommunity@tencent.com 删除

小程序

json

javascript

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

小程序

json

javascript

登录后参与评论

0 条评论

热度