微信小程序开发实战教程课件

第3章JS文件微信小程序开发实战教程（PHP+Laravel+MySQL）（微课版）学习目标理解app.js中的生命周期函数掌握app.js中的全局变量的用法理解page.js中的生命周期函数掌握page.js中的局部变量的用法掌握创建和引用模块的方法123453.1全局逻辑文件app.jsapp.js中调用了一个App()函数。App()函数用来注册小程序，它用于接收一个Object参数。其语法格式如下。App({...})3.1全局逻辑文件app.jsApp()函数的某些参数用来指定小程序的生命周期回调函数，常用的回调函数有以下几种。小程序初始化完成时触发，全局只触发一次onLaunch()小程序从前台进入后台时触发onHide()小程序启动或从后台进入前台显示时触发onShow()小程序发生脚本错误或API调用出错时触发onError()点击输入标题内容3.1.1app.js中的生命周期函数【演练】编写代码，观察app.js中的生命周期函数p1.wxml文件的内容将app.js的原有代码清除，编写如图所示的代码并保存文件。其实其中只有一行代码，用于调用App({})注册小程序。3.1.1app.js中的生命周期函数编写代码在App()函数中编写一些代码，以测试App的生命周期函数。观察图中的“调试器”标签页，确保选中“Console”标签页，可以看到“onLaunch”和“onShow”两行，表示小程序启动后先后执行了onLaunch和onShow生命周期函数。3.1.1app.js中的生命周期函数小程序切换到后台如图所示，单击模拟器右上角的图标（或在工具栏中选择“模拟操作”→“Home”选项），切换到主页以模拟小程序切换到后台。3.1.1app.js中的生命周期函数触发了onHide()生命周期函数如图所示，观察“调试器”的“Console”标签页，其中输出了“onHide”，这是因为小程序切换到了后台，触发了onHide()生命周期函数。3.1.1app.js中的生命周期函数在模拟器中除搜索位置行以外的任意位置单击，小程序将回到前台，再次观察“调试器”的“Console”标签页，其中输出了“onShow”，这是因为小程序切换到了前台，触发了onShow()生命周期函数。onLaunch()函数没有再次触发，即onLaunch()函数仅在小程序载入时触发。3.1.2app.js中的全局变量【演练】编写代码以理解app.js中的全局变量在App()函数中添加代码。其中，“data1:'全局变量1'”声明了一个变量data1，并在onLaunch()函数中使用“console.log(this.data1);”语句输出该变量的值。在“Console”标签页中可以观察到输出了该变量的值。3.2页面逻辑文件page.jspage.js指的是某个页面相应的JS文件，以p2页面为例，p2.js中调用了Page()函数。Page()函数用来注册小程序中的一个页面，其会接收一个Object类型的参数，以指定页面的初始数据、生命周期回调、事件处理函数等。其语法格式如下。Page({...})3.2页面逻辑文件page.jsdata：页面的初始数据。onLoad：监听页面加载。onShow：监听页面显示。onReady：监听页面初次渲染完成。onHide：监听页面隐藏。onUnload：监听页面卸载。onPullDownRefresh：监听用户下拉动作。onReachBottom：页面上拉触底事件的处理函数。onShareAppMessage：用户进行了转发操作。onPageScroll：页面滚动触发事件的处理函数。

onResize：页面尺寸改变时触发。

onTabItemTap：当前是标签页时，单击标签时触发。3.2.1page.js中的生命周期函数【演练】编写代码以观察p2.js中的生命周期函数p2.js中的生命周期函数修改p2.js文件，添加图中下划线所示的两行代码，分别表示当页面显示和隐藏时执行的动作。3.2.1page.js中的生命周期函数观察结果保存文件。在底部导航中选中“页面2”标签页，观察图中的“调试器”标签页，确保选中“Console”标签页，可以看到“p2显示”文字。3.2.2page.js页面初始数据编写代码以观察page.js页面中的data编写并观察page.js页面中的data如图所示，修改p2.js文件，其中“var2:""”声明了一个变量var2。在onLoad()函数中编写如下语句。this.data.var2="页面变量2";console.log(this.data.var2);3.2.2page.js页面初始数据访问全局变量访问全局变量。修改p2.js文件，添加图中方框所示的代码，保存文件。在底部导航中选中“页面2”标签页，观察图中的“调试器”标签页，确保选中“Console”标签页，可以看到“全局变量1”文字。3.3模块化【演练】编写代码以创建和暴露模块修改utils/util.js文件，其内容如图所示。其中声明了函数sayHello()和变量x，并通过module.exports来暴露该模块接口。QuickStart自动生成的项目中原本有一个示例的接口函数formatTime。3.3.1创建和暴露模块3.3.1创建和暴露模块推荐通过module.exports来暴露模块接口，而不使用exports来实现。微信小程序目前不支持直接引入node_modules，需要使用node_modules时，开发者可使用小程序支持的npm功能3.3.2引用模块【演练】编写代码以创建和暴露模块修改pl.js文件，其内容如图所示。先使用require引入模块，再在onLoad()函数中调用模块暴露的接口进行测试。3.3.2引用模块保存并运行文件，在控制台上输出如下结果。MonJ