JS 文件

3.2.1 page.js中的生命周期函数
13
【演练】编写代码以观察p2.js中的生命周期函数
修改p2.js文件，添加图中下划线所示 的两行代码，分别表示当页面显示和隐 藏时执行的动作。
p2.js中的生命周期函数
3.2.1 page.js中的生命周期函数
14
保存文件。在底部导航中选中 “页面2”标签页，观察图中的 “调试器”标签页，确保选中 “Console”标签页，可以看到 “p2显示”文字。
3.3 模块化
17
3.3.1 创建和暴露模块
【演练】编写代码以创建和暴露模块
修改utils/util.js文件，其内容如图所示。 其中声明了函数sayHello()和变量x，并 通过module.exports来暴露该模块接口。 QuickStart自动生成的项目中原本有一个 示例的接口函数formatTime。
编写并观察page.js页面中的data
3.2.2 page.js页面初始数据
16
访问全局变量。修改p2.js文件，添加图 中方框所示的代码，保存文件。在底部 导航中选中“页面2”标签页，观察图中 的“调试器”标签页，确保选中 “Console”标签页，可以看到“全局 变量1”文字。
访问全局变量
3.2 页面逻辑文件page.js
11
page.js指的是某个页面相应的JS文件，以p2页面为例，p2.js中调用了Page()函数。Page() 函数用来注册小程序中的一个页面，其会接收一个Object类型的参数，以指定页面的初始数据、 生命周期回调、事件处理函数等。其语法格式如下。
Page({ ...
编写代码
3.1.1 app.js中的生命周期函数
7
如图所示，单击模拟器右上角的 图标（或在工具栏中选择“模拟操 作”→“Home”选项），切换到主 页以模拟小程序切换到后台。
小程序切换到后台
3.1.1 app.js中的生命周期函数
8
如图所示，观察“调试器”的 “Console”标签页，其中输出了 “onHide”，这是因为小程序切换 到了后台，触发了onHide()生命周期 函数。
观察结果
3.2.2 page.js页面初始数据
15
编写代码以观察page.js页面中的data
如图所示，修改p2.js文件，其中“var2:" "” 声明了一个变量var2。在onLoad()函数中编 写如下语句。
this.data.var2="页面变量2"; console.log(this.data.var2);
onHide() 小程序从前台进入后台时 触发
点击输入 标题内容
onShow() 小程序启动或从后台进入 前台显示时触发
onError() 小程序发生脚本错误或 API调用出错时触发
3.1.1 app.js中的生命周期函数
5
【演练】编写代码，观察app.js中的生命周期函数
将app.js的原有代码清除，编写如图 所示的代码并保存文件。其实其中只 有一行代码，用于调用App({})注册 小程序。
3.1.2 app.js中的全局变量
10
【演练】编写代码以理解app.js中的全局变量
在App()函数中添加代码。其中， “data1: '全局变量1'”声明了一个 变量data1，并在onLaunch()函数中 使用“console.log(this.data1);”语 句输出该变量的值。在“Console” 标签页中可以观察到输出了该变量的 值。
3
app.js中调用了一个App()函数。App()函数用来注册小程序，它用于接收一个Object参数。 其语法格式如下。
App({ ... })
3.1 全局逻辑文件app.js
4
App()函数的某些参数用来指定小程序的生命周期回调函数，常用的回调函数有以下几种。
onLaunch() 小程序初始化完成时触 发，全逻辑文件page.js
12
data：页面的初始数据。 onLoad：监听页面加载。 onShow：监听页面显示。 onReady：监听页面初次渲染完成。 onHide：监听页面隐藏。 onUnload：监听页面卸载。 onPullDownRefresh：监听用户下拉动作。 onReachBottom：页面上拉触底事件的处理函数。 onShareAppMessage：用户进行了转发操作。 onPageScroll：页面滚动触发事件的处理函数。 onResize：页面尺寸改变时触发。 onTabItemTap：当前是标签页时，单击标签时触发。
3.3.1 创建和暴露模块
18
推荐通过module.exports来暴露模块接口，而不使用exports来实现。 微 信 小 程 序 目 前 不 支 持 直 接 引 入 node_modules ， 需 要 使 用
node_modules时，开发者可使用小程序支持的npm功能
触发了onHide()生命周期函数
3.1.1 app.js中的生命周期函数
9
在模拟器中除搜索位置行以外的任意位置单击，小程序将回到前台，再 次观察“调试器”的“Console”标签页，其中输出了“onShow”， 这是因为小程序切换到了前台，触发了onShow()生命周期函数。
onLaunch()函数没有再次触发，即onLaunch()函数仅在小程序载入时 触发。
p1.wxml文件的内容
3.1.1 app.js中的生命周期函数
6
在App()函数中编写一些代码，以测试 App的生命周期函数。观察图中的“调 试器”标签页，确保选中“Console” 标签页，可以看到“onLaunch”和 “onShow”两行，表示小程序启动后 先后执行了onLaunch和onShow生命 周期函数。
微信小程序开发实战教程（PHP+Laravel+MySQL）（微课版）
第3章 JS文件
学习目标
1 理解app.js中的生命周期函数 2 掌握app.js中的全局变量的用法 3 理解page.js中的生命周期函数 4 掌握page.js中的局部变量的用法 5 掌握创建和引用模块的方法
3.1 全局逻辑文件app.js