微信小程序开发系列-07组件

微信小程序开发系列目录

  • 《微信小程序开发系列-01创建一个最小的小程序项目》
  • 《微信小程序开发系列-02注册小程序》
  • 《微信小程序开发系列-03全局配置中的“window”和“tabBar”》
  • 《微信小程序开发系列-04获取用户图像和昵称》
  • 《微信小程序开发系列-05登录小程序》
  • 《微信小程序开发系列-06事件》
  • 《微信小程序开发系列-07组件》

本文目录

  • 微信小程序开发系列目录
  • 前言
  • 什么是组件
    • 属性类型
    • 公共属性
  • 自定义组件
    • 创建自定义组件
      • 自定义组件的构成
      • 自定义组件创建步骤
        • 在自定义组件的json中声明
        • 编写自定义组件模版wxml
        • 编写自定义组件样式wxss
        • 编写自定义组件逻辑js
  • 引入第三方组件
    • 引入方法
      • useExtendedLib扩展库
      • npm引入
  • 总结

前言

在开发小程序的过程中会遇到一个常见的问题,怎样将其他同事提供的样式或者第三方的样式载入自己的工程,本文基于这个问题为索引,探索下小程序的组件。

什么是组件

  • 组件是视图层的基本组成单元。
  • 组件自带一些功能与微信风格一致的样式。
  • 一个组件通常包括 开始标签结束标签属性 用来修饰这个组件,内容 在两个标签之内。
<tagname property="value">
Content goes here ...
</tagname>
注意:所有组件与属性都是小写,以连字符-连接

属性类型

类型描述注解
Boolean布尔值组件写上该属性,不管是什么值都被当作 true;只有组件上没有该属性时,属性值才为false。如果属性值为变量,变量的值会被转换为Boolean类型
Number数字1, 2.5
String字符串"string"
Array数组[ 1, "string" ]
Object对象{ key: value }
EventHandler事件处理函数名"handlerName" 是 Page 中定义的事件处理函数名
Any任意属性

公共属性

所有组件都有以下属性:

属性名类型描述注解
idString组件的唯一标示保持整个页面唯一
classString组件的样式类在对应的 WXSS 中定义的样式类
styleString组件的内联样式可以动态设置的内联样式
hiddenBoolean组件是否显示所有组件默认显示
data-*Any自定义属性组件上触发事件时,会发送给事件处理函数
bind* / catch*EventHandler组件的事件详见事件

官方定义了非常多的组件,本文就不再列出,需要时查看官方文档即可。

自定义组件

为什么自定义组件?

  1. 当官方已有组件不满足想要的渲染效果;
  2. 功能模块抽象,降低耦合度,提高可维护性;

创建自定义组件

自定义组件的构成

类似于页面,一个自定义组件也是由 json wxml wxss js 4个文件组成。

请添加图片描述

自定义组件创建步骤

在自定义组件的json中声明

要编写一个自定义组件,首先需要在 json 文件中进行自定义组件声明。具体的声明方法是:将 component 字段设为 true

   {"component": true}

自定义组件也是可以引用其他的自定义组件,引用方法与页面引用自定义组件的方式相同。

   "usingComponents": {}

请添加图片描述

编写自定义组件模版wxml

组件模板的写法与页面模板相同。组件模板与组件数据结合后生成的节点树,将被插入到组件的引用位置上。

请添加图片描述

请添加图片描述

<slot> 节点的作用,说通俗一点就是:在使用自定义组件的页面wxml中,自定义组件标签内的content可以显示出来。如果没有slot节点,则只有自定义组件自己wxml中的content可以显示出来。所以,自定义组件模版中的slot节点用于承载组件使用者提供的 wxml 结构。本文只是简单的介绍自定义组件模版的基本写法,关于自定义组件模版相关的特性,将后续文章自定义组件模版特性详细展开。

编写自定义组件样式wxss

组件对应 wxss 文件的样式,只对组件wxml内的节点生效。编写组件样式时,需要注意以下几点:

  • 组件和引用组件的页面不能使用id选择器(#a)、属性选择器([a])和标签名选择器,请改用class选择器
  • 组件和引用组件的页面中使用后代选择器(.a .b)在一些极端情况下会有非预期的表现,如遇,请避免使用。
  • 子元素选择器(.a>.b)只能用于 view 组件与其子节点之间,用于其他组件可能导致非预期的情况。
  • 继承样式,如 fontcolor ,会从组件外继承到组件内。
  • 除继承样式外, app.wxss 中的样式、组件所在页面的的样式对自定义组件无效(除非更改组件样式隔离选项)。
   #a { } /* 在组件中不能使用 */[a] { } /* 在组件中不能使用 */button { } /* 在组件中不能使用 */.a > .b { } /* 除非 .a 是 view 组件节点,否则不一定会生效 */

除此以外,组件可以指定它所在节点的默认样式,使用 :host 选择器(需要包含基础库 1.7.2 或更高版本的开发者工具支持)。

请添加图片描述

编写自定义组件逻辑js

在自定义组件的 js 文件中,需要使用 Component() 来注册组件,并提供组件的属性定义、内部数据和自定义方法。Component 构造器可用于定义组件,调用 Component 构造器时可以指定组件的属性、数据、方法等。详细的参数含义和使用请参考 Component 参考文档。

   Component({properties: {// 这里定义了innerText属性,属性值可以在组件使用时指定innerText: {type: String,value: 'default value',}},data: {// 这里是一些组件内部数据someData: {}},methods: {// 这里是一个自定义方法customMethod: function () { }}})

请添加图片描述

引入第三方组件

引入方法

useExtendedLib扩展库

useExtendedLib是全局配置app.json中的一个配置项。

目前支持以下项目:

  • kbone: 多端开发框架
  • weui: WeUI 组件库

相当于引入了对应扩展库相关的最新版本的 npm 包,同时也不占用小程序的包体积。

{"useExtendedLib": {"kbone": true,"weui": true}
}

使用useExtendedLib引入的第三方组件,可以省略app.wxss中import。

接下来以dialog 弹窗组件为例,学习下具体的使用方法。

在index.json中添加"mp-dialog": "weui-miniprogram/dialog/dialog"

{"usingComponents": {"my-component": "/components/my-component/my-component","mp-dialog": "weui-miniprogram/dialog/dialog"}
}

在index.wxml中添加:

<mp-dialog title="test" show="{{isShow}}" bindbuttontap="tapDialogButton" buttons="{{buttons}}"><view>test content</view>
</mp-dialog>

在index.js中添加:

Page({data: {buttons: [{text: '取消'}, {text: '确认'}],isShow:true},tapDialogButton: function (e) {if (e.detail.index) {this.setData({isShow: false})// do somethingconsole.log("确认")} else if (0 == e.detail.index) {this.setData({isShow: false})console.log("取消") }},onLoad: function () {},
})

请添加图片描述

npm引入

大致分为3个步骤:安装、构建、导入。

  1. 安装weui-miniprogram
$ npm init
$ npm install weui-miniprogram
  1. 构建weui-miniprogram

请添加图片描述

  1. 导入weui-miniprogram

    在app.wxss中导入weui-miniprogram。

    请添加图片描述

说明:使用npm方式导入时,需要将app.json中的useExtendedLib配置内容删除。

总结

OK,今天学习了基础组件、自定义组件以及引入第三方组件,基本的框架搞清楚了,接下来就是学习更细节的知识点啦,如自定义组件模版的特性、自定义组件样式的特性、自定义组件之component构造器的特性等。(PS:如需要完整示例工程,请评论区@我)

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

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

相关文章

数据库的事务调度

调度 要求&#xff1a;一个事务中的操作相对顺序不能变。 以事务为单位&#xff0c;串行调度。 以操作为单位&#xff0c;并发调度。 并发调度的结果等于串行调度&#xff0c;那么并发调度是可串行化的&#xff0c;是正确的&#xff0c;是可以用来并发的。 并发级别以及其面临…

碎花连衣裙 I 森系女孩的衣橱

宛如来到了春天&#xff0c;身穿碎花连衣裙的少女 在充满阳光&#xff0c;树叶葱郁的森林里 自由快乐地穿梭&#xff0c;感受着春天的美好 感受着幸福而快乐的童年&#xff01;

10 款顶级的免费U盘数据恢复软件(2024 年 更新)

你曾经遇到过U盘无法访问的情况吗&#xff1f;现在我们教你如何恢复数据。 在信息时代&#xff0c;数据丢失往往会造成巨大的困扰。而USB闪存驱动器作为我们常用的数据存储设备&#xff0c;其重要性不言而喻。但是&#xff0c;U盘也可能会出现各种问题&#xff0c;如无法访问、…

清华开源ChatGPT自动编程ChatDev项目codes.py代码解读

这段代码定义了一个Codes类&#xff0c;这个类是用于管理生成的代码的类&#xff0c;它可以根据LLM的回复来提取、格式化、更新和保存代码。Codes类的__init__()方法是类的构造函数&#xff0c;它接受一个参数generated_content&#xff0c;表示LLM的回复内容。它首先初始化了以…

conftest.py 配置

章节目录&#xff1a; 一、概述二、场景说明三、代码示例3.1 最外层3.2 商品模块测试3.3 订单模块测试3.4 用户模块测试3.5 执行结果 四、关于 conftest.py 配置 fixture五、结束语 一、概述 “conftest.py” 是 pytest 测试框架中的一个特殊的配置文件&#xff0c;它能够为整个…

分布式技术之缓存技术

文章目录 什么是分布式缓存&#xff1f;分布式缓存原理Redis 分布缓存原理Memcached 分布式缓存原理对比分析 在计算机领域的各个方面&#xff0c;缓存都非常重要&#xff0c;是提升访问性能的一个重要技术。为什么这么说呢&#xff1f;从单个计算机的体系结构来看&#xff0c;…

【并发设计模式】聊聊等待唤醒机制的规范实现

在多线程编程中&#xff0c;其实就是分工、协作、互斥。在很多场景中&#xff0c;比如A执行的过程中需要同步等待另外一个线程处理的结果&#xff0c;这种方式下&#xff0c;就是一种等待唤醒的机制。本篇我们来讲述等待唤醒机制的三种实现&#xff0c;以及对应的应用场景。 G…

守护青山绿水 千巡翼Q20无人机变身护林员

守护青山绿水 千巡翼Q20无人机变身护林员 无人机目前在林业上的应用主要在森林资源调查、森林资源监测、森林火灾监测、森林病虫害监测防治、野生动物监测等方面。传统手段在森林资源调查中需要耗费大量人力物力&#xff0c;利用无人机技术可快速获得所需区域高精度信息&#…

SpringMVC学习与开发(四)

注&#xff1a;此为笔者学习狂神说SpringMVC的笔记&#xff0c;其中包含个人的笔记和理解&#xff0c;仅做学习笔记之用&#xff0c;更多详细资讯请出门左拐B站&#xff1a;狂神说!!! 11、Ajax初体验 1、伪造Ajax 结果&#xff1a;并未有xhr异步请求 <!DOCTYPE html> &…

关于蚁剑(AntSword)的溯源反制

中国蚁剑(AntSword) RCE漏洞 此漏洞在AntSword2.7.1版本上修复 &#xff0c;所以适用于AntSword2.7.1以下版本。 下面介绍被低版本蚁剑攻击后如何进行溯源反打 以物理机为攻击机&#xff0c;虚拟机kali模拟受害者&#xff0c;之后使用kali进行溯源反制 物理机内网ip地址&…

nodejs+vue网上书城图书销售商城系统io69w

功能介绍 该系统将采用B/S结构模式&#xff0c;使用Vue和ElementUI框架搭建前端页面&#xff0c;后端使用Nodejs来搭建服务器&#xff0c;并使用MySQL&#xff0c;通过axios完成前后端的交互 系统的主要功能包括首页、个人中心、用户管理、图书类型管理、图书分类管理、图书信…

计算机操作系统(OS)——P3内存管理

1、内存的基础知识 学习目标&#xff1a; 什么是内存&#xff1f;有何作用&#xff1f; 内存可存放数据。程序执行前__需要先放内存中才能被CPU处理__——缓和CPU与硬盘之间的速度矛盾。 【思考】在多道程序程序下&#xff0c;系统会有多个进程并发执行&#xff0c;也就是说…

基于电商场景的高并发RocketMQ实战-Consumer端队列负载均衡分配机制、并发消费以及消费进度提交

&#x1f308;&#x1f308;&#x1f308;&#x1f308;&#x1f308;&#x1f308;&#x1f308;&#x1f308; 【11来了】文章导读地址&#xff1a;点击查看文章导读&#xff01; &#x1f341;&#x1f341;&#x1f341;&#x1f341;&#x1f341;&#x1f341;&#x1f3…

4、内存泄漏检测(多线程)

4、内存泄漏多线程 多线程下使用Valgrind 工具的memcheck检查. 安装 sudo apt install valgrind使用 valgrind --toolmemcheck --leak-checkfull ./app_main 指令效果如下所示. wqwq-Virtual-Machine:~/work/test_zlog/build$ valgrind --toolmemcheck --leak-checkfull .…

解锁新可能:小红书笔记详情API的创意应用案例

一、引言 在当今信息爆炸的时代&#xff0c;内容创新已成为品牌和个人脱颖而出的关键。小红书&#xff0c;作为全球最大的消费类口碑库之一&#xff0c;每天产生大量的用户生成内容。这些内容不仅是用户分享的日常记录&#xff0c;更是品牌、商家和内容创作者获取灵感、洞察市…

深度学习 | ModernTCN模型结构

目录 基本介绍模型结构模型设计参考资料基本介绍 ModernTCN(Modern Temporal Convolutional Network)是一种用于时间序列建模的模型结构,它基于传统的Temporal Convolutional Network(TCN)并进行了一些改进。TCN是一种使用卷积神经网络(CNN)进行时间序列建模的方法,它…

MySQL面试题(很多大厂都在用)

问题1&#xff1a;char、varchar的区别是什么&#xff1f; varchar是变长而char的长度是固定的。如果你的内容是固定大小的&#xff0c;你会得到更好的性能。 问题2: TRUNCATE和DELETE的区别是什么&#xff1f; DELETE命令从一个表中删除某一行&#xff0c;或多行&#xff0c;…

【ArcGIS微课1000例】0082:地震灾害图件制作之DEM晕渲图(山体阴影效果)

以甘肃积石山县6.2级地震为例,基于震中100km范围内的DEM数据,制作数字高程模型山体阴影晕渲图。 文章目录 一、效果展示二、实验数据三、晕渲图制作一、效果展示 基于数字高程模型制作的山体阴影晕渲图如下所示: 二、实验数据 本试验所需要的数据包括: 1. 震中位置矢量数…

MariaDB单机多实例的配置方法

1、什么是数据库的单机多实例 数据库的单机多实例是指在一台物理服务器上运行多个数据库实例。这种部署方式允许多个数据库实例共享相同的物理资源&#xff0c;如CPU、内存和存储&#xff0c;从而提高硬件利用率并降低成本。每个数据库实例可以独立运行&#xff0c;处理不同的…

flask web学习之flask与http(二)

文章目录 1. HTTP响应1.1 响应报文1.2 常见HTTP状态码1.3 在flask中如何生成响应1.3.1重定向1.3.2错误响应 1.4响应格式 在flask程序中&#xff0c;客户端发出的请求触发相应的视图函数&#xff0c;获取返回值会作为响应的主体&#xff0c;最后生成完整的响应&#xff0c;即响应…