小程序教程

微信小程序把玩（五）页面生命周期

字号+ 作者： 来源： 2016-11-23 09:49 我要评论( )

本帖最后由 斜月吟风 于 2016-10-28 17:09 编辑

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

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

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

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

index.wxml

  1. <!--index.wxml-->
  2. <view class="container">
  3. <!--绑定点击事件-->
  4.   <view  bindtap="bindViewTap" class="userinfo">
  5.   </view>
  6.   <view class="usermotto">
  7.   <!--数据绑定-->
  8.     <text class="user-motto">{{motto}}</text>
  9.   </view>
  10. </view>
复制代码

index.wxss

  1. /**index.wxss**/

  3. .container {
  4.   width: 800;
  5.   height: 800;
  6. }
  7. .userinfo {
  8.   width: 120rpx;
  9.   height: 120rpx;
  10.   background: red;
  11. }
复制代码

index.js

  1. //index.js
  2. //获取应用实例
  3. var app = getApp()
  4. Page({
  5.   /**
  6.    * 通过data初始化数据
  7.    */
  8.   data: {
  9.     motto: '点击上面View跳转',
  10.     // userInfo: {}
  11.   },
  12.   //事件处理函数
  13.   bindViewTap: function() {
  14.     //通过调用API进行跳转
  15.     wx.navigateTo({
  16.       url: '../logs/logs'
  17.     })
  18.   },
  19.   /**
  20.    * 监听页面开在加载的状态
  21.    *    页面加载完成之后就不会在执行
  22.    */
  23.   onLoad: function () {
  24.     console.log('index---------onLoad()')
  25.     // //this指的就是本页面对象
  26.     // var that = this
  27.     // //调用应用实例的方法获取全局数据
  28.     // app.getUserInfo(function(userInfo){
  29.     //   //更新数据
  30.     //   that.setData({
  31.     //     userInfo:userInfo
  32.     //   })
  33.     //   //更新本页面
  34.     //   that.update()
  35.     // })
  36.   },
  37.   /**
  38.    *  监听页面显示，
  39.    *    当从当前页面调转到另一个页面
  40.    *    另一个页面销毁时会再次执行
  41.    */
  42.   onShow: function() {
  43.     console.log('index---------onShow()')
  44.   },
  45.   /**
  46.    * 监听页面渲染完成
  47.    *    完成之后不会在执行
  48.    */
  49.   onReady: function() {
  50.     console.log('index---------onReaday()');
  51.   },
  52.   /**
  53.    * 监听页面隐藏
  54.    *    当前页面调到另一个页面时会执行
  55.    */
  56.   onHide: function() {
  57.     console.log('index---------onHide()')
  58.   },
  59.   /**
  60.    * 当页面销毁时调用
  61.    */
  62.   onUnload: function() {
  63.     console.log('index---------onUnload')
  64.   }

  66. })
复制代码


　

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 微信小程序 轮播图 swiper图片组件

    微信小程序 轮播图 swiper图片组件

    2016-11-23 09:49

  • 微信小程序 开发 微信开发者工具 快捷键

    微信小程序 开发 微信开发者工具 快捷键

    2016-11-23 09:49

  • 微信小程序 页面跳转 传递参数

    微信小程序 页面跳转 传递参数

    2016-11-23 09:49

  • 微信小程序 如何获取时间

    微信小程序 如何获取时间

    2016-11-23 09:49

网友点评
精彩导读
2-HelloWorld微信小程序

2-HelloWorld微信小程序

微信小程序 轮播图 swiper图片组件

微信小程序 轮播图 swiper图片组件

微信小程序开发记账应用实战服务端之用户注册与登录

微信小程序开发记账应用实战服务端之用户注册

微信小程序倒计时组件

微信小程序倒计时组件

微信小程序实现购物车页面

微信小程序实现购物车页面

热门资讯
Copyright © 2006-2018 www.h5cn.com.H5之家 版权所有 Power by h5cn 备案： 黔ICP备15004751-2
HTML5入门 HTML5技术 canvas教程 专题学习