六. Page
注册小程序中的一个页面。接受一个 Object 类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。更多信息，请查看 Page。
1. data
data 是页面第一次渲染使用的 初始数据。
示例代码
<view>{{text}}</view>
<view>{{array[0].msg}}</view>
Page({
data: {
text: "init data",
array: [{ msg: "1" }, { msg: "2" }],
},
});
2. 事件绑定
Page中可以定义组件事件处理函数。- 通过
setData，您可以异步地将数据变更后显示给视图。setData为异步。 - 更多信息，请查看 页面事件处理函数。
示例代码
<view bind:tap="viewTap">{{num}}</view>
Page({
data: {
num: 0,
},
viewTap: function () {
this.setData({
num: this.data.num + 1,
});
},
});
3. 生命周期
onLoad：页面加载时触发。一个页面只会调用一次，可以在onLoad的参数中获取打开当前页面路径中的参数。onShow：页面显示/切入前台时触发。onReady：页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。onHide：页面隐藏或切入后台时触发。onUnload：页面卸载时触发。- 更多信息，请查看 生命周期。
4. 页面事件处理函数
onPullDownRefresh：监听用户下拉刷新事件。onReachBottom：监听用户上拉触底事件。
更多信息，请查看 页面事件处理函数。
示例代码
//index.js
Page({
data: {
text: "This is page data.",
},
onLoad: function (options) {
// Do some initialize when page load.
},
onShow: function () {
// Do something when page show.
},
onReady: function () {
// Do something when page ready.
},
onHide: function () {
// Do something when page hide.
},
onUnload: function () {
// Do something when page close.
},
onPullDownRefresh: function () {
// Do something when pull down.
},
onReachBottom: function () {
// Do something when page reach bottom.
},
});
七. Component 自定义组件
创建自定义组件，接受一个 Object 类型的参数，用于描述组件的逻辑交互行为。更多信息，请查看 Component。
// 文件 /components/foo/index.js
Component({
options: Object,
properties: Object,
observers: Object,
data: Object,
methods: Object,
behaviors: Array,
lifetimes: Object,
pageLifetimes: Object,
relations: Array,
});
1. properties
- 声明自定义组件的属性配置及数据处理，每一个键值代表一个属性名，使用驼峰写法，通过
type定义属性值的类型。更多信息，请查看 properties。 properties可通过observer()监听属性值的变化。
示例代码
Component({
properties: {
myName: {
type: String,
value: "smart",
observer: function (newValue, oldValue) {
// do something
},
},
},
});
2. observers
- 数据监听器可以用于监听和响应任何属性（
properties）和数据（data）字段的变化。更多信息，请查看 observers。 注意：如果在数据监听器函数中使用setData设置本身监听的数据字段，可能会导致死循环。
Component({
observers: {
"value1, value2": function (value1, value2) {
// this.setData 对应数据时触发
},
"some.subfield": function (subfield) {
// 使用 setData 设置 this.data.some.subfield 时触发
// （除此以外，使用 setData 设置 this.data.some 也会触发）
subfield === this.data.some.subfield;
},
"arr[12]": function (arr12) {
// 使用 setData 设置 this.data.arr[12] 时触发
// （除此以外，使用 setData 设置 this.data.arr 也会触发）
arr12 === this.data.arr[12];
},
"some.field.**": function (field) {
// 使用 setData 设置 this.data.some.field 本身或其下任何子数据字段时触发
// （除此以外，使用 setData 设置 this.data.some 也会触发）
field === this.data.some.field;
},
"**": function () {
// 每次 setData 都触发
},
},
});
3. data
- 自定义组件的数据对象的使用类似于
page的数据对象。 - 自定义组件的数据对象和
properties共同用于组件模板的渲染。
<view>{{name}}: {{age}}</view>
Component({
properties: {
'name': {
type: String,
value: 'smart'
}
}
data: { age: 18 },
});
👉 立即免费领取开发资源，体验涂鸦 MiniApp 小程序开发。
4. 生命周期
lifetimes
created：在组件实例刚刚被创建时执行。attached：在组件实例进入页面节点树时执行。ready：在组件在视图层布局完成后执行。moved：在组件实例被移动到节点树另一个位置时执行。detached：在组件实例被从页面节点树移除时执行。error：每当组件方法抛出错误时执行。
示例代码
Component({
lifetimes: {
attached: function () {
// 在组件实例进入页面节点树时执行
},
},
});
pageLifetimes
show：组件所在的页面被展示时执行。hide：组件所在的页面被隐藏时执行。resize：组件所在的页面尺寸变化时执行。
示例代码
Component({
pageLifetimes: {
show: function () {
// 组件所在的页面被展示时执行
},
},
});
5. 组件页面通信
组件间的常用通信方式包括以下 2 种方式：
TYML数据绑定：用于父组件向子组件的指定属性设置数据，仅能设置 JSON 兼容数据。- 事件：用于子组件向父组件传递数据，可以传递任意数据。 更多方式，请参考 组件间通信与事件。
监听事件
- 事件系统是组件间通信的主要方式之一。自定义组件可以触发任意的事件，引用组件的页面可以监听这些事件。
- 监听自定义组件事件的方法与监听基础组件事件的方法完全一致。
示例代码
<!-- 当自定义组件触发"myevent"事件时，调用"onMyEvent"方法 -->
<component-tag-name bind:myevent="onMyEvent" />
Page({
onMyEvent: function (e) {
e.detail; // 自定义组件触发事件时提供的detail对象
},
});
触发事件
自定义组件触发事件时，需要使用 triggerEvent 方法，指定事件名、detail 对象和事件选项。
示例代码
<!-- 在自定义组件中 -->
<button bind:tap="onTap">点击这个按钮将触发"myevent"事件</button>
Component({
properties: {},
methods: {
onTap: function () {
var myEventDetail = {}; // detail 对象，提供给事件监听函数
var myEventOption = {}; // 触发事件的选项
this.triggerEvent("myevent", myEventDetail, myEventOption);
},
},
});
6. slot
- 在组件的
tyml中可以包含slot节点，用于承载组件使用者提供的tyml结构。 - 一个组件的
tyml中支持有一个或者多个slot。 - 在组件的
tyml中使用多个slot时，以不同的name来区分。使用时，用slot属性来将节点插入到不同的slot上。
示例代码
<!-- 组件模板 -->
<view class="wrapper">
<slot name="before"></slot>
<view>这里是组件的内部细节</view>
<slot name="after"></slot>
</view>
<!-- 引用组件的页面模板 -->
<view>
<component-tag-name>
<!-- 这部分内容将被放置在组件 <slot name="before"> 的位置上 -->
<view slot="before">这里是插入到组件slot name="before"中的内容</view>
<!-- 这部分内容将被放置在组件 <slot name="after"> 的位置上 -->
<view slot="after">这里是插入到组件slot name="after"中的内容</view>
</component-tag-name>
</view>
7.样式隔离
默认情况下，自定义组件的样式只受到自定义组件 tyss 的影响。以下两种情况例外：
app.tyss或页面的tyss中使用了标签名选择器（或一些其他特殊选择器）来直接指定样式。这些选择器会影响到页面和全部组件。通常情况下，这是不推荐的做法。- 指定特殊的样式隔离选项
styleIsolation。 - 在项目中使用
iconfont时，由于iconfont的样式文件是全局。因此，在自定义组件中需要使用iconfont时，应关闭样式隔离。
示例代码
Component({
options: {
styleIsolation: "isolated",
},
});
styleIsolation 取值
isolated：启用样式隔离(默认值)。apply-shared：页面tyss样式将影响到自定义组件，但自定义组件tyss中指定的样式不会影响页面。shared：页面tyss样式将影响到自定义组件，自定义组件tyss中指定的样式也会影响页面和其他设置。
示例代码
<!-- 组件 custom-component.tyml -->
<text class="red-text">这段文本的颜色由 `app.tyss` 和页面 `tyss` 中的样式定义来决定</text>
/* app.tyss */
.red-text {
color: red;
}
/* 组件 custom-component.js */
Component({
options: {
addGlobalClass: true,
},
});
👉 立即免费领取开发资源，体验涂鸦 MiniApp 小程序开发。
扫一扫
570
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
