![微信小程序开发与运营](https://wfqqreader-1252317822.image.myqcloud.com/cover/975/32854975/b_32854975.jpg)
2.5 逻辑层文件
小程序的逻辑层文件分为项目逻辑文件和页面逻辑文件。
2.5.1 项目逻辑文件
项目逻辑文件app. js中可以通过App()函数注册小程序生命周期函数、全局属性和全局方法,已注册的小程序实例可以在其他页面逻辑文件中通过getApp()获取。
App()函数用于注册一个小程序,参数为Object,用于指定小程序的生命周期函数、用户自定义属性和方法,其参数如表2-7所示。
表2-7 项目逻辑文件配置项
![](https://epubservercos.yuewen.com/E048FF/17640061507545406/epubprivate/OEBPS/Images/figure_0045_0002.jpg?sign=1738909563-znLqhF5kTkfXclLFyV4tkhQmFB9iK2Jk-0-db3ae99c44400b0779ee1640589a5f5e)
当启动小程序时,首先会依次触发生命周期函数onLanuch和onShow方法,然后通过app. json的pages属性注册相应的页面,最后根据默认路径加载首页;当用户单击左上角的“关闭”按钮或单击设备的Home键离开微信时,小程序没有被直接销毁,而是进入后台,这两种情况都会触发onHide方法;当用户再次进入微信或再次打开小程序时,小程序会从后台进入前台,这时会触发onShow方法。只有当小程序进入后台一段时间(或者系统资源占用过高)时,小程序才会被销毁。
我们在Demo2的app. js加入如图2-10所示的代码。
![](https://epubservercos.yuewen.com/E048FF/17640061507545406/epubprivate/OEBPS/Images/figure_0046_0001.jpg?sign=1738909563-SVfoviSTNHc3MvoC9LIptU4Qhd9zxYZS-0-42bfae61c8c80b3ae45947e61468547b)
图2-10 app. js配置文件
保存并编译后,Console面板的显示效果如图2-11所示。
![](https://epubservercos.yuewen.com/E048FF/17640061507545406/epubprivate/OEBPS/Images/figure_0046_0002.jpg?sign=1738909563-rBzs6H43DamQBswB7yYn9p84rYKbU1Sq-0-916746f71d33c77c494e74302043eaa7)
图2-11 小程序启动显示效果
小程序启动后首先触发onLaunch方法,然后触发onShow方法,在onShow方法中通过this参数获取自定义属性和自定义方法并显示。在其他逻辑文件中,开发者可以通过全局函数getApp()方法获取小程序实例,例如:
![](https://epubservercos.yuewen.com/E048FF/17640061507545406/epubprivate/OEBPS/Images/figure_0046_0003.jpg?sign=1738909563-k7iHn2sPjtJXTIyFIGmfRMx2lf85hfT3-0-ff86f9a4c4b92968c29360068be33446)
2.5.2 页面逻辑文件
页面逻辑文件的主要功能有:设置初始数据;定义当前页面的生命周期函数;定义事件处理函数等。每个页面文件都有一个相应的逻辑文件,逻辑文件是运行在纯JavaScript引擎中。因此,在逻辑文件中不能使用浏览器提供的特有对象(document、window)及通过操作DOM改变页面,只能采用数据绑定和事件响应来实现。
在逻辑层,Page()方法用来注册一个页面,并且每个页面有且仅有一个,其参数如表2-8所示。
表2-8 页面逻辑文件配置项
![](https://epubservercos.yuewen.com/E048FF/17640061507545406/epubprivate/OEBPS/Images/figure_0047_0001.jpg?sign=1738909563-3R4iV4vOQkldqNqNaVbiSe9StArgYK8p-0-92d0cf7d0e1896b75b7df758707886b6)
1.设置初始数据
设置初始数据是对页面的第一次数据绑定。对象data将会以JSON(Javascript Object No-tation, JS对象简谱)的形式由逻辑层传至视图层。因此,数据必须是可以转成JSON的格式(字符串、数字、布尔值、对象、数组)。
视图层可以通过WXML对数据进行绑定。
数据初始、数据绑定及运行效果如图2-12所示。
![](https://epubservercos.yuewen.com/E048FF/17640061507545406/epubprivate/OEBPS/Images/figure_0048_0001.jpg?sign=1738909563-8pY2myPPgt7BjMhqiENl5U5uLBVlNKdk-0-67bd22ee7f81d4bdf2168e07435c8fdb)
图2-12 数据初始、数据绑定及运行效果
(a)数据初始;(b)数据绑定;(c)运行效果
2.定义当前页面的生命周期函数
在Page()函数的参数中,可以定义当前页面的生命周期函数。页面的生命周期函数主要有onLoad、onShow、onReady、onHide、onUnload。
■ onLoad页面加载函数。当页面加载完成后调用该函数。一个页面只会调用一次。该函数的参数可以获取wx. navigateTo和wx. redirectTo及<navigator/ >中的query。
■ onShow页面显示函数。当页面显示时调用该函数。每次打开页面都会调用一次。
■ onReady页面数据绑定函数。当页面初次数据绑定完成时调用该函数。一个页面只会调用一次,代表页面已经准备就绪,可以和视图层进行交互。
■ onHide页面隐藏函数。当页面隐藏时及当navigateTo或小程序底部进行tab切换时,调用该函数。
■ onUnload页面卸载函数。当页面卸载、进行navigateBack或redirectTo操作时,调用该函数。
例如,在index. js和news. js文件中加入如图2-13所示的代码。
![](https://epubservercos.yuewen.com/E048FF/17640061507545406/epubprivate/OEBPS/Images/figure_0048_0002.jpg?sign=1738909563-HuQI8It7jL53bBkpkrcbzSxAjsFcmhBd-0-645e9d9d6f051cc1f07cd0da7452a6a2)
图2-13 index. js和news. js文件代码
(a)index. js;(b)news. js
保存并编译后,Console面板出现了如图2-14所示的效果。
![](https://epubservercos.yuewen.com/E048FF/17640061507545406/epubprivate/OEBPS/Images/figure_0049_0001.jpg?sign=1738909563-dgNg45Xx2fyxyrZ6NJFmXEnIosVIJVrW-0-10f3c3a43159c12954e0767d0718d249)
图2-14 页面生命周期
单击“新闻”选项卡,Console面板出现如图2-15所示的效果。
![](https://epubservercos.yuewen.com/E048FF/17640061507545406/epubprivate/OEBPS/Images/figure_0049_0002.jpg?sign=1738909563-uijIhOdD7Mm8M8eLnTFH9V3jxLUThLZP-0-c8f9dae404f5d6a1d0a03318214e0617)
图2-15 新闻页面显示,首页隐藏
再次单击“首页”选项卡,Console面板出现如图2-16所示的效果。
![](https://epubservercos.yuewen.com/E048FF/17640061507545406/epubprivate/OEBPS/Images/figure_0049_0003.jpg?sign=1738909563-FdWFuTClaU3aytL3sCA6tWRm9klVLHvW-0-99769a2b3c8e5964c6ecbbfa7b455958)
图2-16 新闻页面隐藏,首页再次显示
3.定义事件处理函数
开发者在Page()中自定义的函数称为事件处理函数。视图层可以在组件中加入事件绑定,当达到触发事件时,小程序就会执行Page()中定义的事件处理函数。
示例代码如下:
![](https://epubservercos.yuewen.com/E048FF/17640061507545406/epubprivate/OEBPS/Images/figure_0050_0001.jpg?sign=1738909563-D134SbQn0bI4JlTU7At0Ew7zRsMYYshc-0-8dd40cdb0ac4e47e5e369d8f2b87d8e2)
4.使用setData更新数据
小程序在Page对象中封装了一个名为setData()的函数,用来更新data中的数据。函数参数为Object,以“key:value”对的形式表示将this. data中的key对应的值修改为value。
示例代码如图2-17所示。
![](https://epubservercos.yuewen.com/E048FF/17640061507545406/epubprivate/OEBPS/Images/figure_0050_0002.jpg?sign=1738909563-PQFXCiP0zfRPdQF6mxQPPBCYlafjLdvj-0-13e44d615a3bac6ffe4659b28412df59)
图2-17 setData. js和setData. wxml文件代码
(a)setData. js文件代码
![](https://epubservercos.yuewen.com/E048FF/17640061507545406/epubprivate/OEBPS/Images/figure_0051_0001.jpg?sign=1738909563-1TPatOLqQSGK840hzlvW8yivO4s9Y9Gw-0-0ea31d012887bf5640f82c4a545eed25)
图2-17 setData. js和setData. wxml文件代码(续)
(b)setData. wxml文件代码
保存并编译,代码修改前后的运行效果如图2-18所示。
![](https://epubservercos.yuewen.com/E048FF/17640061507545406/epubprivate/OEBPS/Images/figure_0051_0002.jpg?sign=1738909563-DhPuwBLagH66yeycGDrAw9WOOPy27gWZ-0-a7e6db81def90b7e4fd21234ccc26b6f)
图2-18 使用setData修改数据的运行效果
(a)修改前;(b)修改后