每个小程序都需要在 app.js
中调用 App
方法注册小程序实例,绑定生命周期回调函数、错误监听和页面不存在监听函数等。
App({ /** * 当小程序初始化完成时,会触发 onLaunch(全局只触发一次) */ onLaunch: function () { // some code; }, /** * 当小程序启动,或从后台进入前台显示,会触发 onShow */ onShow: function (options) { // some code; }, /** * 当小程序从前台进入后台,会触发 onHide */ onHide: function () { // some code; }, /** * 当小程序发生脚本错误,或者 api 调用失败时,会触发 one rror 并带上错误信息 */ one rror: function (msg) { // some code; }, /** * 自定义函数 */ getUserInfo: function(callback){ // some code; }, /** * 自定义数据 */ globalData: 'I am global data' })
整个小程序只有一个 App 实例,是全部页面共享的。开发者可以通过 getApp
方法获取到全局唯一的 App 实例,获取App上的数据或调用开发者注册在 App
上的函数。
// xxx.js const appInstance = getApp() getUserInfo(function(){ // ... }) console.log(appInstance.globalData) // I am global data
详细的参数含义和使用请参考官方 App 参考文档 。
对于小程序中的每个页面,都需要在页面对应的 js
文件中进行注册,指定页面的初始数据、生命周期回调、事件处理函数等。
简单的页面可以使用 Page()
进行构造。
Page({ /** * 页面的初始数据 */ data: { // some code; }, /** * 生命周期函数--监听页面加载 */ onl oad: function (options) { // some code; }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { // some code; }, /** * 生命周期函数--监听页面显示 */ onShow: function () { // some code; }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { // some code; }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { // some code; }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { // some code; }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { // some code; }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { // some code; }, /** * 页面滚动时执行 */ onPageScroll: function () { // some code; }, /** * 页面尺寸变化时执行 */ onResize: function () { // some code; }, })
详细的参数含义和使用请参考官方 Page 参考文档 。
Page
构造器适用于简单的页面。但对于复杂的页面, Page
构造器可能并不好用。
此时,可以使用 Component
构造器来构造页面。 Component
构造器的主要区别是:方法需要放在 methods: { }
里面。
Component({ data: { text: "This is page data." }, methods: { /** * 页面创建时执行 */ onl oad: function (options) { // some code; }, /** * 下拉刷新时执行 */ onPullDownRefresh: function (options) { // some code; }, /** * 事件响应函数 */ viewTap: function (options) { // some code; } } })