您的位置:首页 > 移动开发 > 微信开发

微信小程序之组件开发

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

组件的样式只对组件内的节点有效。
需要注意一下几点:

  1. 使用 class选择器
  2. 避免使用后代选择器
  3. 子元素选择器(.a>.b)只能用于 view 组件与其子节点之间
  4. 继承样式,如 font 、 color ,会从组件外继承到组件内
  5. 组件所在页面的的样式对自定义组件无效

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 关注 私信
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: