微信小程序 逻辑层
1. 注册程序
小程序APP
在小程序的根目录下有一个app.js文件。有App(Object),App() 函数用来注册一个小程序。接受一个 Object 参数,其内便是小程序的生命周期。
App() 必须在app.js 中调用,必须调用且只能调用一次。
主要参数
onLaunch: 小程序的初始化函数
onShow: 小程序启动,或从后台进入前台显示时
onHide: 小程序从前台进入后台时
onError: 小程序发生脚本错误,或者 api 调用失败时触发,会带上错误信息
onPageNotFound: 小程序要打开的页面不存在时触发,会带上页面信息回调该函数
前台:当小程序呈现在用户屏幕前
后台:右上角关闭小程序,home键 之后的一段时间(目前五分钟)小程序处于后台状态
销毁:当进入后台一段时间或者系统资源占用过高会被销毁,一些场景进入在未置顶的情况下退出会被销毁。
getApp(Object)
全局的 getApp() 函数可以用来获取到小程序 App 实例。这个不是很懂
2. 场景值
场景指的是从哪些地方进入小程序,有对应的场景ID。App函数的 onlaunch onshow ,或者 wx.getLaunchOptionsSync 获取。
App({
onLaunch: function (options) {
console.log("[onLaunch] 本次场景值:", options.scene)
},
onShow: function (options) {
console.log("[onShow] 本次场景值:", options.scene)
}
})
3. 注册页面
页面 Page
Page(Object) 构造器
Page(Object) 函数用来注册一个页面。接受一个 Object 类型参数,初始化数据、生命周期回调和事件处理函数。
data: 页面的初始化数据
onLoad: 生命周期回调--监听页面加载
onShow: 生命周期回调--监听页面显示
onReady: 生命周期回调--监听页面初次渲染完成
onHide: 生命周期回调--监听页面隐藏
onUnload: 生命周期回调--监听页面卸载
onPullDownRefresh: 监听用户下拉动作
onReachBottom: 页面上拉触底事件的处理函数
onShareAppMessage: 用户点击右上角转发
onResize: 页面尺寸改变时触发,一般是屏幕旋转
onTabItemTap: 当前是tab页时,点击tab 时触发
还可以添加自定义字段,同app.js中App() 一样
初始数据
data 是页面第一次渲染使用的初始数据
因为页面加载时,data将会以JSON 字符串的形式由逻辑层传到渲染层,因此data 中的数据必须时可以转成 JSON 的类型:字符串、数字、布尔值、对象、数组
同大多数 mvvm 框架语言一样,也可以实现逻辑层到渲染层的双向绑定。
生命周期回调函数
有 onLoad(Object)、onShow()、onReady()、onHide()、onUnload()
页面事件处理函数
onPullDownRefresh()、onReachBottom()、onPageScroll(Object)
组件事件处理函数
就是渲染层的执行事件,点击之类的
route
当前页面的路径,类型为 String
Page({
onShow() {
console.log(this.route)
}
})
setData
Page.prototype.setData(Object data, Function callback)
setData 函数用于将数据从逻辑层发送到视图层(异步),同时改变对应的 this.data 的值(同步)
页面生命周期
有一句在vue里面看到的话
以
下内容你不需要立马完全弄明白,不过以后它会有帮助
4. 路由
在小程序中所有页面的路由全部由框架进行管理。
页面栈
框架以栈的形式维护了当前的所有页面。当发生路由切换的时候,页面栈表现各不相同
初始化:新页面入栈
打开新页面:新页面入栈
页面重定向:当前页面出栈,新页面入栈
页面返回:页面不断出栈,知道目标返回页
Tab切换:页面全部出栈,只留下新的Tab页面
重加载:页面全部出栈,只留下新的页面
getCurrentPages()
此函数可以获取当前页面栈的实例,以数组的形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面。
路由方式
路由的触发和小程序生命周期处处相关哦
5. 模块化
文件作用域
每个js文件申明的变量,对当前文件有效
App 函数中可以这只全局变量
将公共代码块抽离出来,用export方式引用。
6. API
各种API
微信小程序 逻辑层的更多相关文章
- 微信小程序遮罩层覆盖input失效
问题:微信小程序中,我们常使用遮罩层,如点击按钮弹出下拉框.弹框等等.若在遮罩层下存在input.textarea.canvas.camera.map.video等标签时,会出现遮罩层覆盖失效的问题. ...
- 微信小程序视图层介绍及用法
一. 视图层 WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构. 1.1. 数据绑定 1.1.1. 普通写法 <vi ...
- 微信小程序 - 视图层 | 基础语法
视图层 WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构. 类似前端HTML 一.数据绑定 普通语法 test.wxml ...
- 微信小程序开发--页面结构
一.微信小程序开发--页面文件组成 [page.name].js 页面逻辑文件,用于创建页面对象,以及处理页面生命周期控制和数据处理 [page.name].wxml wxml指的是Wei Xin M ...
- 【微信小程序】开发实战 之 「配置项」与「逻辑层」
微信小程序作为微信生态重要的一环,在实际生活.工作.商业中的应用越来越广泛.想学习微信小程序开发的朋友也越来越多,本文将在小程序框架的基础上就微信小程序项目开发所必需的基础知识及语法特点进行了详细总结 ...
- 微信小程序原生开发简介
简介: 总结: 1. 逻辑层使用js引擎,视图层使用webview渲染 2. 微信小程序已经支持了绝大部分的 ES6 API 3. 可以自动补全css的兼容语法 文档:https://develope ...
- 微信小程序开发(1) 天气预报
本文介绍如何使用微信小程序开发天气预报功能. 一.项目文件列表 二.小程序配置 使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. ...
- 微信小程序 可用性一览
1. 调试vConsole微信小程序通过vConsole的形式观察控制台打印.打印到vConsole控制台的是由 JSON 转化的字符串.这还是可以起到调试作用的. Source Map当es6 转 ...
- 微信小程序开发--模板(template)使用,数据加载,点击交互
微信小程序视图层提供了 模板(template),可以在模板中定义代码片段,然后在不同的地方调用.结果在数据渲染那懵逼了.按照官网上对模板的说明和对数据的加载. 1.定义模板 使用name属性,作为模 ...
随机推荐
- Web前端性能优化经验分享
最近一直有给新同学做前端方面的培训,也有去参与公司前端的招聘,所以把自己资料库里面很多高效且有用的知识做了些 规整分类,然后再分享一篇关于前端优化方面的总结.而且春节一过就又是招聘的高峰期了,在校的. ...
- 如何生成Android的keystore文件
步骤 1 找到本机电脑上jdk安装的目录,使用cmd命令打开命令窗口,输入cd jdk目录(替换成你的jdk的bin目录),进入到jdk的bin目录,接下来你才可以使用jdk的命令进行操作 步骤 ...
- CCRect 构造函数的几个参数解释
转自: http://blog.163.com/hzklclick_wy/blog/static/21550517520137139511839/ void CCRect::setRect(f ...
- hdoj5115【区间DP·基础】
题意: 有n头wolf排成一排,杀一头wolf回受到受到的伤害=它的本身a[i]+相邻两个b[i-1]+b[i+1].然后杀死第k个位置的wolf的话,k-1和k+1默认相邻(满足的话). 思路: 用 ...
- Educational Codeforces Round 12 A. Buses Between Cities
题意: 从A到B的汽车每隔 a 分钟发车一次,从A到B要ta分钟. 从B到A汽车每隔b分钟发车一次,从B到A要ta分钟. Simion从A出发,问他在A->B的途中共遇到了多少辆车. 汽车都是从 ...
- python __builtins__ list类 (42)
42.'list', 转换为列表类型 class list(object) | list() -> new empty list | list(iterable) -> new list ...
- Luogu P2114[NOI2014]起床困难综合症 【贪心/位运算】By cellur925
题目传送门 所以NOI的题现在简单惹? 30分做法:枚举开始的权值,n²过掉. 100分做法:竟然是贪心qwq.因为我们的计算背景是二进制下,所以我们贪心地想让每一位都是1.我们现在需要解决的问题,就 ...
- mycat启动报错UnknownHostException(Temporary failure in name resolution)解决方法
重启命令 ./mycat restart 查看日志 cd logs tail -f wrapper.log 报错信息 INFO | jvm 2 | 2018/05/09 11:28:28 | Erro ...
- Linux中查看端口占用情况及结束相应进程
1.查看某端口占用情况lsof -i :端口号 例如:lsof -i :81 显示如下信息: COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAME ja ...
- IIS7的FTP出错: 451 No mapping for the unicode character exists in the target multi-byte code page
提示:IIS7的FTP出错: 451 No mapping for the unicode character exists in the target multi-byte code page 今天 ...