微信小程序自定义组件


帮企商城 2021-09-23 15:42:36

图怪兽_3c374f5cd8dbc737b77e1b9ad6aeb28f_13077.jpg

组件的定义

配置文件

  • 要编写一个自定义组件,首先需要在json文件中进行自定义组件声明(将 component 字段设为true )。

  • 使用用已注册的自定义组件前,首先要在页面的json文件中进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径(标签名称只能是小写字母、中划线和下划线的组合,组件根目录名不能以“wx-”为前缀)。

 

//自定义组件component.json
{
  "component": true
}
 
//引用自定义组件的页面 page.json
{
  "usingComponents": {
    "component-tag-name": "../component/component"
  }
}

  
wxml文件
在组件模板中可以提供一个 <slot> 节点,用于承载组件引用时提供的子节点。默认情况下,一个组件的wxml中只能有一个slot。需要使用多slot时,可以在组件js中声明启用options: {multipleSlots: true },以不同的 name 来区分。

<!-- 这是自定义组件的内部WXML结构(component.wxml)-->
<view class='wapper'>
  <text>this is component</text>
  <slot name="slot1"></slot>
  我在中间
  <slot name="slot2"></slot>
</view>
 
<!-- 以下是对一个自定义组件的引用 (page.wxml)-->
<view>
  <text>This is Page</text>
  <component-tag-name inner-text="Some text" class="page-component">
    <view slot="slot1" class="slot">来自page页面,通过slot标签</view>
    <view slot="slot2"></view>
  </component-tag-name>
</view>

  

  • wxss文件

    //component.wxss
    .wapper{
      background-color:#ccc;
      width: 100%;
      height:auto;
    }
    .slot{
      color:red;
    }
     
    //page.wxss
    .page-component{
      color:#fff;//有效,继承样式
      padding:10px;//无效
    }
    .slot{
      color:green;
    }

    js文件

  • //component.js
    Component({
      options: {
        multipleSlots: true // 在组件定义时的选项中启用多slot支持
      },
      properties: {
        // 这里定义了innerText属性,属性值可以在组件使用时指定
        innerText: {
          type: String,
          value: 'default value', //不存在此属性时
        }
      },
      data: {
        // 这里是一些组件内部数据
        someData: {}
      },
      methods: {
        // 这里是一个自定义方法
        customMethod: function(){}
      }
    })

  Component构造器API

0U6463140-0.png


通过上面的代码和显示结果可以看出:

  • slot样式受page.wxss里的.slot影响显示绿色,不受component.wxss的.slot影响显示红色。

  • 继承样式,如 font 、 color ,会从组件外继承到组件内。除继承样式外, app.wxss 中的样式、组件所在页面的的样式对自定义组件无效。例子中.page-component的color:#fff能生效,而padding则不生效。

Page与Component数据交互

Tip:page代指引用组件页面,component代指自定义组件

  • page > component

  1. page在引用组件时能通过属性值设置,component.js在properties获取。

  2. page在引用组件时通data-xxx设置,component.js在this.dataset获取。

<!-- page.wxml -->
<component-tag-name fromPage="来自Page" data-other="from dataset"></component-tag-name>


Component({
  properties: {
    formPage: String  //简写
    /*
    myProperty: { // 属性名
      type: String, // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)
      value: '', // 属性初始值(可选),如果未指定则会根据类型选择一个
      observer: function(newVal, oldVal){} // 属性被改变时执行的函数(可选),也可以写成在methods段中定义的方法名字符串, 如:'_propertyChange'
    }
    */
  },
  attached:function(){
    console.log(this.properties.fromPage);
    console.log(this.data.fromPage); //用data也能访问properties
    //设置properties值用setData()
    this.setData({
      fromPage: '改变了'
    });
    console.log(this.properties.fromPage);
    //通过dataset获取data-other的值
    console.log(this.dataset.other);
  }
})


相关阅读:

春哥团队获得1000万元投资将用于开发各种商业源码系统

春哥技术团队在京发布春哥数字人系统CGDigitalPersonSystem

春哥团队8周年:帮助更多的人实现在家创业赚钱

帮企商城国庆狂欢盛宴 放“价”到底!

脱单盲盒项目,日入过万不是梦!2021年最大风口项目!

如何给我们春哥团队付款?

微信小程序日常开发中常遇到的错误代码

小程序前端直传阿里云oss

微信小程序之image组件

解决微信小程序switchTab不能带参方法