![企业数字化转型:钉钉小程序开发权威指南](https://wfqqreader-1252317822.image.myqcloud.com/cover/339/43738339/b_43738339.jpg)
4.4.1 注册小程序页面
1.Page
Page方法接收一个Object作为参数,该参数用来指定页面的初始数据、生命周期方法、事件处理函数等。
示例代码:
![](https://epubservercos.yuewen.com/26B254/23020651101673306/epubprivate/OEBPS/Images/42664_49_2.jpg?sign=1739981832-xbd3kR4gyEk6792fJAvjYoaCW8Je66Gy-0-36d6293b0c98e3b297cbb2aebc1d9002)
![](https://epubservercos.yuewen.com/26B254/23020651101673306/epubprivate/OEBPS/Images/42664_50_1.jpg?sign=1739981832-Ltxy9zFs7nQPFY15Z9m5KcMOnRHzmW6g-0-176b3e236a34c79c4db33cdaa603ead3)
在上述代码中,Page方法的参数列表如表4-7所示。
表4-7 Page方法的参数列表
![](https://epubservercos.yuewen.com/26B254/23020651101673306/epubprivate/OEBPS/Images/42664_50_2.jpg?sign=1739981832-qjyoEY4T0k9eAZREvueCaT5I0fL0SzOx-0-6e92c2d1ea21b86997577d186387db72)
续表
![](https://epubservercos.yuewen.com/26B254/23020651101673306/epubprivate/OEBPS/Images/42664_51_1.jpg?sign=1739981832-zedFhkojKb1h1XEp8danVliKahgjlJSY-0-973f75dbcf07259eed1596de7044f418)
(1)页面初始数据data。
data是页面第一次渲染时使用的初始数据。
注意
当data作为对象时,如果在页面中修改data,则会影响该页面的不同实例。
.axml示例代码:
![](https://epubservercos.yuewen.com/26B254/23020651101673306/epubprivate/OEBPS/Images/42664_51_2.jpg?sign=1739981832-2FdTyBOHNiIKhNoWcpTCFRGq7u9uEBi7-0-2761f8ac33aa876565d9a7ee185c5744)
.js示例代码:
![](https://epubservercos.yuewen.com/26B254/23020651101673306/epubprivate/OEBPS/Images/42664_51_3.jpg?sign=1739981832-YK5OOo2q0qTNZ924Wm7XT4AuCPNHl5sh-0-4b8a4b0e7a15a6f07154f59612d42ed3)
(2)生命周期方法及其说明如表4-8所示。
表4-8 生命周期方法及其说明
![](https://epubservercos.yuewen.com/26B254/23020651101673306/epubprivate/OEBPS/Images/42664_52_1.jpg?sign=1739981832-eay675bfQvEux5dgjAiZNUwSt2a329W6-0-9df8e6dbfb10f110f5be942e47c821da)
(3)事件处理函数及其说明如表4-9所示。
表4-9 事件处理函数及其说明
![](https://epubservercos.yuewen.com/26B254/23020651101673306/epubprivate/OEBPS/Images/42664_52_2.jpg?sign=1739981832-PThgFQqI2UTrd3CGAkSMVU5ZWmhoAx7c-0-e5258579661f6403daada7bae845fe38)
2.Page.prototype.setData
setData方法用于将数据从逻辑层发送到视图层,同时改变对应的this.data的值。
setData方法接收一个对象作为参数。对象的键名key可以非常灵活,以数据路径的形式给出,如array[2].message、a.b.c.d,并且不需要在this.data中预先定义。
注意
● 直接修改this.data无效,无法改变页面的状态,还会造成数据不一致。
● 尽量避免一次性设置过多的数据。
示例代码:
![](https://epubservercos.yuewen.com/26B254/23020651101673306/epubprivate/OEBPS/Images/42664_52_3.jpg?sign=1739981832-Iy3cGb0nZqI8T1XB8qol1qxTtYQy786A-0-2e1e2289bfe8352e072071fcb5768b31)
![](https://epubservercos.yuewen.com/26B254/23020651101673306/epubprivate/OEBPS/Images/42664_53_1.jpg?sign=1739981832-B8xSNLSrL5ApEXzvDEoxAMpWDNT4IZ9a-0-dffd1edad66311cf4a19ef5cb590381e)
3.Page.prototype.$spliceData
$spliceData同样用于将数据从逻辑层发送到视图层,但是相比setData,在处理长列表时,其具有更高的性能。$spliceData接收一个对象作为参数。
● 对象的键名key可以非常灵活,以数据路径的形式给出,如array[2].message、a.b.c.d,并且不需要在this.data中预先定义。
● 对象的value为一个数组(格式为[start,deleteCount,...items]),数组的第一个元素为操作的起始位置,第二个元素为删除的元素的个数,剩余的元素均为插入的数据,对应ES5中数组的splice方法。
.axml示例代码:
![](https://epubservercos.yuewen.com/26B254/23020651101673306/epubprivate/OEBPS/Images/42664_54_1.jpg?sign=1739981832-dAEANnKXdme3Vd6bR1ffRLiqqeF6cju0-0-338f3ccad5d60dc71dc323b11c89d300)
.js示例代码:
![](https://epubservercos.yuewen.com/26B254/23020651101673306/epubprivate/OEBPS/Images/42664_54_2.jpg?sign=1739981832-V9u4v99er2WF4JdIJJTnFwSMjG8GWvCf-0-b1151bf0173d9b590ed969f134e30386)
页面输出:
![](https://epubservercos.yuewen.com/26B254/23020651101673306/epubprivate/OEBPS/Images/42664_54_3.jpg?sign=1739981832-yQcqaICEJlcmqbu6FXsl2UHUYI5Rd9vt-0-e58b5cb7cc91bfd58d8de9430864d300)