微信小程序之组件开发
2020-04-27 07:32
691 查看
1. 组件
目的: 将页面内的功能模块抽象成自定义组件,以便在不同的页面中重复使用;也可以将复杂的页面拆分成多个低耦合的模块,有助于代码维护。
2. 小程序的构成部分
结构类似于普通页面,由json wxml wxss js 4个文件组成。
2.1 JSON
需要在json文件添加一下代码标注该页面为组件页面:
{ "component": true }
2.2 WXML
编写组件模版.
关于slot标签的使用,用于承载组件使用者提供的wxml结构。默认情况下,一个组件的wxml中只能有一个slot。需要使用多slot时,可以在组件js中声明启用。
Component({ options: { multipleSlots: true // 在组件定义时的选项中启用多slot支持 }, properties: { /* ... */ }, methods: { /* ... */ } })
若有多个slot,则使用name属性对其进行区分。
2.3 WXSS
组件的样式只对组件内的节点有效。
需要注意一下几点:
- 使用 class选择器
- 避免使用后代选择器
- 子元素选择器(.a>.b)只能用于 view 组件与其子节点之间
- 继承样式,如 font 、 color ,会从组件外继承到组件内。
- 组件所在页面的的样式对自定义组件无效
2.4 JS
Component构造器可用于定义组件。
本篇文章主要讲基本使用,包含properties、data的使用。
JS样版:
Component({ behaviors: [], properties: { myProperty: { // 属性名 type: String, // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型) value: '' // 属性初始值(可选),如果未指定则会根据类型选择一个 observer: function(newVal, oldVal){} // 属性被改变时执行的函数(可选),也可以写成在methods段中定义的方法名字符串 }, myProperty2: String // 简化的定义方式 }, data: {}, // 私有数据,可用于模版渲染 // 生命周期函数,可以为函数,或一个在methods段中定义的方法名 attached: function(){}, moved: function(){}, detached: function(){}, methods: { onMyButtonTap: function(){ this.setData({ // 更新属性和数据的方法与更新页面数据的方法类似 }) }, _myPrivateMethod: function(){ // 内部方法建议以下划线开头 this.replaceDataOnPath(['A', 0, 'B'], 'myPrivateData') // 这里将 data.A[0].B 设为 'myPrivateData' this.applyDataUpdates() } } })
3 示例
3.1 wxml
<view class="wrapper"> <slot name="before"></slot> <view>这里是组件的内部细节</view> <view>{{ msgTwo.name }}</view> <view>{{ msgTwo.hello }}</view> <slot name="after"></slot> </view>
3.2 JS
properties: 组件的对外属性,是属性名到属性设置的映射表,属性设置中可包含三个字段, type 表示属性类型、 value 表示属性初始值、 observer 表示属性值被更改时的响应函数
Component({ options: { multipleSlots: true // 在组件定义时的选项中启用多slot支持 }, data: { // 为组件的内部数据 msg: "this is default msg" }, properties: { msgTwo: { type: Object, value: { name: 'thisisname', hello: 'thisishello' } } }, methods: { /* ... */ } })
3.3 组件的使用
目标的json文件
// 表明使用的组件 { "usingComponents": { "list": "../../component/list/list" } }
目标的wxml文件
组件中的对外属性 msgTwo 采用驼峰命名法,
这里传值得时候,则采用对应的连字符写法 msg-two
<list msg-two="{{ msg }}"> <view slot="before">这里是插入到组件slot name="before"中的内容</view> <view slot="after">这里是插入到组件slot name="after"中的内容</view> </list>
同时在目标的 JS 文件中的 data 声明 msg。
爱红尘的苦行僧 原创文章 8获赞 0访问量 123 关注 私信相关文章推荐
- 微信小程序开发日记之----swiper组件的坑
- 微信小程序开发自定义组件
- 微信小程序开发详解 4 组件与API
- 微信小程序开发详解(四)---微信小程序开发组件使用初步
- 微信小程序开发—快速掌握组件及API的方法---转载
- 微信小程序开发—快速掌握组件及API的方法
- 微信小程序开发详解(四)---微信小程序开发组件使用初步
- 开发 | 手把手教你实现微信小程序中的自定义组件
- 微信小程序开发—快速掌握组件及API的方法
- 微信小程序开发—(十四)表单组件1
- 微信小程序开发手记之五:组件
- 微信小程序自定义tabBar组件开发
- 微信小程序开发《11 .框架之自定义组件》
- 微信小程序入门与实战 常用组件API开发技巧项目实战
- 微信小程序开发之map地图组件定位并手动修改位置偏差
- 微信小程序开发(6)-表单数据组件的使用(picker,form,input,button)
- 微信小程序之---模版组件拖拽开发尝试
- 微信小程序开发 | 把玩系列:各种组件和API实用详解
- 微信小程序开发之picker选择器组件用法
- 微信小程序开发(七) - WXML组件(标签) - wxml 文件