uni-app 生命周期

应用生命周期

  • onLaunch:当整个项目启动,渲染完成时触发(全局只触发一次)
  • onShow:小程序显示出来(从后台进入前台显示,可以触发多次)
  • onHide:小程序隐藏起来时触发(从前台进入后台,可以触发多次)
  • onError: 出现异常时触发

 

 

 

页面生命周期

  • onLoad 监听页面加载,其参数为上个页面传递的数据,参数类型为 Object(用于页面传参)
  • onShow 监听页面显示页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面
  • onReady 监听页面初次渲染完成。注意如果渲染速度快,会在页面进入动画完成前触发
  • onHide 监听页面隐藏,通过tabbar切换页面,也是隐藏而不是卸载
  • onUnload 监听页面卸载
  • onPullDownRefresh 监听用户下拉动作,一般用于下拉刷新。前提开启下拉刷新。下拉刷新开启:pages.json中全局配置,或者页面的style中配置或通过 uni.startPullDownRefresh()方法,下拉刷新关闭:uni.stopPullDownRefresh()
  • onReachBottom:上拉加载,页面滚动到底部的事件,在事件中可以加载下一页数据,在pages.json中的页面style中,通过onReachBottomdistance可以,配置页面上拉触底事件触发距页面底部的距离,认50px

 

组件生命周期

  • beforeCreate(): 在实例初始化之后被调用,此时data中的数据还是undefined
  • created(): 在实例创建完成后被立即调用。此时data中的数据和基本方法都可以访问了
  • beforeMount(): 在挂载开始之前被调用.
  • mounted(): 挂载到实例上去之后调用,注意:此处并不能确定子组件被全部挂载,如果需要子组件完全挂载之后在执行操作可以使用$nextTick
  • beforeUpdate(): 数据更新时调用,发生在虚拟 DOM 打补丁之前
  • updated(): 由于数据更改导致的虚拟 DOM 重新渲染和打补丁
  • beforeDestroy: 实例销毁之前调用
  • destroyed(): Vue 实例销毁后调用

 

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


咱们国内现在手机分为两类,Android手机与苹果手机,现在用的各类APP,为了手机的使用安全,避免下载到病毒软件,官方都极力推荐使用手机自带的应用商城进行下载,但是国内Android手机品类众多,手机商城各式各样,做不到统一,所以Android的APP上架得一个一个平台去申请上架,一直让开发人员头
前言 上一篇做了php的微信登录,所以也总结一下Java的微信授权登录并获取用户信息这个功能的开发流程。 配置 配置什么的就不多说了,详细的配置可以直接前往我上一篇查看。 https://www.cnblogs.com/nothavebug/p/18277732 流程实现(后端)(JAVA)(spr
前言 上一篇文章写到如何上架IOS应用到Appstore,其中漏掉了些许期间遇到的小坑,现在补上 审核不通过原因 5.1.1 Guideline 5.1.1 - Legal - Privacy - Data Collection and Storage 5.1.1(ii) Permission Ap
文件-新建-1.项目 ┌─uniCloud 云空间目录,阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb(详见uniCloud) │─components 符合vue组件规范的uni-app组件目录 │ └─comp-a.vue 可复用的a组件 ├─utssdk 存放uts文
Flexbox #Flex 容器 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。 nvue布局模型基于 CSS Flexbox,以便所有页面元素的排版能够一致可预测,同时页面布局能适应各种设备或者屏幕尺寸。Flexbox 包含
globalStyle 用于设置应用的状态栏、导航条、标题、窗口背景色等。 属性类型默认值描述平台差异说明 navigationBarBackgroundColor HexColor #F7F7F7 导航栏背景颜色(同状态栏背景色) APP与H5为#F7F7F7,小程序平台请参考相应小程序文档 na
自定义导航栏使用注意 当navigationStyle设为custom或titleNView设为false时,原生导航栏不显示,此时要注意几个问题: 非H5端,手机顶部状态栏区域会被页面内容覆盖。这是因为窗体是沉浸式的原因,即全屏可写内容。uni-app提供了状态栏高度的css变量--status-
背景图片 uni-app 支持使用在 css 里设置背景图片,使用方式与普通 web 项目大体相同,但需要注意以下几点: 支持 base64 格式图片。 支持网络路径图片。 小程序不支持在 css 中使用本地文件,包括本地的背景图和字体文件。需以 base64 方式方可
1、云端 发行-原生App-云打包 2、离线 运行-原生App本地打包-生成本地打包资源,如果提示安装依赖包,安装即可 注意:项目的AppID不能为空,请在该项目下的manifest.json中重新获取
pages.json 文件用来对 uni-app 进行全局配置,决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。 它类似微信小程序中app.json的页面管理部分。注意定位权限申请等原属于app.json的内容,在uni-app中是在manifest中配置。 #配置
https://uniapp.dcloud.net.cn/
vuex的介绍 vuex是vue.js应用程序中的状态管理模式,它是集中式存储管理所有组件的数据状态,vuex解决了多个视图之间的数据交互同步,不需要进行组件连接再传递数据。 vuex的5大模块 state:用于数据的存储,是store中的唯一数据源 const state =&
开发者、案例数量更多跨平台能力及扩展灵活性更强性能体验优秀周边生态丰富学习成本低开发成本低
pages uni-app 通过 pages 节点配置应用由哪些页面组成,pages 节点接收一个数组,数组每个项都是一个对象,其属性值如下: 属性类型默认值描述 path String 配置页面路径 style Object 配置页面窗口表现,配置项参考下方 pageStyle
重点: px屏幕像素rpx响应式px屏幕基准:750px公式换算:750*元素在设计稿中的宽度/设计稿基准宽度 例如:设计稿宽度375px,元素在设计稿上的宽度为200px,那么元素在uniapp中的宽度应该设计为750*200/375,即400rpx 尺寸单位 uni-app 支持的通用
运行-运行到浏览器-选择浏览器 运行新项目:真机测试需要打开真机的开发者选项usb安装调试功能
环境搭建:下载Hbuilder X开发者工具 下载Hbuilderhttps://www.dcloud.io/index.htmlhttps://www.dcloud.io/hbuilderx.html 下载windows 正式版,之前有个标准版和App开发版,现在统一了。 下载后解压后直接打开使用
应用生命周期 onLaunch:当整个项目启动,渲染完成时触发(全局只触发一次) onShow:小程序显示出来(从后台进入前台显示,可以触发多次) onHide:小程序隐藏起来时触发(从前台进入后台,可以触发多次) onError: 出现异常时触发 页面生命周期 onLoad 监听页面加载,其参数为
运行-运行到手机或模拟器 注意事项: 1.真机运行时需要开启开发者选项中的USB调试和USB安装,否则app无法通过USB安装到手机或平板中。 2.模拟器功能有,单模拟机没有,需要自己安装,然后开放端口连接设置。
在项目根目录的uni.scss中引入此文件时。先引用一下颜色文件@import "uview-ui/theme.scss";@import "uview-ui/index.scss";