新手引导｜小程序开发指南基础篇（二）
新手引导｜小程序开发指南基础篇（一）
六. 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.jsPage({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.jsComponent({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 小程序开发。
新手引导｜小程序开发指南基础篇（三）