一、App声明周期

1.App()

app.js中的App() 函数用来注册一个小程序。接受一个 object 参数,其指定小程序的生命周期函数等。

示例代码:

App({
  onLaunch: function(options) {
    // Do something initial when launch.
  },
  onShow: function(options) {
      // Do something when show.
  },
  onHide: function() {
      // Do something when hide.
  },
  onError: function(msg) {
    console.log(msg)
  },
  globalData: 'I am global data'
})

参数说明:

前台、后台定义: 当用户点击左上角关闭,或者按了设备 Home 键离开微信,小程序并没有直接销毁,而是进入了后台;当再次进入微信或再次打开小程序,又会从后台进入前台。需要注意的是:只有当小程序进入后台一定时间,或者系统资源占用过高,才会被真正的销毁。

onLaunch, onShow 参数

字段 类型 说明
path String 打开小程序的路径
query Object 打开小程序的query
scene Number 打开小程序的场景值,场景值 详见
shareTicket String shareTicket,详见 获取更多转发信息
referrerInfo Object 当场景为由另一个小程序打开时,返回此字段
referrerInfo.appId String 来源小程序的 appId
referrerInfo.extraData Object 来源小程序传过来的数据

2.getApp()

  全局的 getApp() 函数,可以获取到小程序实例。

// other.js
var appInstance = getApp()
console.log(appInstance.globalData) // I am global data

  注意:

  App() 必须在 app.js 中注册,且不能注册多个。

  不要在定义于 App() 内的函数中调用 getApp() ,使用 this 就可以拿到 app 实例。

  不要在 onLaunch 的时候调用 getCurrentPages(),此时 page 还没有生成。

  通过 getApp() 获取实例之后,不要私自调用生命周期函数。

二、页面声明周期

1.Page()

  每一个页面的.js文件中都会有一个Page()函数,接受一个 object 参数,其指定页面的初始数据、生命周期函数、事件处理函数等。

示例代码:

//index.js
Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // Do some initialize when page load.
  },
  onReady: function() {
    // Do something when page ready.
  },
  onShow: function() {
    // Do something when page show.
  },
  onHide: function() {
    // Do something when page hide.
  },
  onUnload: function() {
    // Do something when page close.
  },
  onPullDownRefresh: function() {
    // Do something when pull down.
  },
  onReachBottom: function() {
    // Do something when page reach bottom.
  },
  onShareAppMessage: function () {
   // return custom share data when user share.
  },
  onPageScroll: function() {
    // Do something when page scroll
  },
  // Event handler.
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    })
  },
  customData: {
    hi: 'MINA'
  }
})

object 参数说明:

声明周期函数:

onLoad: 页面加载

一个页面只会调用一次。

接收页面参数可以获取wx.navigateTo和wx.redirectTo及<navigator/>中的 query。

onShow: 页面显示

每次打开页面都会调用一次。

onReady: 页面初次渲染完成

一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。

对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。详见生命周期

onHide: 页面隐藏

当navigateTo或底部tab切换时调用。

onUnload: 页面卸载

当redirectTo或navigateBack的时候调用。

页面相关事件处理函数

onPullDownRefresh: 下拉刷新

监听用户下拉刷新事件。

需要在config的window选项中开启enablePullDownRefresh。

当处理完数据刷新后,wx.stopPullDownRefresh可以停止当前页面的下拉刷新。

onReachBottom:上拉触底

监听用户上拉触底事件

onPageScroll: 页面滚动

监听用户滑动页面事件。

参数为 Object,包含scrollTop字段(Number类型):页面在垂直方向已滚动的距离(单位px)

onShareAppMessage: 用户分享

只有定义了此事件处理函数,右上角菜单才会显示“分享”按钮

用户点击分享按钮的时候会调用

此事件需要 return 一个 Object,用于自定义分享内容

自定义分享字段

字段说明默认值

title分享标题当前小程序名称

desc分享描述当前小程序名称

path分享路径当前页面 path ,必须是以 / 开头的完整路径

三、数据绑定

在Page()函数中的data为页面初始数据,我们可以在其中设置一些初始值,显示在我们的页面上,相当于常量,不可变。但是如果这些值需要动态改变的时候,我们就需要用到setData()函数来绑定数据

setData()

setData() 函数接受一个对象,以 key,value 的形式表示将 this.data 中的 key 对应的值改变成 value。

其中 key 可以非常灵活,以数据路径的形式给出,如 array[2].message,a.b.c.d,并且不需要在 this.data 中预先定义。

<view>
{{name}}
</view>
<view>
{{array[0]}}<br/>
{{array[1]}}
</view>

Page({
  data:{},
  onLoad:function(){
    this.setData({"name":"hi..."});
    this.setData({"array":[0, 1 ,2]});
  }
})

生命周期

下图说明了 Page 实例的生命周期。

微信小程序自学第二课:app及页面的生命周期、使用setData绑定数据的更多相关文章

  1. 微信小程序自学第一课:工程目录结构与.json文件配置

    注册成为开发者 地址: https://mp.weixin.qq.com/cgi-bin/wx 开发者工具下载地址 https://mp.weixin.qq.com/debug/wxadoc/dev/ ...

  2. 使用wepy开发微信小程序商城第二篇:路由配置和页面结构

    使用wepy开发微信小程序商城 第二篇:路由配置和页面结构 前言: 最近公司在做一个微信小程序的项目,用的是类似于vue的wepy框架.我也借此机会学习和实践一下. 小程序官方文档:https://d ...

  3. 微信小程序:全局配置app.json

    微信小程序:全局配置app.json 一.全局配置app.json app.json文件用来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. 以下是一个包 ...

  4. 微信小程序开发:学习笔记[8]——页面跳转及传参

    微信小程序开发:学习笔记[8]——页面跳转及传参 页面跳转 一个小程序拥有多个页面,我们可以通过wx.navigateTo推入一个新的页面.在首页使用2次wx.navigateTo后,页面层级会有三层 ...

  5. 小程序基础知识点讲解-WXML + WXSS + JS,生命周期

    小程序基础 小程序官方地址,小程序开发者工具,点击此处下载.在微信小程序中有一个配置文件project.config.json,此文件可以让开发者在不同设备中进行开发. 微信小程序共支持5种文件,wx ...

  6. 微信小程序开发---逻辑层(App Service)

    再说逻辑层之前,先说说微信小程序框架(MINA) 小程序开发框架的目标是通过尽可能简单.高效的方式让开发者可以在微信中开发具有原生APP体验的服务. 框架提供了自己的视图层描述语言WXML和WXSS, ...

  7. 微信小程序--getLocation需要在app.json中声明permission字段

    在微信小程序开发中,需要获取用户所在地理位置,结果提示‘getLocation需要在app.json中声明permission字段’ 这是因为开发者需要填写获取用户地理位置的用途说明. 具体解决方法: ...

  8. 微信小程序第3课 目录结构及小知识点

    目录 目录结构 安装包下载地址 一.pages目录介绍 二.index目录介绍 index.js(相当JavaScript文件,必不可少的) index.json(可以不需要) index.wxml( ...

  9. 微信小程序自学过程中遇到的问题 转

    view标签下hover必须为true时,设置hover-class才有效,hover-start-time和hover-stay-time的形式如下:   < view class=" ...

随机推荐

  1. 织梦dedecms 无法下载远程图片 fsockopen函数被禁用的解决方法

    在linux服务器上fsockopen()函数被无情的禁用了(这其实是出于安全考虑,可以理解),下载远程图片的功能就没有办法使用了.找了一些资料之后,找到了解决方法,就是用stream_socket_ ...

  2. 矩阵内积和Schur补

    > Many problems in the field of signal processing have been expended into matrix problems.So it's ...

  3. CSS缎带效果

    1. [代码]ribbon.html     <!DOCTYPE HTML><html><head><style type="text/css&qu ...

  4. java:解决eclipse配置Tomcat时找不到server选项

    http://blog.csdn.net/wugangsunny/article/details/25246565 集成Eclipse和Tomcat时找不到server选项: 按照网上的步骤如下: 在 ...

  5. 双系统重装win7和ubuntu修复win7引导方法介绍(来源百度经验)

    很多朋友喜欢为电脑安装win7和ubuntu双系统,当我们重装双系统时,可能会出现win7引导不见的情况,接下来就告诉大家双系统重装win7和ubuntu修复win7引导的方法. 1.win7和ubu ...

  6. JS中的forEach、$.each、map方法推荐

    下面小编就为大家带来一篇JS中的forEach.$.each.map方法推荐.小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 orEach是ECMA5中Array新方法中最 ...

  7. Flex学习之(JS中调用Flex的方法)

    flex端 public function initApp():void   {    ExternalInterface.addCallback("function1",call ...

  8. 大数据排序算法:外部排序,bitmap算法;大数据去重算法:hash算法,bitmap算法

    外部排序算法相关:主要用到归并排序,堆排序,桶排序,重点是先分成不同的块,然后从每个块中找到最小值写入磁盘,分析过程可以看看http://blog.csdn.net/jeason29/article/ ...

  9. docker异常处理

    Error running DeleteDevice dm_task_run failed重启docker即可 Error starting daemon: error initializing gr ...

  10. webpy+nginx+uwsgi安装配置

    转:(1)安装Nginx1.1 下载nginx-1.0.5.tar.gz并解压1.2 ./configure (也可以增加--prefix= path指定安装路径)此时有可能会提示缺少pcre支持,如 ...