程序基础实战 4

第3章JS文件课堂讲解《微信小程序开发实战教程（Node.js+MySQL）（AI协同）（微课版）（第2版）》本章内容第3章JS文件本章将介绍微信小程序项目对应的app.js文件、具体页面对应的page.js文件以及存放公共代码的模块化JS文件。在JavaScript的语法基础上，微信小程序框架设计了一些函数与功能，方便开发者完成小程序开发。（1）提供App()和Page()函数，分别用于注册小程序和页面。（2）提供getApp()和getCurrentPages()函数，分别用于获取App实例和当前页面栈。（3）提供丰富的API，如扫一扫、支付等功能。（4）提供模块化能力，让每个页面都有独立的作用域。【注意】小程序框架的逻辑层不运行在浏览器中，故JavaScript的window、document等功能在微信小程序中不可用。2学习目标第3章JS文件1理解app.js中生命周期函数的作用2掌握app.js中全局变量的使用方法3理解page.js中生命周期函数的作用4掌握page.js中data的使用方法5掌握创建和引入模块的具体方法33.1

全局逻辑文件app.js第3章JS文件1．app.js在微信小程序中的作用app.js是微信小程序的全局逻辑文件，主要作用是注册小程序实例、定义全局数据和生命周期函数。在微信小程序中，app.js类似于其他编程语言的main()函数所在的文件，是小程序的入口文件。2．app.js的结构在app.js中，开发者可用App()函数注册小程序实例。该函数接收对象参数，包含生命周期函数、错误监听函数及开发者自定义的函数或数据。例如，onLaunch()在小程序初始化完成时触发，onShow()在小程序启动或从后台进入前台时触发。这些函数用于帮助开发者管理小程序的行为。43.1

全局逻辑文件app.js（续）第3章JS文件注册小程序的App()函数的语法格式如下。App({...})App()函数的特定参数用于指定生命周期回调函数，常用回调函数如下。onLaunch()小程序初始化完成时触发，全局仅触发一次。onShow()小程序启动或从后台进入前台时触发。onHide()小程序从前台进入后台时触发。onError()小程序发生脚本错误或API调用出错时触发。53.1

全局逻辑文件app.js（续）第3章JS文件3．app.js的功能通过在app.js中定义全局数据，例如globalData，开发者可以在小程序的任何页面中通过getApp()函数访问这些数据，这为数据共享和状态管理提供了便利。同时，app.js中定义的生命周期函数可以用来执行用户登录、数据初始化等关键操作。4．app.js的使用注意事项App()函数必须在app.js中调用，且整个小程序生命周期内只能调用一次。在App()内部的函数中，应使用this来获取小程序实例，而不应使用getApp()。应避免在小程序的onLaunch()中调用getCurrentPages()，因为此时页面可能还未生成。获取小程序实例后，不应私自调用生命周期函数。63.1.1

app.js中的生命周期函数第3章JS文件【演练3.1】编写代码，了解app.js中生命周期函数的用法。1打开在第2章中完成的项目。2将app.js中的原有代码清除，编写图3-1所示的代码，注册小程序。图3-1

修改app.js中的内容73.1.1

app.js中的生命周期函数（续）第3章JS文件【演练3.1】编写代码，了解app.js中生命周期函数的用法。3在App()函数中编写图3-2所示的代码并编译运行。观察图3-2中的“调试器”标签页，确保选中“Console”标签页，可以看到“onLaunch”和“onShow”两行，表示小程序启动后先后执行了onLaunch()和onShow()生命周期函数。图3-2

编写代码83.1.1

app.js中的生命周期函数（续）第3章JS文件【演练3.1】编写代码，了解app.js中生命周期函数的用法。4如图3-3所示，单击模拟器下方的图标，选择“Home”以模拟小程序切换到后台。5如图3-4所示，观察“调试器”下的“Console”标签页，其中输出了“onHide”。这是因为小程序切换到了后台，触发了onHide()生命周期函数。图3-3

模拟小程序切换到后台图3-4

触发了onHide()生命周期函数93.1.1

app.js中的生命周期函数（续）第3章JS文件【演练3.1】编写代码，了解app.js中生命周期函数的用法。6在模拟器中除搜索框所在行以外的任意位置单击，小程序将回到前台。再次观察“调试器”下的“Console”标签页，其中输出了“onShow”。这是因为小程序切换到了前台，触发了onShow()生命周期函数。onLaunch()函数没有再次触发，即onLaunch()函数仅在小程序载入时触发。103.1.2

app.js中的全局变量第3章JS文件【演练3.2】编写代码，了解app.js中全局变量的含义。如图3-5所示，在App()函数中添加代码。其中，“data1:'全局变量1'”在globalData对象中声明了一个变量data1，并在onLaunch()函数中使用“console.log(this.globalData.data1);”语句输出了该变量的值。在“Console”标签页中可以看到该变量的值。在app.js中通过App()的globalData参数声明的变量为全局变量，这意味着可以在app.js中获取该变量的值，后面将介绍如何在其他位置获取该全局变量的值。图3-5

app.js中的全局变量113.2

页面逻辑文件page.js第3章JS文件这里的page.js指的是某个页面对应的JS文件。小程序中的每个页面都需要在对应的JS文件中进行注册，以指定页面的初始数据、生命周期回调函数、事件处理函数等。使用Page()函数注册页面的基本语法格式如下。Page(Objectobject)Page()函数用于注册小程序中的一个页面，接收一个Object类型的参数。该参数用于指定页面的初始数据、生命周期回调函数、事件处理函数等。参数object的常用属性如下。1．data页面第一次渲染时使用的初始数据，视图层可以通过WXML对data中的字段进行数据绑定。123.2

页面逻辑文件page.js（续）第3章JS文件2．生命周期回调函数（1）onLoad(Objectquery)页面加载时触发。可通过参数query获取当前页面路径中的参数，一个页面只会调用一次该函数。（2）onShow()页面显示或切入前台时触发。（3）onReady()页面初次渲染完成时触发。一个页面只会调用一次该函数，代表页面已经准备完毕，可以和视图层进行交互。对界面内容进行设置的API（如wx.setNavigationBarTitle()）应在调用onReady()函数之后调用。133.2

页面逻辑文件page.js（续）第3章JS文件（4）onHide()页面隐藏或切入后台时触发。例如，通过wx.navigateTo()或底部导航切换到其他页面时触发。（5）onUnload()页面卸载时触发。例如，通过wx.redirectTo()或wx.navigateBack()跳转到其他页面时触发。3．事件处理函数（1）onPullDownRefresh()监听用户下拉刷新事件。需要在app.json的window选项中或页面配置中设置enablePullDownRefresh为开启状态。可以通过wx.startPullDownRefresh()触发下拉刷新，效果与用户手动下拉刷新一致。当处理完数据刷新后，可以通过wx.stopPullDownRefresh()停止当前页面的下拉刷新。143.2

页面逻辑文件page.js（续）第3章JS文件（2）onReachBottom()监听用户上拉触底事件，用于处理页面滚动到底部的操作。可以在app.json的window选项中或页面配置中通过onReachBottomDistance字段设置触底触发距离。在触发距离内滑动期间，本事件只会被触发一次。下面以p2页面为例，打开其对应的p2.js文件，内容如图3-6所示。图3-6

p2.js的内容153.2.1

page.js中的生命周期函数第3章JS文件【演练3.3】编写p2.js中的代码，了解生命周期函数。1修改p2.js文件，添加图3-7中下画线标注的两行代码，分别表示当页面显示和隐藏时执行的动作。图3-7

p2.js中的生命周期函数163.2.1

page.js中的生命周期函数（续）第3章JS文件【演练3.3】编写p2.js中的代码，了解生命周期函数。2编译运行。在底部导航中选中“页面2”标签页，观察图3-8中的“调试器”标签页，确保选中“Console”标签页，可以看到“p2显示”文字。3在底部导航中选中“页面1”标签页，观察“调试器”标签页，确保选中“Console”标签页，可以看到“p2隐藏”文字。图3-8

运行结果173.2.2

page.js页面的初始数据第3章JS文件data是页面第一次渲染时使用的初始数据。页面加载时，data将会以JSON字符串的形式由逻辑层传至渲染层，因此data中的数据必须是能够转换成JSON字符串的类型，包括字符串、数字、布尔值、对象和数组。【演练3.4】编写代码，观察page.js页面中的data。1如图3-9所示，修改p2.js文件，其中“var2:""”声明了一个变量var2。在onLoad()函数中编写如下语句。this.data.var2="页面变量2";console.log(this.data.var2);该语句用于输出data中变量var2的值。183.2.2

page.js页面的初始数据（续）第3章JS文件【演练3.4】编写代码，观察page.js页面中的data。保存并运行文件。在底部导航中选中“页面2”标签页，观察图3-9中的“调试器”标签页，确保选中“Console”标签页，可以看到“页面变量2”文字。在page.js中声明的变量为页面变量，其他文件无法直接访问该变量的值，但可以通过特定方法进行访问。图3-9

page.js页面中的data193.2.2

page.js页面的初始数据（续）第3章JS文件【演练3.4】编写代码，观察page.js页面中的data。2访问全局变量。修改p2.js文件，添加图3-10中方框所示的代码，然后编译运行。在底部导航中选中“页面2”标签页，然后观察图3-10中的“调试器”标签页，确保选中“Console”标签页，可以看到“全局变量1”文字。图3-10

访问全局变量【说明】开发者可以通过getApp()函数获取全局唯一的App实例，并获取全局变量的值。203.3

模块化第3章JS文件可以将一些公共的代码抽离成一个单独的JS文件，即模块。只有通过module.exports或者exports属性，才能使模块对外暴露接口。公共的代码抽离单独的JS文件即模块module.exports或exports属性对外暴露接口只有通过module.exports或者exports属性，才能使模块对外暴露接口。213.3.1

创建和暴露模块第3章JS文件接下来将利用utils/util.js文件讲解模块化编程，读者也可以自行创建一个新的JS文件来存放公共代码。【演练3.5】编写代码，创建和暴露模块。修改utils/util.js文件，其内容如图3-11所示。其中声明了函数sayHello()和变量x，并通过module.exports来暴露该模块接口。此外，自动生成的项目中包含一些示例函数，如formatTime()。【说明】在JavaScript文件中声明的变量和函数只在该文件中有效；不同的文件中可以声明名称相同的变量和函数，它们彼此之间不会互相