微信小程序学习笔记(4)--------框架之逻辑层
逻辑层
逻辑层(App Service):小程序框架的逻辑层是由JavaScript编写的,逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈。
App进行程序注册,Page进行页面注册
getApp获取App实例,getCurrentPages获取当前页面栈
一、程序注册
1、App
App()函数用来注册小程序。接受一个Object参数,其指定小程序的生命周期函数。
注意:App()必须在app.js中注册,而且不能注册多个
Object参数说明
属性 |
类型 |
描述 |
触发时机 |
onLaunch |
Function |
生命周期函数--初始化 |
初始化完成是,只会触发一次 |
onShow |
Function |
生命明明周期函数--小程序显示 |
启动时,或从后台进入前台显示 |
onHide |
Function |
生命周期函数--小程序隐藏 |
从前台进入后台 |
其他 |
Any |
开发者可以添加任意的函数或数据到Object参数中,用this可以访问 |
2、getApp()
getApp()是全局函数,可以获取小程序实例。
注意:不要在定义App()内的函数中调用getApp(),使用this就可以拿到app实例。通过getApp()获取实例后,不要私自调用生命周期函数。
3、getCurrentPages()
不要在onLaunch的时候调用getCurrentPages(),app还没有生成。
二、页面注册
Page
Page()函数用来注册一个页面,接受一个Object参数,其指定页面的初始数据、生命周期函数、事件处理函数等。
属性 |
类型 |
描述 |
data |
Object |
页面的初始数据 |
onLoad |
Function |
生命周期函数--监听页面加载 |
onReady |
Function |
生命周期函数--监听页面初次渲染完成 |
onShow |
Function |
生命周期函数--监听页面显示 |
onHide |
Function |
生命周期函数--监听页面隐藏 |
onUnload |
Function |
生命周期函数--监听页面卸载 |
onPullDownRefresh |
Function |
页面相关事件处理函数--监听用户下拉动作 |
onReachBottom |
Function |
页面上拉触底事件的处理函数 |
其他 |
Any |
开发者可以添加任意的函数或数据到 object 参数中,在页面的函数中用 this 可以访问 |
1、初始化数据
初始化数据将作为页面的第一次渲染。data将会以JSON的形式由逻辑层传至渲染层,所以其数据必须是可以转换成JSON的格式:字符串,数字,布尔值,对象,数组。
渲染层可以通过wxml对数据进行绑定。
2、生命周期函数
(1)、onLoad:页面加载
一个页面只会调用一次
接收页面参数可以获取wx.navigateTo和wx.redirectTo及<navigator/>中的 query。
(2)、onShow:页面显示
每次打开页面都会调用 一次
(3)、onReady:页面初次渲染完成。
一个页面只会调用一次,代表页面已经准备妥当,可以和试图层进行交互
(4)、onHide:页面隐藏
当navigateTo或底部tab切换时调用。
(5)、onUnload:页面卸载
当redirectTo或navigateBack的时候调用。
3、页面相关事件处理函数
OnPullDownRefresh:下拉刷新需要在config的windows选项中开启enablePullDownRefresh。当处理完数据刷新后,wx.stopPullDownRefresh可以停止当前页面的下拉刷新。
4、事件处理函数
除了初始化数据和生命周期函数,Page 中还可以定义一些特殊的函数:事件处理函数。在渲染层可以在组件中加入事件绑定,当达到触发事件时,就会执行 Page 中定义的事件处理函数。
Page.prototype.setData()
setData 函数用于将数据从逻辑层发送到视图层,同时改变对应的 this.data 的值。
注意:
1. 直接修改 this.data 无效,无法改变页面的状态,还会造成数据不一致。
2. 单次设置的数据不能超过1024kB,请尽量避免一次设置过多的数据。
setData() 参数格式
接受一个对象,以 key,value 的形式表示将 this.data 中的 key 对应的值改变成 value。
其中 key 可以非常灵活,以数据路径的形式给出。
getCurrentPages()
getCurrentPages() 函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面。
注意:不要尝试修改页面栈,会导致路由以及页面状态错误。
三、模块化
文件作用域
在 JavaScript 文件中声明的变量和函数只在该文件中有效;不同的文件中可以声明相同名字的变量和函数,不会互相影响。
通过全局函数 getApp()可以获取全局的应用实例,如果需要全局的数据可以在 App() 中设置。
模块化
我们可以将一些公共的代码抽离成为一个单独的 js 文件,作为一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口。
需要注意的是:
exports 是 module.exports 的一个引用,因此在模块里边随意更改 exports 的指向会造成未知的错误。所以我们更推荐开发者采用module.exports 来暴露模块接口。
四、API
微信小程序学习笔记(4)--------框架之逻辑层的更多相关文章
- 【微信小程序学习笔记】入门与了解
[微信小程序学习笔记(一)] IDE 下载安装 下载地址 官方工具:https://mp.weixin.qq.com/debug/w … tml?t=1476434678461 下载可执行文件后,可按 ...
- 微信小程序学习笔记二 数据绑定 + 事件绑定
微信小程序学习笔记二 1. 小程序特点概述 没有DOM 组件化开发: 具备特定功能效果的代码集合 体积小, 单个压缩包体积不能大于2M, 否则无法上线 小程序的四个重要的文件 *js *.wxml - ...
- 微信小程序学习笔记一 小程序介绍 & 前置知识
微信小程序学习笔记一 1. 什么是小程序? 2017年度百度百科十大热词之一 微信小程序, 简称小程序, 英文名 Mini Program, 是一种不需要下载安装即可使用的应用 ( 张小龙对其的定义是 ...
- 微信小程序学习笔记(三)--框架-逻辑层
逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈. 开发者写的所有代码最终将会打包成一份 JavaScript 文件,并在小程序启动的时候运行,直到小程序销毁.这一行为类似 Service ...
- 微信小程序学习笔记(二)--框架-全局及页面配置
描述和功能 框架提供了自己的视图层描述语言 WXML 和 WXSS,以及基于 JavaScript 的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统,让开发者能够专注于数据与逻辑. 响应的数 ...
- 微信小程序学习笔记(3)--------框架之配置
我们使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. app.json 配置项列表 属性 类型 必填 描述 pages Stri ...
- 微信小程序学习笔记1--小程序的代码构成
最近打算学习一下微信小程序,看了微信公众平台的文档感觉还比较简单,就从这个方向重新找回学习的状态吧: 1.先了解一下小程序的代码构成: 创建项目后会看到四种后缀的文件: .json 后缀的 JSON ...
- 微信小程序学习笔记(阶段一)
一阶段学习过程: (一)看官方文档的简易教程:https://mp.weixin.qq.com/debug/wxadoc/dev/ (二)看小码哥视频:https://chuanke.baidu.co ...
- 微信小程序学习笔记以及VUE比较
之前只是注册了一下微信小程序AppID,随便玩了玩HelloWorld!(项目起手式),但是最近看微信小程序/小游戏,崛起之势不可阻挡.小程序我来了!(果然,一入前端深似海啊啊啊啊啊~) 编辑器: S ...
随机推荐
- Spring MVC第一课:用IDEA构建一个基于Spring MVC, Hibernate, My SQL的Maven项目
作为一个Spring MVC新手最基本的功夫就是学会如何使用开发工具创建一个完整的Spring MVC项目,本文站在一个新手的角度讲述如何一步一步创建一个基于Spring MVC, Hibernate ...
- [Idea Fragments]2013.08.08
# 1 今晚看到好几篇文章把golang,Node.js还有Nginx-lua拿来说事,Node.js现在自然比较熟悉,golang则有过一些了解,而Nginx-lua则少有听到. 有好事者对Node ...
- LigerTree的使用
效果图: 页面: <div id="divs" style="width: 310px; overflow-x: hidden; overflow-y: hidde ...
- Flash AS 2.0右键菜单问题
这几天都在忙这个右键菜单,因为之前的右键菜单都不能用了,必须做新的. 可是又必须使用原来2.0的接口和方法,真是忙的焦头烂额. 之前2.0的东西太多又太杂. 我头一个右键菜单和二级菜单没有问题了,做第 ...
- 一起talk C栗子吧(第一百二十七回:C语言实例--查看main函数的參数)
各位看官们,大家好,上一回中咱们说的是static关键字的样例,这一回咱们说的样例是:查看main函数的參数.闲话休提,言归正转.让我们一起talk C栗子吧! 看官们.我们在第五十七回中介绍过mai ...
- Python程序的性能分析指南(转)
原文地址 :http://blog.jobbole.com/47619/ 虽然不是所有的Python程序都需要严格的性能分析,不过知道如何利用Python生态圈里的工具来分析性能,也是不错的. 分析一 ...
- git 拉取远程分支到本地并建立关联关系
git拉取远程分支到本地 一.查看远程分支 使用如下git命令查看所有远程分支: git branch -r 二.拉取远程分支并创建本地分支 方法一 使用如下命令: git checkout ...
- 修改yum源为阿里云的
将Centos的yum源更换为国内的阿里云源 author:headsen chen date:2018-04-28 13:33:41 1.备份 mv /etc/yum.repos.d/CentO ...
- 【BZOJ4543】[POI2014]Hotel加强版 长链剖分+DP
[BZOJ4543][POI2014]Hotel加强版 Description 同OJ3522数据范围:n<=100000 Sample Input 7 1 2 5 7 2 5 2 3 5 6 ...
- Java日期类:Date和Calendar的使用
总是使用这两个类,总是需要百度.还不如一次全部整理完. 一.介绍: Date 类 Date 表示特定的瞬间,精确到毫秒. 在 JDK 1.1 之前,类 Date 有两个其他的函数.它允许把日期解释为年 ...