uni-app App.vue生命周期全局样式全局存储globalData

锋哥原创的uni-app视频教程:

2023版uniapp从入门到上天视频教程(Java后端无废话版),火爆更新中..._哔哩哔哩_bilibili2023版uniapp从入门到上天视频教程(Java后端无废话版),火爆更新中...共计23条视频,包括:第1讲 uni-app简介、第2讲 uni-app环境搭建、第3讲 uni-app之HelloWorld实现等,UP主更多精彩视频,请关注UP账号。icon-default.png?t=N7T8https://www.bilibili.com/video/BV1eG411N71c/App.vue是uni-app的主组件,所有页面都是在App.vue下进行切换的,是页面入口文件。但App.vue本身不是页面,这里不能编写视图元素,也就是没有<template>

这个文件的作用包括:调用应用生命周期函数、配置全局样式、配置全局的存储globalData

应用生命周期仅可在App.vue中监听,在页面监听无效。

应用生命周期

uni-app 支持如下应用生命周期函数:

函数名说明
onLaunchuni-app 初始化完成时触发(全局只触发一次)
onShowuni-app 启动,或从后台进入前台显示
onHideuni-app 从前台进入后台
onErroruni-app 报错时触发
onUniNViewMessagenvue 页面发送的数据进行监听,可参考 nvue 向 vue 通讯
onUnhandledRejection对未处理的 Promise 拒绝事件监听函数(2.8.1+)
onPageNotFound页面不存在监听函数
onThemeChange监听系统主题变化

示例代码

<script>// 只能在App.vue里监听应用的生命周期export default {onLaunch: function() {console.log('App Launch')},onShow: function() {console.log('App Show')},onHide: function() {console.log('App Hide')}}
</script>

注意

  • 应用生命周期仅可在App.vue中监听,在其它页面监听无效

  • 应用启动参数,可以在API uni.getLaunchOptionsSync获取,详见

  • onlaunch里进行页面跳转,如遇白屏报错,请参考onlaunch生命周期内navigateto跳转页面注意 - DCloud问答

  • App.vue 不能写模板

  • onPageNotFound 页面实际上已经打开了(比如通过分享卡片、小程序码)且发现页面不存在,才会触发,api 跳转不存在的页面不会触发(如 uni.navigateTo)

globalData

小程序有globalData,这是一种简单的全局变量机制。这套机制在uni-app里也可以使用,并且全端通用。

以下是 App.vue 中定义globalData的相关配置:

<script>  export default {  globalData: {  text: 'text'  }}  
</script>  

js中操作globalData的方式如下: getApp().globalData.text = 'test'

在应用onLaunch时,getApp对象还未获取,暂时可以使用this.globalData获取globalData。

如果需要把globalData的数据绑定到页面上,可在页面的onShow页面生命周期里进行变量重赋值。

nvue的weex编译模式中使用globalData的话,由于weex生命周期不支持onShow,但熟悉5+的话,可利用监听webview的addEventListener show事件实现onShow效果,或者直接使用weex生命周期中的beforeCreate。但建议开发者使用uni-app编译模式,而不是weex编译模式。

globalData是简单的全局变量,如果使用状态管理,请使用vuex(main.js中定义)

全局样式

App.vue中,可以定义一些全局通用样式,例如需要加一个通用的背景色,首屏页面渲染的动画等都可以写在App.vue中。

注意如果工程下同时有vue和nvue文件,全局样式的所有css会应用于所有文件,而nvue支持的css有限,编译器会在控制台报警,提示某些css无法在nvue中支持。此时需要把nvue不支持的css写在单独的条件编译里。如:

<style>/* #ifndef APP-PLUS-NVUE */@import './common/uni.css';/* #endif*/
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/587740.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Docker之网络配置

目录 1.网络概念 网络相关的有ip,子网掩码,网关,DNS,端口号 1.1 ip是什么? ip是唯一定位一台网上计算机 Ip地址的分类: IPV4: 4字节32位整数&#xff0c;并分成4段8位的二进制数&#xff0c;每8位之间用圆点隔开&#xff0c;每8位整数可以转换为一个0~255的十进制整数 【例…

windows server 2022 启用SYN攻击保护

2023.12.28 SYN攻击是什么&#xff1a; SYN攻击是黑客攻击的常用手段&#xff0c;也是最容易被利用的一种攻击手法&#xff0c;属于DDoS攻击的一种。它利用TCP协议缺陷&#xff0c;通过发送大量的半连接请求&#xff0c;耗费CPU和内存资源。 SYN攻击包括大量TCP连接的第一个包&…

Leetcode 第 378 场双周赛 Problem D 回文串重新排列查询(Java + 区间相交关系 + 前缀和)

文章目录 题目思路Java 区间相交关系 前缀和:第 1 步&#xff1a;第 2 步&#xff1a;第 3 步&#xff1a;第 4 步&#xff1a; 复杂度Code 题目 100129. 回文串重新排列查询给你一个长度为 偶数 n &#xff0c;下标从 0 开始的字符串 s 。同时给你一个下标从 0 开始的二维整…

算法题Python常用内置函数、方法、技巧汇总(其五:堆/优先队列)

文章目录 优先队列相关操作堆化入堆出堆获取堆顶元素小根堆与大根堆 华为OD算法/大厂面试高频题算法练习冲刺训练 优先队列相关操作 注意&#xff0c;优先队列&#xff08;priority queue&#xff09;也叫做堆&#xff08;heap&#xff09;。谈到优先队列时&#xff0c;一般强调…

Nginx屏蔽垃圾邮件骚扰IP的方法

原文地址&#xff1a;Nginx屏蔽垃圾邮件骚扰IP的方法 本文介绍了如何下载并引入deny-ips.conf配置文件&#xff0c;以及如何定制403页面&#xff0c;避免误杀合法访问者。 最近&#xff0c;很多人都遭受到垃圾邮件的骚扰&#xff0c;让我们无法正常地观看和回复重要信息。在这种…

Python面向对象-三大特性

一 三大特性-封装 面向对象思想有三大特性&#xff1a;封装、继承、多态。 封装&#xff1a;将属性和方法放到一起做为一个整体&#xff0c;然后通过实例化对象来处理&#xff0c;这样隐藏内部实现细节&#xff0c;只需要和对象及其属性和方法交互就可以了。 为了更好的封装…

HTML5+CSS3②——图像、超链接、音频、视频

目录 图像 超链接 音频 视频 图像 作用&#xff1a;在网页中插入图片 单标签&#xff1a; 标签名&#xff1a;<img src"图片的URL"> <img src"图片的URL" alt"替换文本" title"提示文本"> 属性写在尖括号里面&#xff0c;…

【Redis-02】Redis数据结构与对象原理 -上篇

Redis本质上是一个数据结构服务器&#xff0c;使用C语言编写&#xff0c;是基于内存的一种数据结构存储系统&#xff0c;它可以用作数据库、缓存或者消息中间件。 我们经常使用的redis的数据结构有5种&#xff0c;分别是&#xff1a;string(字符串)、list(列表)、hash(哈希)、s…

多环境及SpringBoot项目部署

1、多环境 2、项目部署上线 原始前端 / 后端项目宝塔Linux容器容器平台 3、前后端联调 4、项目扩展和规划 多环境 程序员鱼皮-参考文章 本地开发&#xff1a;localhost&#xff08;127.0.0.1&#xff09; 多环境&#xff1a;指同一套项目代码在把不同的阶段需要根据实际…

将数据“0x0f“写入AT24C02再读出送P1口显示

#include <reg51.h> // 包含51单片机寄存器定义的头文件 #include <intrins.h> //包含_nop_()函数定义的头文件 #define OP_READ 0xa1 // 器件地址以及读取操作,0xa1即为1010 0001B #define OP_WRITE 0xa0 // 器件地址以及写入…

win10系统gpu本地部署chatglm3-6b,从0开始安装

开源地址&#xff1a; GitHub - THUDM/ChatGLM3: ChatGLM3 series: Open Bilingual Chat LLMs | 开源双语对话语言模型 前言&#xff1a;ChatGLM2与ChatGLM3区别 ChatGLM2与ChatGLM3模型架构是完全一致的&#xff0c;ChatGLM与后继者结构不同。可见ChatGLM3相对于ChatGLM2没…

杨辉三角型打印

注&#xff1a; 利用杨辉三角形可以快速的列出牛顿二项式分解。 如&#xff1a;杨辉三角第6行值是 1 6 15 20 15 6 1 对应的二项式分解就是 ( m n ) 6 m 6 6 m 5 n 15 m 4 n 2 20 m 3 n 3 15 m 2 n 4 6 m n 5 n 6 (mn)^6m^66m^5n15m^4n^220m^3n^315m^2n^46mn^5n^6 (m…

NLP项目之语种识别

目录 1. 代码及解读2. 知识点n-grams仅保留最常见的1000个n-grams。意思是n1000 ? 1. 代码及解读 in_f open(data.csv) lines in_f.readlines() in_f.close() dataset [(line.strip()[:-3], line.strip()[-2:]) for line in lines] print(dataset[:5])[(1 december wereld…

付费进群系统源码带定位完整独立版(12月30日)再次修复首发

搭建教程 nginx1.2 php5.6–7.2均可 最好是7.2 第一步上传文件程序到网站根目录解压 第二步导入数据库&#xff08;shujuku.sql&#xff09; 第三步修改/config/database.php里面的数据库地址 第四步修改/config/extra/ip.php里面的域名 第四步设置伪静态thinkphp 总后台账号&…

2023年度个人总结

现在是北京时间2023年12月31日 下午17:13&#xff0c;再有不到7个小时就要迈入2024年。回望2023年真的是一言难尽&#xff0c;苦不堪言&#xff0c;不管是工作上还是生活中都经历了重重困难&#xff0c;肉体和精神上都备受折磨&#xff0c;特别痛苦。2023年是特别的艰辛、痛苦、…

ArkUI中自定义组件的生命周期

文章概叙 本文主要是介绍下在作为page以及component的时候的生命周期&#xff0c;以及调用API等应该在哪个生命周期使用。 书接上回 之前的博客已经结束了对底部栏的操作&#xff0c;现在开始需要关注到具体内容的对接了。 而开发的第一步&#xff0c;我们对页面的生命周期…

探索抖音详情API:塑造未来的媒体交互

一、引言 随着数字媒体的迅猛发展&#xff0c;抖音作为全球领先的短视频平台&#xff0c;其API接口为开发者提供了无尽的创新机会。了解抖音详情API的请求格式与参数&#xff0c;是每位有远见的开发者和媒体策划者的必修课。本文将深入剖析API的内在逻辑与潜力&#xff0c;为您…

Windows 产品历史

Windows 1.0&#xff5e;3.0概述 Windows 3.1及以前版本均为16位系统&#xff0c;因而不能充分利用硬件迅速发展的强大功能。同时,它们只能在MS-DOS上运行&#xff0c;必须与MS-DOS共同管理系统资源,故它们还不是独立的、完整的操作系统。1995年推出的Windows 95已摆脱MS-DOS的…

Vue懒加载深度解析:提升性能、优化用户体验的完整指南

文章目录 &#x1f333;引言&#x1f333;Vue懒加载基础&#x1f332;什么是懒加载&#xff1f;&#x1f332;组件级懒加载&#x1f332;图片懒加载 &#x1f333;懒加载的原理与优势&#x1f332;组件懒加载原理&#x1f332;图片懒加载原理&#x1f332;懒加载的优势 &#x…

最后一次纪念在泰山OFFICE的日子,明年开源量子OFFICE

今天去泰山在无锡的办公地点&#xff0c;给门卫送了一点零食表示感谢。送了之后&#xff0c;我也没进去怀旧&#xff0c;然后就去附近的南山&#x26e50;礼佛求福。 2021年的最后一天&#xff0c;公司举办了迎新活动。看了恍如隔世。我怀念泰山OFFICE&#xff0c;是因为在这里…