预约做家庭清洁的网站,大连做网站seo,单位网站中文域名到期续费,系部 网站建设方案微信小程序开发系列目录
《微信小程序开发系列-01创建一个最小的小程序项目》《微信小程序开发系列-02注册小程序》《微信小程序开发系列-03全局配置中的“window”和“tabBar”》《微信小程序开发系列-04获取用户图像和昵称》《微信小程序开发系列-05登录小程序》《微信小程序…微信小程序开发系列目录
《微信小程序开发系列-01创建一个最小的小程序项目》《微信小程序开发系列-02注册小程序》《微信小程序开发系列-03全局配置中的“window”和“tabBar”》《微信小程序开发系列-04获取用户图像和昵称》《微信小程序开发系列-05登录小程序》《微信小程序开发系列-06事件》《微信小程序开发系列-07组件》 本文目录 微信小程序开发系列目录前言什么是组件属性类型公共属性 自定义组件创建自定义组件自定义组件的构成自定义组件创建步骤在自定义组件的json中声明编写自定义组件模版wxml编写自定义组件样式wxss编写自定义组件逻辑js 引入第三方组件引入方法useExtendedLib扩展库npm引入 总结 前言
在开发小程序的过程中会遇到一个常见的问题怎样将其他同事提供的样式或者第三方的样式载入自己的工程本文基于这个问题为索引探索下小程序的组件。
什么是组件
组件是视图层的基本组成单元。组件自带一些功能与微信风格一致的样式。一个组件通常包括 开始标签 和 结束标签属性 用来修饰这个组件内容 在两个标签之内。
tagname propertyvalue
Content goes here ...
/tagname
注意所有组件与属性都是小写以连字符-连接属性类型
类型描述注解Boolean布尔值组件写上该属性不管是什么值都被当作 true只有组件上没有该属性时属性值才为false。如果属性值为变量变量的值会被转换为Boolean类型Number数字1, 2.5String字符串stringArray数组[ 1, string ]Object对象{ key: value }EventHandler事件处理函数名handlerName 是 Page 中定义的事件处理函数名Any任意属性
公共属性
所有组件都有以下属性
属性名类型描述注解idString组件的唯一标示保持整个页面唯一classString组件的样式类在对应的 WXSS 中定义的样式类styleString组件的内联样式可以动态设置的内联样式hiddenBoolean组件是否显示所有组件默认显示data-*Any自定义属性组件上触发事件时会发送给事件处理函数bind* / catch*EventHandler组件的事件详见事件
官方定义了非常多的组件本文就不再列出需要时查看官方文档即可。
自定义组件
为什么自定义组件
当官方已有组件不满足想要的渲染效果功能模块抽象降低耦合度提高可维护性
创建自定义组件
自定义组件的构成
类似于页面一个自定义组件也是由 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 组件与其子节点之间用于其他组件可能导致非预期的情况。继承样式如 font 、 color 会从组件外继承到组件内。除继承样式外 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 titletest show{{isShow}} bindbuttontaptapDialogButton buttons{{buttons}}viewtest 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个步骤安装、构建、导入。
安装weui-miniprogram
$ npm init
$ npm install weui-miniprogram构建weui-miniprogram 导入weui-miniprogram 在app.wxss中导入weui-miniprogram。
说明使用npm方式导入时需要将app.json中的useExtendedLib配置内容删除。
总结
OK今天学习了基础组件、自定义组件以及引入第三方组件基本的框架搞清楚了接下来就是学习更细节的知识点啦如自定义组件模版的特性、自定义组件样式的特性、自定义组件之component构造器的特性等。PS如需要完整示例工程请评论区我
