微信小程序之自定义组件开发

news2024/11/24 0:34:38

1、前言

从小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程。所有自定义组件相关特性都需要基础库版本 1.6.3 或更高。开发者可以将页面内的功能模块抽象成自定义组件,以便在不同的页面中重复使用;也可以将复杂的页面拆分成多个低耦合的模块,有助于代码维护。自定义组件在使用时与基础组件非常相似。

官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

2、自定义组件之组件的创建与引用

2.1 创建
步骤:

  1. 在项目的根目录中右键,创建components–>test文件夹
  2. 在新建的components–>test文件夹上右键,点击“新建Component”
  3. 键入组件的名称之后回车,会自动生成组件多对应的四个文件:.js,.json,.wxml,.wxss

建议:为了保证目录结构清晰,建议把不同的组件存放到单独的目录中,如下图所示
在这里插入图片描述
2.2 引用

1)局部引用

  • 在页面的.json配置文件中引用自定义组件的方式称为“局部引用”
  • 在页面的.json文件的usingComponents节点下声明组件的标签名与组件的页面路径

.json

//在页面的.json文件中,引入自定义的组件并定义引用时的标签名
{
  "usingComponents": {
    //自定义组件的标签名字为my-test1
    "my-test1":"/components/test1/test1"
  },

.wxml

//在页面的.wxml文件中使用刚刚自定义组件的标签名来引用自定义组件
<my-test1>使用自定义组件1</my-test1>

2)全局引用

  • 在app.json全局配置文件中引用组件称为“全局引用”
  • 声明与使用与局部引用同理,只是声明是在app.json文件的usingComponents节点下
  • 作用域是全局的每一个页面

3)应用场景
主要根据组件的使用频率和范围来选择合适的引用方式

  • 如果某组件在多个页面中经常使用,则最好将其进行“全局引用”
  • 如果某个页面只在某个特定的页面中使用,则最好是将其进行“局部引用”

2.3 组件与页面的区别

大家会发现自定义组件和页面是不是非常相似,同样都是拥有四个文件 .js .json .wxml .wxss

但是组件与页面的.js与.json文件有着明显的区别:

  • 组件的.json文件中需要声明“components”:true属性,而页面不需要
  • 组件的.js文件中调用的是Components()函数,而页面调用的是Page()函数
  • 组件的事件处理函数需要写在methods节点中,而页面则要在与data数据节点平级声明即可

3、自定义组件之组件的样式隔离

3.1样式隔离特性
在默认的情况下,自定义组件的样式只对当前的组件生效,而不会去影响到组件之外的UI结构
如下图:

  • A的样式不会影响C的样式
  • A的样式不会影响小程序页面的样式
  • 小程序页面的样式不会影响A和C的样式
    在这里插入图片描述
    特性的好处:
  • 防止外界的样式影响自定义组件内部的样式,造成样式污染
  • 也能防止组件样式破坏外检的样式,双向的

注意点:

  • app.wxss中的全局样式对自定义组件默认是无效的
  • 只有使用class样式选择器才会有样式隔离的效果,id选择器、属性选择器、标签选择器不受样式隔离的影响

所以在自定义组件和引用自定义组件的页面中最好使用class样式选择器,不要使用id,属性,标签选择器从而避免造成不必要的麻烦!

3.2 修改隔离选项

默认情况下,自定义组件的样式隔离特性可以有效防止内外样式互相干扰的问题。但是在某些情况下我们又需要在外界能够控制自定义组件的内部样式,此时就可以通过修改styleIsolation属性来修改自定义组件样式隔离选项,从而达到控制内部组件样式的目的。
有两种方法:

  • 第一种:在自定义组件的.js文件中新增如下配置
//.js文件中
Component({
     options:{
          //表示启用样式隔离
          styleIsolation:'isolated'
    }
})
  • 第二种:在自定义组件的.json文件中新增如下配置
//.json文件中
{
   "styleIsolation":"isolated"
}

styleIsolation的可选值:

  • isolated 表示启用样式隔离,在自定义组件内外,使用 class 指定的样式将不会相互影响(一般情况下的默认值);
  • apply-shared 表示页面 wxss 样式将影响到自定义组件,但自定义组件 wxss 中指定的样式不会影响页面;
  • shared 表示页面 wxss 样式将影响到自定义组件,自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。(这个选项在插件中不可用。)

使用后两者时,请务必注意组件间样式的相互影响。

如果这个 Component 构造器用于构造页面 ,则默认值为 shared ,且还有以下几个额外的样式隔离选项可用:

  • page-isolated 表示在这个页面禁用 app.wxss ,同时,页面的 wxss 不会影响到其他自定义组件;
  • page-apply-shared 表示在这个页面禁用 app.wxss ,同时,页面 wxss 样式不会影响到其他自定义组件,但设为 shared 的自定义组件会影响到页面;
  • page-shared 表示在这个页面禁用 app.wxss ,同时,页面 wxss 样式会影响到其他设为 apply-shared 或shared 的自定义组件,也会受到设为 shared 的自定义组件的影响。

4、自定义组件之组件的三大节点属性

4.1 data数据节点
在小程序组件中,用于组件模板渲染的私有数据需要定义到.js文件的data节点中

// components/test1/test1.js
Component({
  /**
   * 组件的初始数据
   */
  data: {
    count:0
  },
})

4.2 methods方法节点

在小程序组件中,事件处理函数和自定义的方法需要定义到.js文件的methods节点中

// components/test1/test1.js
//点击按钮使count加1,并且控制其最大值为属性中的max值
Component({
   /**
   * 组件的初始数据
   */
  data: {
    count:0
  },
  /**
   * 组件的属性列表
   */
  properties: {
    //方法一:完整方式
     max:{
      type:Number,//参数类型
      value:0     //参数的默认值
     }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    // 点击事件的处理函数
    addCount(){
      if(this.data.count>=this.properties.max)return 
      this.setData({
        count:this.data.count+1
      })
      this._showCount()
    },
    // 自定义的方法建议以下划线开头以示区分
    _showCount(){
      // 打印消息框 
      wx.showToast({
        title: 'count值为:'+this.data.count,
        icon:"none"
      })
    },
  }
})

4.3 properties属性节点
在小程序组件中,properties是组件的对外属性,用来接收外界传递到组件中的数据

// components/test/test1.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    //方法一:完整方式
     max:{
      type:Number,//参数类型
      value:0     //参数的默认值
     }
    //方法二:简化方式
    max:Number
  },
})

然后在页面结构中可以在标签内直接传值

<my-test1 max="10"></my-test1>

4.4 data和properties的区别
在小程序组件中,properties属性和data数据的用法相同,在本质上没有任何区别,properties里面的值与data一样可以用于页面渲染,也可以使用setData()方法为properties属性中的值进行重新赋值,但有以下两点区别:

  • data更加倾向于存储组件的私有数据(内部数据)
  • properties更加倾向于存储外界传递到组件中的数据(外部数据、通信)

5、自定义组件之组件的数据监听器

5.1 监听数据的变化
数据监听器,用于监听和响应任何属性与数据字段的变化,从而执行特定的操作。
基本语法格式:

Component({
 
      observer:{
          '字段A,字段B':function(字段A的新值,字段B的新值){
                  // do something
            }
      }
})

示例代码:
test1.wxml

<!--components/test1/test1.wxml-->
<view>{{n1}}+{{n2}}={{sum}}</view>
<button bindtap="addN1" type="primary">n1+1</button>
<button bindtap="addN2" type="primary">n2+1</button>

test1.js

// components/test1/test1.js
Component({
    /**
     * 组件的属性列表
     */
    properties: {
 
    },
 
    /**
     * 组件的初始数据
     */
    data: {
        n1:0,
        n2:0,
        sum:0
 
    },
 
    /**
     * 组件的方法列表
     */
    methods: {
        //n1+1
        addN1(){
            this.setData({
                n1:this.data.n1+1
            })
        },
        //n2+1
        addN2(){
            this.setData({
                n2:this.data.n2+1
            })
        }
    },
    //数据监听器。监听n1,n2的变化,自动计算sum
    observers:{
        'n1,n2':function(newN1,newN2){
            this.setData({
                sum:newN1+newN2
            })
        }
    }
})

app.json声明自定义组件

"usingComponents": {
        "my-test1":"/components/test1/test1"
    }

在home.wxml上渲染

<!--pages/home/home.wxml-->
<my-test1></my-test1>

实现效果
当任意按下n1+1或者n2+1按钮时,导致n1,n2数值的变化从而被数据监听器捕捉到,然后在事件监听器处理函数内部对sum用新值进行自动计算赋值
在这里插入图片描述
5.2 监听对象属性的变化
数据监听器支持监听对象中单个或者多个属性的变化,基本语法如下:

Component({
      observer:{
          '对象.属性A,对象.属性B':function(属性A的新值,属性B的新值){
                  // do something
            }
      }
})

如果某个对象中需要被监听的属性太多,为了方便,则可以使用通配符 ** 来监听对象中所有属性的变化,基本语法如下:

Component({
      observer:{
          '对象.**':function(obj){
                  this.setData({
                      某数据字段:`${obj.对象属性1},${obj.对象属性2}......`
                  })
                 
            }
      }
})

6、自定义组件之组件的纯数据字段

纯数据字段指的是那些完全不用于页面渲染的data字段
纯数据字段可以提升页面更新的性能

应用场景:

  • 某些data中的字段不会展示在界面上
  • 也不会传递给其它组件
  • 仅在当前组件的内部进行使用

使用规则:
在Component构造器的options节点中,指定pureDataPattern为一个正则表达式,字段名符合这个正则表达式的字段将成为纯数据字段,示例代码如下:

Component({
   options:{
    //这里示例指定所有以 _ 开头的数据字段为纯数据字段
    pureDataPattern:/^_/
   },
   data:{
      a:true,//普通字段
      _b:true,//将被设置为纯数据字段
   }
})

7、自定义组件之组件的生命周期及其函数

7.1 组件主要生命周期

  • 组件实例被创建 – created
  • 组件完全初始化完毕 – attached
  • 组件进入页面节点树
  • 组件离开页面节点树 – detached
    在这里插入图片描述

7.2 定义生命周期函数
在小程序组件中,生命周期函数的定义有新旧两种方式

  • 第一种,直接定义在Component构造器内与data节点平级的第一级参数中
  • 第二种,可以在lifetimes字段内进行声明(推荐,其优先级最高,且专门放生命周期函数)

自定义组件.js文件:

//定义组件生命周期函数的两种方式
Component({
     //推荐用法
     lifetimes:{
         attached(){ },
         detached(){ },
      }
     //旧的定义方式,与data节点平级
      attached(){ },
      detached(){ },
})

注:如果同时存在两种新旧定义方式,那么旧的定义方式将会被覆盖掉

8、自定义组件之组件的插槽

在自定义组件的wxml结构中,可以提供一个节点(插槽),用于填充组件使用者提供的wxml结构,起到占位的作用
在这里插入图片描述
8.1 单个插槽的使用
在小程序中,默认每个自定义的组件只能允许使用一个进行占位,这种个数上的限制就叫做单个插槽

<!-- 组件的封装者 -->
<view>
     <view>这是组件的内部节点</view>
     <!-- 下面对于不确定的内容可以使用<slot>插槽进行占位,后续由组件使用者进行填充 -->
     <slot></slot>
</view>
 
<!-- 组件的使用者 -->
<component-tag-name>
    <!-- 下面的内容将被放置到组件封装者定义插槽<slot>的位置 -->
    <view>这是插入到组件slot中内容</view>
</component-tag-name>

8.2 多个插槽的使用
1)启动多个插槽
小程序的自定义组件默认支持一个插槽的使用,如果需要使用多个插槽,就可以在组件.js文件中通过如下方式进行配置从而启用多个插槽的功能

Component({
   options:{
     multipleSlots:true//启用多个插槽
   },
   properities:{/* ... */},
   methods:{/* ... */}
})

定义与使用

<!-- 页面模板,即组件的封装者 -->
<view>
     <!-- 这是name为slot1的第一个插槽 -->
     <slot name="slot1"></slot>
     <view>~~~~~~~分隔线~~~~~~~~~</view>
      <!-- 这是name为slot2的第二个插槽 -->
      <slot name="slot2"></slot>
</view>
 
<!-- 引用组件的页面模板,即组件的使用者 -->
<component-tag-name>
   <view slot="slot1">这是插入到名字为slot1插槽里面的内容</view>
   <view slot="slot2">这是插入到名字为slot2插槽里面的内容</view>
</component-tag-name>

9、组件间通信与事件

9.1 组件间通信

组件间的基本通信方式有以下几种。

  • WXML 数据绑定:用于父组件向子组件的指定属性设置数据,仅能设置 JSON 兼容数据(自基础库版本 2.0.9开始,还可以在数据中包含函数)。具体在 组件模板和样式 章节中介绍。
  • 事件:用于子组件向父组件传递数据,可以传递任意数据。
  • 如果以上两种方式不足以满足需要,父组件还可以通过 this.selectComponent方法获取子组件实例对象,这样就可以直接访问组件的任意数据和方法

9.2 监听事件
事件系统是组件间通信的主要方式之一。自定义组件可以触发任意的事件,引用组件的页面可以监听这些事件。关于事件的基本概念和用法,参见 事件 。

监听自定义组件事件的方法与监听基础组件事件的方法完全一致:

<!-- 当自定义组件触发“myevent”事件时,调用“onMyEvent”方法 -->
<component-tag-name bindmyevent="onMyEvent" />
<!-- 或者可以写成 -->
<component-tag-name bind:myevent="onMyEvent" />
Page({
  onMyEvent: function(e){
    e.detail // 自定义组件触发事件时提供的detail对象
  }
})

9.3 触发事件
自定义组件触发事件时,需要使用 triggerEvent 方法,指定事件名、detail对象和事件选项:

<!-- 在自定义组件中 -->
<button bindtap="onTap">点击这个按钮将触发“myevent”事件</button>
Component({
  properties: {},
  methods: {
    onTap: function(){
      var myEventDetail = {} // detail对象,提供给事件监听函数
      var myEventOption = {} // 触发事件的选项
      this.triggerEvent('myevent', myEventDetail, myEventOption)
    }
  }
})

触发事件的选项包括:
在这里插入图片描述
9.4 获取组件实例

可在父组件里调用 this.selectComponent ,获取子组件的实例对象。
调用时需要传入一个匹配选择器 selector,如:this.selectComponent(“.my-component”)。

// 父组件
Page({
  data: {},
  getChildComponent: function () {
    const child = this.selectComponent('.my-component');
    console.log(child)
  }
})

在上例中,父组件将会获取 class 为 my-component 的子组件实例对象,即子组件的 this 。

注 :默认情况下,小程序与插件之间、不同插件之间的组件将无法通过 selectComponent 得到组件实例(将返回 null)。如果想让一个组件在上述条件下依然能被 selectComponent 返回,可以自定义其返回结果(见下)

// 自定义组件 my-component 内部
Component({
  behaviors: ['wx://component-export'],
  export() {
    return { myField: 'myValue' }
  }
})
<!-- 使用自定义组件时 -->
<my-component id="the-id" />
// 父组件调用
const child = this.selectComponent('#the-id') //  { myField: 'myValue' }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1178607.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

践行“人人可用”:更轻量、更好用、更优雅、更全面,DataEase开源数据可视化分析平台发布v2.0版本

2023年11月6日&#xff0c;DataEase开源数据可视化分析平台正式发布v2.0版本。DataEase开源项目创立于2021年1月&#xff0c;于2021年6月发布v1.0版本。相比v1.x版本&#xff0c;DataEase v2.0版本采用了更加轻量级的架构设计&#xff0c;功能模块在保留原有“仪表板”模块的基…

领域认知智能走向落地,B端企业还缺些啥?

大模型如何为我所用&#xff1f; 这是当下B端众多企业都在深入思考的一个问题。今年以来&#xff0c;大模型在办公、对话、搜索等领域所展现出的强大能力&#xff0c;让越来越多B端企业意识到大模型对于业务的巨大价值。 因此&#xff0c;领域认知智能迅速成为B端企业关注的焦…

rhcsa-压缩和解压缩

.zip: zip 程序压缩打包的档案;(很常见&#xff0c;但是因为不包含文档名编码信息&#xff0c;跨平台可能会乱码).rar: rar 程序压缩打包的档案:(在windows上很常见&#xff0c;但是是商业软件。gz: gzip 程序压缩的档案;(linux目前使用最广泛的压缩格式).bz2: bzip2 程序压…

Linux之Nignx及负载均衡动静分离

&#x1f389;&#x1f389;欢迎来到我的CSDN主页&#xff01;&#x1f389;&#x1f389; &#x1f3c5;我是君易--鑨&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;推荐给大家我的博客专栏《LInux实战开发》。&#x1f3af;&#x1f3af; …

这可能是全网最晚的低代码技术总结

低代码的发展一向结伴着质疑前行&#xff0c;一些人认为低代码平台限制了开发人员的创新能力&#xff0c;使得开发过程变得过于简单&#xff0c;缺乏深度的定制和灵活性。他们担心&#xff0c;低代码平台可能只适合于简单的应用程序&#xff0c;无法满足复杂业务需求。另一面&a…

Android codec2 视频框架 之应用

文章目录 应用流程外部主动获取输入和输出buffer外部设置回调 内部流程 应用流程 外部主动获取输入和输出buffer 解码的调用流程&#xff0c;以android原生的一个bin来说明 android 原生代码位置&#xff1a; frameworks/av/cmds/stagefright/codec.cpp frameworks/av/cmds/st…

在Windows 10中共享打印机,以便其他用户可以访问,发挥打印机的最大作用

知道如何在Windows 10中共享打印机是非常宝贵的。如果没有打印机共享&#xff0c;多个用户从单个设备进行所有打印的唯一方法就是手动连接自己的计算机。在本指南中&#xff0c;我们将向你展示一种更简单的方法。 通过网络共享打印机&#xff0c;只需连接一台PC或笔记本电脑。…

svn使用图形化界面从trunk目录下创建下的分支

1、svn目录 要从trunk目录右键创建一个新的目录出来。Branch/tag下创建&#xff1a; 然后源目录和提交目录的编写&#xff1a; 这样新的分支目录chuanqi_4就创建好了。要注意:这样创建要确保目标目录在svn目录下不存在。

ROS中MPC局部路径规划器使用方法及源码流程解读

本文主要介绍ROS中Navigation导航框架中MPC局部路径规划器mpc_local_planner的使用方法&#xff0c;并对源码进行解读&#xff0c;梳理其规划流程等&#xff0c;具体包含MPC模型预测控制算法简介、mpc_local_planner使用方法、mpc_local_planner源码解读与规划流程梳理三部分内…

微信小游戏软件开发手机微信休闲游戏

当今&#xff0c;微信已经成为了中国最受欢迎的社交媒体平台之一&#xff0c;拥有数亿活跃用户。随着微信的不断发展&#xff0c;微信小游戏成为了一个热门的应用领域&#xff0c;吸引了许多开发者和玩家。微信小游戏是一种小型游戏&#xff0c;可以直接在微信内嵌入和玩&#…

【JavaEE初阶】 TCP服务器与客户端的搭建

文章目录 &#x1f332;前言&#x1f334;ServerSocket API&#x1f384;Socket API&#x1f340;TCP中的长短连接&#x1f38d;建立TCP回显客户端与服务器&#x1f6a9;TCP搭建服务器&#x1f6a9;TCP搭建客户端&#x1f6a9;通信过程展示&#xff1a; &#x1f333;多个客户端…

offsetof宏的使用、模拟实现及 (size_t)(((struct_type*)0)->mem_name)的解释

宏原型&#xff1a;offsetof(type,member) 作用&#xff1a;返回数据结构或联合体类型中成员的偏移量&#xff0c;以字节为单位 返回值&#xff1a;size_t类型的无符号整数 使用案例&#xff1a; #include <stdio.h> #include <stddef.h> struct foo {ch…

爬取东方财富股票信息

爬取股票信息 爬虫爬取信息&#xff0c;一般有两种大的思路&#xff0c;分别是&#xff1a; 模拟header信息&#xff0c;发送请求&#xff0c;得到相应的数据&#xff08;html文件 或者 json数据&#xff09;使用selenium模拟打开浏览器&#xff0c;然后利用selenium提供的函…

高防CDN:企业网络安全的坚强后盾

随着互联网的快速发展&#xff0c;企业的网络面临着越来越多的安全威胁。在这种背景下&#xff0c;高防CDN&#xff08;Content Delivery Network&#xff09;已经成为了企业网络安全的坚强后盾。本文将理性分析高防CDN对于企业发展的影响&#xff0c;强调其在维护网络稳定性、…

内核态内存映射

内核态的内存映射机制&#xff0c;主要包含以下几个部分&#xff1a; 内核态内存映射函数 vmalloc、kmap_atomic 是如何工作的&#xff1b;内核态页表是放在哪里的&#xff0c;如何工作的&#xff1f;swapper_pg_dir 是怎么回事&#xff1b;出现了内核态缺页异常应该怎么办&am…

MySQL(10):创建和管理表

基础知识 在 MySQL 中&#xff0c;一个完整的数据存储过程总共有 4 步&#xff0c;分别是&#xff1a;创建数据库、确认字段、创建数据表、插入数据。 要先创建一个数据库&#xff0c;而不是直接创建数据表&#xff1a;从系统架构的层次上看&#xff0c;MySQL 数据库系统从大到…

Android 10.0 SystemUI启动流程

1、手机开机后&#xff0c;Android系统首先会创建一个Zygote&#xff08;核心进程&#xff09;。 2、由Zygote启动SystemServer。 3、SystemServer会启动系统运行所需的众多核心服务和普通服务、以及一些应用及数据。例如&#xff1a;SystemUI 启动就是从 SystemServer 里启动的…

浅谈前端自定义VectorGrid矢量瓦片样式

目录 前言 一、VectorGrid相关API介绍 1、VectorGrid 2、 LayerStyles样式详解 二、样式自动配置 1、页面定义 2、地图及PBF瓦片引入 3、矢量瓦片样式定义 4、鼠标事件交互 三、最终效果 1、自定义样式展示 2、鼠标交互 总结 前言 在上一篇博客中&#xff0c;详细讲…

`rest-client`库

rest-client是一个在Ruby编程语言中用于发送HTTP请求的库。它提供了简单且易于使用的接口&#xff0c;用于发送GET、POST、PUT、DELETE等各种类型的HTTP请求&#xff0c;并处理响应。 以下是rest-client库的一些常见用法示例&#xff1a; 发送GET请求&#xff1a; require ‘…

《算法通关村—轻松搞定合并二叉树》

《算法通关村—轻松搞定合并二叉树》 描述 leetcode 617 给你两棵二叉树&#xff1a; root1 和 root2 。 想象一下&#xff0c;当你将其中一棵覆盖到另一棵之上时&#xff0c;两棵树上的一些节点将会重叠&#xff08;而另一些不会&#xff09;。你需要将这两棵树合并成一棵…