微信小程序（五）页面生命周期详细介绍

2024-12-14 14:22:46

这里只要熟悉页面的基本生命周期即可，业务在指定生命周期函数内书写。

以下是官网给出的生命周期函数方法和状态图

上面的生周期函数图对于做Android 或者IOS的来书理解起来应该不是难事，具体怎么掌握只有慢慢尝试和摸索

代码处理:

这里的代码主需要对使用创建项目时index目录下文件处理下就行,至于跳转后的页面用的还是logs不需要更改！下面贴下代码注释也比较详细

index.wxml

<!--index.wxml-->
<view class="container">
<!--绑定点击事件-->
 <view bindtap="bindViewTap" class="userinfo">
 </view>
 <view class="usermotto">
 <!--数据绑定-->
 <text class="user-motto">{{motto}}</text>
 </view>
</view>

index.wxss

/**index.wxss**/

.container {
 width: 800;
 height: 800;
}
.userinfo {
 width: 120rpx;
 height: 120rpx;
 background: red;
}

index.js

//index.js
//获取应用实例
var app = getApp()
Page({
 /**
 * 通过data初始化数据
 */
 data: {
 motto: '点击上面View跳转',
 // userInfo: {}
 },
 //事件处理函数
 bindViewTap: function() {
 //通过调用API进行跳转
 wx.navigateTo({
 url: '../logs/logs'
 })
 },
 /**
 * 监听页面开在加载的状态
 * 页面加载完成之后就不会在执行
 */
 onLoad: function () {
 console.log('index---------onLoad()')
 // //this指的就是本页面对象
 // var that = this
 // //调用应用实例的方法获取全局数据
 // app.getUserInfo(function(userInfo){
 // //更新数据
 // that.setData({
 // userInfo:userInfo
 // })
 // //更新本页面
 // that.update()
 // })
 },
 /**
 * 监听页面显示，
 * 当从当前页面调转到另一个页面
 * 另一个页面销毁时会再次执行
 */
 onShow: function() {
 console.log('index---------onShow()')
 },
 /**
 * 监听页面渲染完成
 * 完成之后不会在执行
 */
 onReady: function() {
 console.log('index---------onReaday()');
 },
 /**
 * 监听页面隐藏
 * 当前页面调到另一个页面时会执行
 */
 onHide: function() {
 console.log('index---------onHide()')
 },
 /**
 * 当页面销毁时调用
 */
 onUnload: function() {
 console.log('index---------onUnload')
 }

})

相关文章：

hello WeApp                    icon组件
Window                            text组件                                switch组件
tabBar底部导航               progress组件                        action-sheet
应用生命周期                    button组件                            modal组件
页面生命周期                    checkbox组件                      toast组件
模块化详                     form组件详                     loading 组件
数据绑定                           input 组件                             navigator 组件
View组件                         picker组件                            audio 组件
scroll-view组件                 radio组件                        video组件
swiper组件                       slider组件                            Image组件

微信小程序生命周期函数详解

微信小程序生命周期函数小程序中判断当前首页是从其他页面返回,还是由入口打开由于小程序的数据在我们退出小程序时并没有得到释放,因此再次点击开来数据依然没有变成初始化解决方法:在小程序 data 数据中声明一个变量 isClose 默认为 true 用于判断是否为从入口打开,当点击跳转页面或者关闭小程序的时候,会触发 OnHide 函数在此函数中将判断 isClose is true 的时候即为关闭之后在打开,当跳转页面时首先将 isClose 设置为 false, 这样触发 OnHi
微信小程序（四）应用生命周期详解

App() 函数用来注册一个小程序,注意必须在 app.js 中注册,且不能注册多个. 使用方式也跟Android中的Application中初始化一些全局信息以供使用. 方法: 应用生命周期代码: 相关文章: hello WeApp icon组件 Window text组件 switch组件 tabBar底部导航
微信小程序的生命周期的详解

今天记录一下微信小程序的app生命周期及各页面的生命周期. (一)小程序的生命周期在app.json中进行监听,三个方法 ①onLauch方法只在小程序启动时触发一次. ②onShow方法,在小程序启动时,及由后台切换至前台显示时触发. ③onHide方法,在小程序由前台显示切换至后台时触发. 可以通过 ↓ 这张图片,感受一下各生命周期. 比较有趣的地方是,小程序启动时会触发两次onShow,我不知道是为什么.希望了解的同学解释一下. (二)页面的生命周期 1.在index中我添加了两种方式跳
微信小程序生命周期详解

微信小程序生命周期通俗的讲,生命周期就是指一个对象的生老病死. 从软件的角度来看,生命周期指程序从创建.到开始.暂停.唤起.停止.卸载的过程. 下面从一下三个方面介绍微信小程序的生命周期: 应用生命周期页面生命周期应用生命周期影响页面生命周期 >>>应用生命周期用户首次打开小程序,触发 onLaunch(全局只触发一次). 小程序初始化完成后,触发onShow方法,监听小程序显示. 小程序从前台进入后台,触发 onHide方法. 小程序从后台进入前台显示,触发 onShow方法
微信小程序生命周期和页面的生命周期详细介绍

微信小程序生命周期和页面的生命周期详解: 1.小程序的生命周期--App.js App() 必须在 app.js 中注册,且不能注册多个.所以App()方法在一个小程序中有且仅有一个. App() 函数用来注册一个小程序.接受一个 object 参数,其指定小程序的生命周期函数等.先上代码: App({ onLaunch: function () { console.log('App onLaunch'); }, onShow:function (){ console.log('App onS
微信小程序生命周期详解

微信小程序之----生命周期在app.js的app()中注册程序在页面.js中的Page({})中注册页面. 执行效果:
详解微信小程序入门五: wxml文件引用、模版、生命周期

实例一: include方式引用header.wxml文件文件引用对于代码的重用非常重要,例如在web开发中我们可以将公用的header部分和footer等部分进行提取,然后在需要的地方进行引用. 微信小程序里面,是包含引用功能的--include.import.这两个引用文件的标签,使用基本差不多,这里先说一下include. 微信中的视图文件引用,引用过来的都是没有渲染的,基本类似于直接将引用过来的文件复制到引用位置,所以我们需要重新对其渲染. 实例说明这里将默认创建的用户头像信息提取出
微信小程序page的生命周期和音频播放及监听实例详解

一.界面的生命周期 /** * 监听页面加载, * 页面加载中 */ onLoad:function(){ var _this = this console.log('index---------onload()') /** * 监听音乐播放 */ wx.onBackgroundAudioPlay(function() { console.log('onBackgroundAudioPlay') }), /** * 监听音乐暂停 */ wx.onBackgroundAudioPause(func
微信小程序中的生命周期与生命周期函数浅析介绍

目录一.生命周期概念分类二.生命周期函数概念作用分类三.总结一.生命周期概念生命周期(Life Cycle)是指一个对象从创建-->运行-->销毁的整个阶段小程序的生命周期小程序启动,表示生命周期的开始小程序关闭.表示生命周期的结束中间小程序的整个运行过程就是小程序的生命周期分类应用生命周期特指小程序从启动-->运行-->销毁的过程页面生命周期特指小程序中每个页面的加载-->渲染-->销毁的整个过程自定义组件生命周期组件实例被
微信小程序（五）页面生命周期详细介绍

这里只要熟悉页面的基本生命周期即可,业务在指定生命周期函数内书写. 以下是官网给出的生命周期函数方法和状态图上面的生周期函数图对于做Android 或者IOS的来书理解起来应该不是难事,具体怎么掌握只有慢慢尝试和摸索代码处理: 这里的代码主需要对使用创建项目时index目录下文件处理下就行,至于跳转后的页面用的还是logs不需要更改!下面贴下代码注释也比较详细 index.wxml  <view class="container"
微信小程序实战实例开发流程详细介绍

前言: 微信小程序最近要发布了,抽空学习下如何开发,在网上找到的实例,觉得不错,给大家分享, 前后两天花了大约四五个小时制作完了自己第一个小程序,当然是没法发布的,小程序的发布要求还是挺严格的:企业资质.HTTPS.审核. 先大概介绍下自己,我9年前和很多网友一样开始自学编程,这些年来什么语言都学过.什么平台都接触过,自己也做过十来个产品,所以编程基础不是很稳固但是各方面都相对比较熟悉,因此在接触小程序的时候上手比较快. 至于为什么现在选择开发小程序,原因很简单,尝尝鲜! 学习
微信小程序（六）模块化详细介绍

模块化也就是将一些通用的东西抽出来放到一个文件中,通过module.exports去暴露接口.我们在最初新建项目时就有个util.js文件就是被模块化处理时间的 /** * 处理具体业务逻辑 */ function formatTime(date) { //获取年月日 var year = date.getFullYear() var month = date.getMonth() + 1 var day = date.getDate() //获取时分秒 var hour = date.getH
微信小程序 wxapp内容组件 icon详细介绍

微信小程序内容组件相关文章: 微信小程序 wxapp内容组件 icon 微信小程序 wxapp内容组件 text 微信小程序 wxapp内容组件progress icon 图标. 属性名类型默认值说明 type String icon的类型,有效值:success, success_no_circle, info, warn, waiting, cancel, download, search, clear size Number 23 icon的大小,单位px color Col
微信小程序--组件（swiper）详细介绍

根据微信小程序官网提供的示例进行操作并进行总结: swiper 主要设置的属性 index.WXML 的设置: index.js设置: 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
微信小程序（七）数据绑定详细介绍

数据绑定有一部分前几个看着还行,后面的几个可能有几个不理解,界面展示的数据有的也因为条件没法显示.看不懂的可以先记着,后面真正用到时就会明白,反正我是这样想的.这里先记录下 data.wxml  <view>{{message}}</view>  <view id="item-{{id}}">组件属性</view&g
微信小程序 wxapp内容组件 progress详细介绍

微信小程序内容组件相关文章: 微信小程序 wxapp内容组件 icon 微信小程序 wxapp内容组件 text 微信小程序 wxapp内容组件progress 微信小程序内容组件进度条:progress 进度条属性名类型默认值说明 percent Float 无百分比0~100 showInfo Boolean false 在进度条右侧显示百分比 strokeWidth Number 6 进度条线的宽度,单位px color Color #09BB07 进度条颜色 active
微信小程序 wxapp内容组件 text详细介绍

微信小程序内容组件相关文章: 微信小程序 wxapp内容组件 icon 微信小程序 wxapp内容组件 text 微信小程序 wxapp内容组件progress 微信小程序内容组件:text 文本节点,支持转义符"\". 除了文本节点以外的其他节点都无法长按选中示例: <view class="section section_gap"> <text>{{text}}</text> <view class="b

微信小程序（五）页面生命周期详细介绍

相关推荐

随机推荐