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

这篇具有很好参考价值的文章主要介绍了微信小程序开发系列-07组件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

微信小程序开发系列目录

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

前言

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

什么是组件

  • 组件是视图层的基本组成单元。
  • 组件自带一些功能与微信风格一致的样式。
  • 一个组件通常包括 开始标签结束标签属性 用来修饰这个组件,内容 在两个标签之内。
<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 任意属性

公共属性

所有组件都有以下属性:

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

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

自定义组件

为什么自定义组件?

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

创建自定义组件

自定义组件的构成

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

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

自定义组件创建步骤

在自定义组件的json中声明

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

   {
     "component": true
   }

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

   "usingComponents": {}

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

编写自定义组件模版wxml

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

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

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

<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 或更高版本的开发者工具支持)。

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

编写自定义组件逻辑js

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

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

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

引入第三方组件

引入方法

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 something
      console.log("确认")
    } else if (0 == e.detail.index) {
      this.setData({
        isShow: false
      })
      console.log("取消") 
    }
  },
  onLoad: function () {
  },
})

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

npm引入

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

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

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

  1. 导入weui-miniprogram

    在app.wxss中导入weui-miniprogram。

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

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

总结

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

到了这里,关于微信小程序开发系列-07组件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【微信小程序开发】第 7 课 - 小程序的常用组件

              欢迎来到博主 Apeiron 的博客,祝您旅程愉快 ! 时止则止,时行则行。动静不失其时,其道光明。 目录 1、缘起 2、小程序中组件的分类 3、常用的视图容器类组件  3.1、view 组件 3.2、scroll - view 组件 3.3、swiper 和 swiper-item 组件 3.4、text  组件的基本使用 3.5、

    2024年02月12日
    浏览(50)
  • 微信小程序开发之微信小程序交互

    目录 一、小程序交互 前端: 1、先在登陆界面中编写代码 2、在前端中编写js代码 后端:           1、先导入依赖:           2、定义好配置文件           3、编写好实体类           4、将帮助类进行配置           5、编写mapper类           6、定义service层以及对应的

    2024年02月09日
    浏览(59)
  • 微信小程序 -- 小程序开发能力与拓展

    1. 获取用户头像 当小程序需要让用户完善个人资料时,我们可以通过微信提供的头像、昵称填写能力快速完善。如图: 想使用微信提供的头像填写能力,需要两步: 将 button 组件 open-type 的值设置为 chooseAvatar 当用户选择需要使用的头像之后,可以通过 bindchooseavatar 事件回调

    2024年04月15日
    浏览(64)
  • 【微信小程序开发零基础入门】——微信小程序入门

    学习小程序跟学习网页开发有什么不同 1.如何创建微信小程序项目 1.1 注册、登录、复制appId 注册:在 https://mp.weixin.qq.com/cgi-bin/wx 进行注册微信小程序开发账号 登录:在 https://mp.weixin.qq.com 登录小程序账号 复制appId: 在 \\\"开发\\\" 的 \\\"开发管理\\\" 的 \\\"开发设置\\\" 的 \\\"开发者ID\\\"中 1.2 下

    2024年02月03日
    浏览(62)
  • 微信小程序开发教学系列(9)- 小程序页面优化

    在开发小程序时,页面性能优化是非常重要的一项任务。优化页面性能可以提升用户体验,使小程序更加流畅和高效。本章将介绍一些常见的页面优化方法和技巧,帮助您提升小程序的性能。 页面性能优化的目标是减少页面加载时间和提升页面渲染速度,从而提供更好的用户

    2024年02月11日
    浏览(49)
  • 【微信小程序开发】微信小程序集成腾讯位置项目配置

    腾讯位置服务官网 当然没账号的要先注册一个账号 在我的应用里创建一个新的应用,印象中需要小程序ID,去微信开发者工具里面找到自己的小程序ID填入即可 添加 key 中勾选勾选 WebServiceAPI 从官网里下载,我这里下载的是 v1.2 打开微信开发者工具 在查找小程序ID的地方下滑

    2024年02月02日
    浏览(62)
  • 微信小程序开发入门与实战 ①(初始微信小程序)

    @作者 : SYFStrive   @博客首页 : HomePage 📜: 微信小程序 📌: 个人社区(欢迎大佬们加入) 👉: 社区链接🔗 📌: 觉得文章不错可以点点关注 👉: 微信小程序专栏🔗 💃: 感谢支持,学累了可以先看小段由小胖给大家带来的街舞😀 🔗: 阅读文章 👉 微信小程序 (🔥)

    2024年02月09日
    浏览(111)
  • 【微信小程序开发】学习小程序的模块化开发(自定义组件和分包加载)

    模块化开发是一种将复杂的应用程序分解为一系列独立的模块,每个模块负责完成特定的功能的开发方式。模块化开发可以提高代码的可维护性和可复用性,使开发过程更加高效和灵活。 模块化开发在软件开发领域中被广泛应用,其重要性和优势不言而喻。 首先,模块化开

    2024年02月05日
    浏览(63)
  • 微信小程序实战:智能水印相机小程序开发附源码

    一款智能水印相机,拍照自动添加时间、地点、经纬度等水印文字,可用于工作考勤、学习打卡、工作取证等,支持自定义内容以及给现有照片添加水印。无需安装,无需注册,即开即用。 主要是通过canvas给图片上添加上时间水印地点信息。首先通过官方API(chooseLocation)获取

    2024年02月09日
    浏览(67)
  • 基于微信小程序的新闻资讯的小程序开发

    随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,新闻资讯被用户普遍使用,为方便用户能够可以随时进行新闻资讯的数据信息管理,特开发了基于新闻资讯的

    2024年02月03日
    浏览(52)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包