【行业认证·权威头衔】✔ 华为云天团核心成员特约编辑/云享专家/开发者专家/产品云测专家✔ 开发者社区全满贯CSDN博客商业化双料专家/阿里云签约作者/腾讯云内容共创官/掘金亚马逊51CTO顶级博主✔ 技术生态共建先锋横跨鸿蒙、云计算、AI等前沿领域的技术布道者【荣誉殿堂】 连续三年蝉联华为云十佳博主2022-2024 双冠加冕CSDN年度博客之星TOP220222023 十余个技术社区年度杰出贡献奖得主【知识宝库】覆盖全栈技术矩阵◾ 编程语言.NET/Java/Python/Go/Node…◾ 移动生态HarmonyOS/iOS/Android/小程序◾ 前沿领域物联网/网络安全/大数据/AI/元宇宙◾ 游戏开发Unity3D引擎深度解析文章目录微信小程序逻辑层框架接口1 使用 App() 函数注册小程序App() 中的函数详解getApp() 函数注意2 使用 Page() 函数注册页面Page() 函数的相关介绍☀️1. data☀️2. 生命周期回调函数☀️3. 页面事件处理函数☀️4. 组件事件处理函数注意附AI 提示词模板与完整回答示例模板 1让 AI 解释 App() 和 Page() 的生命周期微信小程序 App() 与 Page() 生命周期详解☀️一、App() 生命周期☀️二、Page() 生命周期☀️三、注意事项模板 2让 AI 生成页面注册完整代码模板 3让 AI 修复 Page() 中的常见错误微信小程序逻辑层框架接口要让小程序顺利运行首先要注册小程序和其中的页面并为它们设置生命周期。2.1.1 小节介绍了框架全局文件其中app.js文件是小程序的逻辑文件用于定义全局数据和全局函数。本节将详细讲解在app.js文件中注册小程序和页面的方法。1 使用 App() 函数注册小程序在app.js文件里App()函数是用来注册小程序的有了这个函数才能说明这个项目是小程序项目。App()函数有一个object参数在注册小程序的同时可以指定小程序的生命周期函数。App()函数必须在app.js文件中调用必须调用且只能调用一次。示例代码如下// app.jsApp({onLaunch(options){// 小程序初始化时做的操作console.log(小程序初始化,options);},onShow(options){// 小程序显示时做的操作console.log(小程序显示,options);},onHide(){// 小程序隐藏时做的操作console.log(小程序隐藏);},onError(msg){// 小程序发生脚本错误或 API 调用报错时触发console.log(msg);},onPageNotFound(msg){// 小程序要打开的页面不存在时触发console.log(msg);},onThemeChange(msg){// 系统切换主题时触发console.log(msg);},globalData:{userInfo:null,host:https://api.mofun365.com:8888,// 接口访问域名code:null,// 微信登录凭证 codeuserId:null// 用户 ID}});App() 中的函数详解函数说明onLaunch(options)生命周期回调函数监听小程序初始化在小程序初始化完成时触发全局只触发一次。onShow(options)生命周期回调函数监听小程序启动或切换到前台在小程序启动或从后台切换到前台显示时触发。onHide()生命周期回调函数监听小程序切换到后台在小程序从前台切换到后台时触发。onError(msg)错误监听函数在小程序发生脚本错误或 API 调用报错时触发。onPageNotFound(msg)页面不存在监听函数在小程序要打开的页面不存在时触发。onThemeChange(msg)生命周期函数在系统切换主题时触发。可以使用wx.onThemeChange()绑定监听。getApp() 函数通过getApp()函数获取小程序全局唯一的 App 实例后就可以调用app.js文件里配置的自定义函数和自定义全局数据了。示例代码如下// 在页面的 .js 文件中varappgetApp();console.log(app.globalData.host);// 获取 globalData 全局数据里配置的域名getApp()函数在页面的.js文件里执行就可以获取小程序全局唯一的 App 实例莫凡商城小程序也是采用这样的方式来获取在globalData全局数据中配置的域名的。注意不要在定义于App()内的函数中调用getApp()使用this就可以获得 App 实例。通过getApp()获取实例之后不要私自调用生命周期函数。2 使用 Page() 函数注册页面在app.js文件里使用App()函数可以注册小程序在app.json中配置页面路径后开发者需要为每个页面创建对应的.js、.wxml、.json、.wxss4 个文件。在*.js文件里需要使用Page()函数来注册页面指定页面的初始数据、生命周期回调函数、事件处理函数等。示例代码如下// index.jsPage({data:{text:This is page data.,customData:{hi:MINA}},onLoad(options){// 页面加载时执行一些初始化操作console.log(页面加载,options);},onReady(){// 页面初次渲染完成时执行console.log(页面初次渲染完成);},onShow(){// 页面显示时执行console.log(页面显示);},onHide(){// 页面隐藏时执行console.log(页面隐藏);},onUnload(){// 页面关闭时执行console.log(页面卸载);},onPullDownRefresh(){// 用户下拉时执行console.log(下拉刷新);},onReachBottom(){// 页面滚动到底部时执行console.log(上拉触底);},onShareAppMessage(){// 用户分享时返回自定义分享数据return{title:自定义分享标题,path:/pages/index/index};},onPageScroll(){// 页面滚动时执行console.log(页面滚动);},onResize(){// 页面尺寸变化时执行console.log(页面尺寸变化);},onTabItemTap(item){// 用户点击 tab 时触发console.log(item.index);console.log(item.pagePath);console.log(item.text);},// 事件处理函数viewTap(){this.setData({text:Set some data for updating view.},function(){// 这是 setData 的回调函数console.log(setData 回调执行);});}});Page() 函数的相关介绍☀️1. datadata是页面第一次渲染时使用的初始数据。页面加载时data将会以 JSONJavaScript Object NotationJS 对象简谱字符串的形式由逻辑层传至渲染层因此data中的数据必须是可以转换成 JSON 字符串的类型比如字符串、数字、布尔值、对象或数组。JSON 是一种轻量级的数据交换格式示例代码如下{employees:[{firstName:Bill,lastName:Gates}]}☀️2. 生命周期回调函数函数说明onLoad(options)生命周期回调函数在页面加载时触发。一个页面只会调用一次可以在onLoad()的参数对象中获取打开当前页面路径时所需要的参数和值。onReady()生命周期回调函数在页面初次渲染完成时触发。一个页面只会调用一次代表页面已经准备妥当可以和视图层进行交互。onShow()生命周期回调函数在页面显示时触发。onHide()生命周期回调函数在页面隐藏时触发。onUnload()生命周期回调函数在页面卸载时触发即在调用redirectTo()或navigateBack()函数时调用。☀️3. 页面事件处理函数函数说明onPullDownRefresh()页面事件处理函数监听用户下拉刷新事件。需要在app.json文件的window配置项或页面配置中开启enablePullDownRefresh。也可以通过wx.startPullDownRefresh()触发下拉刷新事件调用后触发下拉刷新动画效果与用户手动下拉刷新一致。当处理完数据刷新后wx.stopPullDownRefresh()会停止当前页面的下拉刷新。onReachBottom()页面事件处理函数监听用户上拉触底事件。可以在app.json文件的window配置项或页面配置中通过onReachBottomDistance设置触发距离。在触发距离内上拉时本事件只会触发一次。onShareAppMessage()页面事件处理函数监听用户点击页面内转发按钮button open-typeshare转发/button或右上角菜单中的“转发”按钮的行为并自定义转发内容。只有定义了此页面事件处理函数右上角菜单中才会显示“转发”按钮。onPageScroll()页面事件处理函数监听用户滑动页面事件。onResize()页面事件处理函数监听页面尺寸发生改变的事件。对于自定义组件可以使用resize生命周期来监听。回调函数中将返回显示区域的尺寸信息。onTabItemTap(item)页面事件处理函数用户点击 tab导航标签时触发可以获取 tab 的序号、页面路径、按钮文字。☀️4. 组件事件处理函数在Page()中还可以定义组件事件处理函数。在渲染层的组件中加入事件绑定当事件被触发时就会执行Page()中定义的事件处理函数如将“注册”按钮绑定register事件、“登录”按钮绑定login事件等。注意通过getCurrentPages()函数可以获取当前页面栈返回页面数组对象PageObject[]。数组中的第一个元素为首页最后一个元素为当前页面。不要尝试修改页面栈否则会导致路由及页面状态错误。不要在小程序初始化的时候调用getCurrentPages()函数因为此时页面实例尚未生成。附AI 提示词模板与完整回答示例原文未包含 AI 提示词模板和回答。以下为便于学习和开发补充的完整模板与完整回答可直接复制使用。模板 1让 AI 解释 App() 和 Page() 的生命周期提示词模板请详细解释微信小程序中 App() 和 Page() 的生命周期函数。 要求 1. 分别列出 App() 和 Page() 的生命周期函数 2. 说明每个函数的触发时机 3. 给出完整示例代码 4. 说明使用注意事项。 请用表格和分级标题输出内容完整。完整回答示例微信小程序 App() 与 Page() 生命周期详解☀️一、App() 生命周期函数触发时机onLaunch小程序初始化完成时触发全局只触发一次。onShow小程序启动或从后台切换到前台时触发。onHide小程序从前台切换到后台时触发。onError小程序发生脚本错误或 API 调用报错时触发。onPageNotFound小程序要打开的页面不存在时触发。onThemeChange系统切换主题时触发。示例代码App({onLaunch(options){console.log(小程序初始化,options);},onShow(options){console.log(小程序显示,options);},onHide(){console.log(小程序隐藏);},onError(msg){console.log(错误,msg);},onPageNotFound(msg){console.log(页面不存在,msg);},onThemeChange(msg){console.log(主题变化,msg);},globalData:{host:https://api.mofun365.com:8888}});☀️二、Page() 生命周期函数触发时机onLoad页面加载时触发一个页面只调用一次。onShow页面显示时触发。onReady页面初次渲染完成时触发一个页面只调用一次。onHide页面隐藏时触发。onUnload页面卸载时触发。示例代码Page({data:{text:Hello},onLoad(options){console.log(页面加载,options);},onShow(){console.log(页面显示);},onReady(){console.log(页面初次渲染完成);},onHide(){console.log(页面隐藏);},onUnload(){console.log(页面卸载);}});☀️三、注意事项App()必须在app.js中调用且只能调用一次。Page()必须在页面的.js文件中调用。不要在App()内调用getApp()使用this即可。不要私自调用生命周期函数。getCurrentPages()不要在初始化时调用。模板 2让 AI 生成页面注册完整代码提示词模板请使用微信小程序原生框架生成一个页面的完整注册代码。 要求 1. 包含 data 初始数据 2. 包含 onLoad、onShow、onReady、onHide、onUnload 生命周期 3. 包含 onPullDownRefresh、onReachBottom、onShareAppMessage 事件 4. 包含一个自定义事件处理函数 5. 给出完整 index.js 代码并解释关键逻辑。完整回答示例// pages/index/index.jsPage({data:{text:This is page data.,list:[]},onLoad(options){console.log(页面加载,options);this.loadData();},onShow(){console.log(页面显示);},onReady(){console.log(页面初次渲染完成);},onHide(){console.log(页面隐藏);},onUnload(){console.log(页面卸载);},onPullDownRefresh(){console.log(下拉刷新);this.loadData();wx.stopPullDownRefresh();},onReachBottom(){console.log(上拉触底);// 加载更多},onShareAppMessage(){return{title:自定义分享标题,path:/pages/index/index};},loadData(){// 模拟加载数据this.setData({list:[{id:1,name:图书一},{id:2,name:图书二}]});},viewTap(){this.setData({text:Set some data for updating view.},(){console.log(setData 回调执行);});}});关键逻辑说明data定义页面初始数据。onLoad在页面加载时调用可获取页面参数。onShow在页面显示时调用。onReady在页面初次渲染完成时调用。onPullDownRefresh处理下拉刷新处理完后调用wx.stopPullDownRefresh()。onReachBottom处理上拉触底可用于分页加载。onShareAppMessage定义分享内容。viewTap是自定义事件处理函数通过bindtap绑定。模板 3让 AI 修复 Page() 中的常见错误提示词模板我在微信小程序 Page() 中遇到以下问题 【粘贴报错信息或问题描述】 相关代码 【粘贴代码】 请帮我定位原因给出修改后的完整代码并解释修改点。完整回答示例假设问题页面中this.setData不生效数据没有更新。相关代码Page({data:{count:0},onLoad(){this.data.count1;}});原因直接修改this.data.count不会触发页面更新必须使用this.setData()。修改后的完整代码Page({data:{count:0},onLoad(){this.setData({count:1});}});修改点说明使用this.setData()更新数据。setData会通知视图层刷新。直接修改this.data不会触发页面更新。如果需要回调可以使用this.setData(data, callback)。