微信小程序(五)页面生命周期详细介绍
2019/6/27 21:45:05
本文主要是介绍微信小程序(五)页面生命周期详细介绍,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
这里只要熟悉页面的基本生命周期即可,业务在指定生命周期函数内书写。
以下是官网给出的生命周期函数方法和状态图
上面的生周期函数图对于做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组件
这篇关于微信小程序(五)页面生命周期详细介绍的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-27Ant Design Vue入门指南:轻松搭建美观界面
- 2024-11-27Vue3项目实战:从零开始的完整指南
- 2024-11-27Vue CLI多环境配置资料详解
- 2024-11-27Vue3+Vite资料:新手入门教程
- 2024-11-27Vue3阿里系UI组件资料入门教程
- 2024-11-27如何集成Ant Design Vue的图标资料
- 2024-11-27如何集成Ant Design Vue图标资料
- 2024-11-27Vue CLI多环境配置资料:新手教程
- 2024-11-27Vue3的阿里系UI组件资料入门指南
- 2024-11-27Vue3公共组件资料详解与实战教程