首页 > 其他分享 >【UniApp】-uni-app-全局数据和局部数据

【UniApp】-uni-app-全局数据和局部数据

时间:2023-12-08 09:56:50浏览次数:33  
标签:UniApp vue 微信 app globalData uni 全局 数据 App

前言

  • 好,经过上个章节的介绍完毕之后,了解了一下 uni-app-全局样式和局部样式
  • 那么了解完了全局样式和局部样式之后,这篇文章我再来给大家介绍一下 UniApp 中全局数据和局部数据

搭建演示环境

创建一个全新的项目:

然后在配置一下,微信小程序的 AppId,直接去之前的项目中拷贝一下即可,找到之前项目的 manifest.json 文件,然后选择微信小程序配置,复制一下即可:

  • 经过如上的这么一顿操作之后,就可以搭建完毕运行环境,与编码环境

步入正题

全局数据

  • 先来看一下全局数据,全局数据在微信小程序中怎么搞?在微信小数据中是不是有个 globalData
  • 那么在 UniApp 当中也有 globalData,回到官方文档,然后找到 全局文件
  • 在全局文件中找到 App.vue/uvue
  • 点击 App.vue/uvue 就可以发现这里有 globalData

官方介绍:

  • 小程序有 globalData,这是一种简单的全局变量机制。这套机制在uni-app里也可以使用,并且全端通用
  • 当然vue框架的全局变量,另有其他方式定义
  • 好了看完之后我们来验证一下,官方说明了 globalData 是定义在 App.vue 中,所以我们也需要这么来写

定义全局数据

  • 打开新创建好的项目然后,找到 App.vue 文件

  • 我定义了两个属性分别是 name, age
globalData: {  
    name: 'BNTang',
    age: 18
}

获取全局数据

  • 我们定好了数据,是不是要进行使用
  • 使用方式在官方也是有介绍的,官方是这么说的:js 中操作 globalData 的方式通过 getApp().globalData.text = 'test'

首页

  • 我们在首页输出打印一下全局的数据就相当于使用了好吧,更改 index.vue
onLoad() {
	console.log("全局数据: ", JSON.stringify(getApp().globalData));
}

测试

Web端

  • 在官方文档中,提到了 并且全端通用,所以我这里还需要在运行在微信小程序上看看效果

微信小程序

总结

  • 使用全局数据,只需要在 App.vue 当中通过 globalData 来保存数据
  • 然后在其他页面当中通过 getApp().globalData 来获取保存的全局数据

这里大家可以看到我的文章目录中没有体现局部数据,局部数据其实是和 vue 一样,在自己页面的 data 中返回一个对象,然后在这个对象中定义的属性就是局部数据,没什么好说的所以我这里就没有单独起一个 title 来进行介绍。

最后

大家好我是 BNTang, 一个热爱分享的技术的开发者,如果大家觉得我的文章对你有帮助的话,可以关注我的公众号 JavaBoyL,我会在公众号中分享一些IT技术和一些个人的见解,谢谢大家的支持

标签:UniApp,vue,微信,app,globalData,uni,全局,数据,App
From: https://www.cnblogs.com/BNTang/p/17884515.html

相关文章

  • LUNIX安装FTP服务器的详细教程
    1.打开终端,进入root模式。在终端中输入:sudosu,回车后提示输入密码,输入密码即可。2.安装vsftpd软件。首先需要联网,或者通过新立德软件安装。如果需要卸载软件,可以使用命令sudoapt-getremovevsftpd。安装命令为sudoapt-getinstallvsftpd。3.安装完成后,默认会在文件系统下的/......
  • 【UniApp】-uni-app概述
    前言好,经过我们前面文章的编写,大家可以了解到微信小程序开发相关的知识,了解完了这个微信小程序开发和云开发之后,从这篇文章开始,我再来给大家写一下关于Uniapp的知识。好,开始,那什么是Uniapp呢?这个时候我们不管三七二十一,先打开我们Uniapp官方文档,它官方地址也很简单,叫做d......
  • 【Nginx/IIS】解决uniapp/Vue history模式下页面刷新404
    uniapp/Vue开启History模式本地开发:二级页面刷新或者通过链接进入二级页面是正常的打包部署后:二级页面刷新或者通过链接进入二级页面会报错404页面找不到 解决方案:Nginx配置:在nginx.conf的对应location里配置一行代码try_files$uri$uri//index.html;location/h5{......
  • 定时备份lunix文件夹
    inio需要备份,只设置备份文件夹备份,因为minio有挂载文件,所以只要把挂载文件夹备份就好了;备份脚本如下:LOG_FILE="/data/backup/minio/logfile.log"write_log(){localmessage=$1echo"$(date+"%Y-%m-%d%H:%M:%S")-$message">>"$LOG_FILE"}write_......
  • Java单元测试浅析(JUnit+Mockito)
    Java单元测试浅析(JUnit+Mockito)作者:京东物流秦彪1.什么是单元测试(1)单元测试环节:测试过程按照阶段划分分为:单元测试、集成测试、系统测试、验收测试等。相关含义如下:1)单元测试:针对计算机程序模块进行输出正确性检验工作。2)集成测试:在单元测试基础上,整合各个模......
  • 使用mumu模拟器抓包 andriod app
    背景公司H5嵌入到农行手机app里面。某天有人反馈进入国内机票订单详情时,应用崩溃了,如下图:经过测试,此问题仅在安卓手机中出现,且其他页面都正常。于是我怀疑可能是这个页面代码有问题,想着能否抓包看看大概发生了啥。手机抓包我借同事的安卓手机进行抓包,不幸的是农行app禁止我们......
  • uniapp 配置 基座调试指定页面
    在用hbuildx时,用自定义基座,调试程序时,有的页面因为基座缺少组件而进不去,这个时候就可以用指定页面的方式,我们只需要把进入页面的入参传进去,这个时候打开页面就是指定要调试的页面了。就在page.json文件最后加入"condition":{//模式配置,仅开发期间生效"current":0......
  • uniapp 图片懒加载的一种方式
    如果是列表页,可以采用前端分页,通过scroll-view下拉,在绑定图片地址信息,这样就能下拉部分,加载部分图片了。pageQuery(){letcurrentPage=this.pQuery.page;letpageSize=this.pQuery.size;constindex=(......
  • 开发APP应用程序到底是选ios好还是Android好?
    哈喽大家好,我是咕噜老尼,现在我们都知道,APP应用已经覆盖了我们的生活,成为我们生活中不可缺少的一部分,手机系统主要分两种,分别是安卓和ios系统,不少APP开发公司在制作手机APP时,都需要将同一款APP做成两种,分别适应安卓和iOS系统。那么,开发APP应用程序到底是选ios好还是Android好,我们一......
  • uniapp---wap2app去掉系统自带的导航栏
    在用uniapp进行将wap站转化为app的时候,默认打包后的文件,带有系统的导航栏,下面是去除的办法:第一步:找到sitemap.json 设置titleNView为false: 第二步:在pages加入{"webviewId":"common","matchUrls":[{"hostname":"R:.*","pa......