1.uniapp基础

1.uniapp基础

官方文档：uni-app官网

1.1开发工具

（1）工具：

                HBuilderX HBuilderX-高效极客技巧

1.2 新建项目

（1）

        文件==》新建==项目

​

（2）选择相应的配置信息，填写项目根路径以及项目名称

​

1.3 项目结构

一个uni-app工程，默认包含如下目录及文件：

┌─uniCloud              云空间目录，阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb（详见uniCloud）
│─components            符合vue组件规范的uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─utssdk                存放uts文件
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源都应存放于此目录
├─uni_modules           存放[uni_module](/uni_modules)。
├─platforms             存放各平台专用页面的目录，详见
├─nativeplugins         App原生语言插件 详见
├─nativeResources       App端原生资源目录
│  ├─android            Android原生资源目录 详见
|  └─ios                iOS原生资源目录 详见
├─hybrid                App端存放本地html文件的目录，详见
├─wxcomponents          存放小程序组件的目录，详见
├─unpackage             非工程代码，一般存放运行或发行的编译结果
├─AndroidManifest.xml   Android原生应用清单文件 详见
├─Info.plist            iOS原生应用配置文件 详见
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息，详见
├─pages.json            配置页面路由、导航条、选项卡等页面类信息，详见
└─uni.scss              这里是uni-app内置的常用样式变量

1.4 项目运行

 配置文档： uniapp-hubildx配置-CSDN博客

该文档只有常用几个配置，其他配置请参考官方配置文档。

2 uniapp项目

2.1uniapp中的Vue

vue2-vue3全部文档：Vue2-Vue3学习笔记（全）-CSDN博客

（1）VUE核心文档：1.Vue核心-CSDN博客

（2）VUE组件化编程：2.VUE组件化编程-CSDN博客

（3）VUE脚手架：3.使用脚手架-CSDN博客

（4）VUE的AJAX：4.Vue中的AJAX-CSDN博客

（5）vuex的使用：5.vuex使用-CSDN博客

（6）VUE的路由：6.vue中的路由-CSDN博客

（7）VUE常用UI：7.Vue UI库-CSDN博客

（8）VUE3入门：Vue3入门-CSDN博客

uniapp中的view与html（vue）中的div用法一样。

        h5标签与小程序可能会不兼容，导致一些标签例如：h2，i等，在浏览器页面生效，但是小程序运行不生效。

        故使用常规vue写法写出的页面，只适配普通的手机浏览器页面，小程序等运行是可能会出现样式等等的问题。

2.2 页面配置与全局配置

2.2.1 新建文件

选择文件夹（pages）==》新建页面：

      A：文件名称（生成A.vue的文件）。

      B：勾选后会自动生成一个与A名称相同的文件夹，且文件在该文件夹下。

      C：C选择后会自动将A注册到pages.json中，无需手动添加。

2.2.2 pages.json

pages.json

    配置文件中注册的第一个页面为默认展示页面。

    navigationBarTitleText：页面展示最上方显示标题。

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
	{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		},{
		"path" : "pages/index/list/list",
		"style" : 
		{
			"navigationBarTitleText" : "新闻列表",
			"navigationBarTextStyle":"#2a2c37"
		}
	}
		
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "# "
	},
	"uniIdRouter": {}
}

2.2.3 stylePage

（1）在pages.json中可以进行一些基本配置，详细配置信息可以参考官网。

（2）pages.json的page数组中的某个对象的style属性配置只对该页面生效。

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
	{
        {
		"path" : "pages/index/list/list",
		"style" : 
		{
			"navigationBarTitleText" : "新闻列表",
			"navigationBarTextStyle":"#2a2c37"
		}
		
	],
（3）最下方的globalStyle配置对全局生效，但是之后再pages里的对象，未配置style属性时生效。 
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "# "
	},

（4）uniapp官网提供的部分配置信息：

属性类型默认值描述平台差异说明
navigationBarBackgroundColorHexColor#F8F8F8导航栏背景颜色（同状态栏背景色）APP与H5为#F8F8F8，小程序平台请参考相应小程序文档
navigationBarTextStyleStringblack导航栏标题颜色及状态栏前景颜色，仅支持 black/white
navigationBarTitleTextString导航栏标题文字内容
navigationBarShadowObject导航栏阴影，配置参考下方 导航栏阴影uni-app x 不支持
navigationStyleStringdefault导航栏样式，仅支持 default/custom。custom即取消默认的原生导航栏，需看使用注意微信小程序 7.0+、百度小程序、H5、App（2.0.3+）
disableScrollBooleanfalse设置为 true 则页面整体不能上下滚动（bounce效果），只在页面配置中有效，在globalStyle中设置无效微信小程序（iOS）、百度小程序（iOS）
backgroundColorHexColor#ffffff窗口的背景色微信小程序、百度小程序、抖音小程序、飞书小程序、京东小程序
backgroundTextStyleStringdark下拉 loading 的样式，仅支持 dark/lightuni-app x 不支持
enablePullDownRefreshBooleanfalse是否开启下拉刷新，详见页面生命周期。
onReachBottomDistanceNumber50页面上拉触底事件触发时距页面底部距离，单位只支持px，详见页面生命周期uni-app x 不支持
backgroundColorTopHexColor#ffffff顶部窗口的背景色（bounce回弹区域）仅 iOS 平台
backgroundColorBottomHexColor#ffffff底部窗口的背景色（bounce回弹区域）仅 iOS 平台
disableSwipeBackBooleanfalse是否禁用滑动返回App-iOS（3.4.0+）
titleImageString导航栏图片地址（替换当前文字标题），支付宝小程序内必须使用https的图片链接地址支付宝小程序、H5、App(uni-app x 不支持)
transparentTitleStringnone导航栏透明设置。支持 always 一直透明 / auto 滑动自适应 / none 不透明支付宝小程序、H5、APP(uni-app x 不支持)
titlePenetrateStringNO导航栏点击穿透支付宝小程序、H5
app-plusObject设置编译到 App 平台的特定样式，配置项参考下方 app-plusApp
h5Object设置编译到 H5 平台的特定样式，配置项参考下方 H5H5
mp-alipayObject设置编译到 mp-alipay 平台的特定样式，配置项参考下方 MP-ALIPAY支付宝小程序
mp-weixinObject设置编译到 mp-weixin 平台的特定样式微信小程序
mp-baiduObject设置编译到 mp-baidu 平台的特定样式百度小程序
mp-toutiaoObject设置编译到 mp-toutiao 平台的特定样式抖音小程序
mp-larkObject设置编译到 mp-lark 平台的特定样式飞书小程序
mp-qqObject设置编译到 mp-qq 平台的特定样式QQ小程序
mp-kuaishouObject设置编译到 mp-kuaishou 平台的特定样式快手小程序
mp-jdObject设置编译到 mp-jd 平台的特定样式京东小程序
usingComponentsObject引用小程序组件，参考 小程序组件App(uni-app x 不支持)、微信小程序、支付宝小程序、百度小程序、京东小程序
leftWindowBooleantrue当存在 leftWindow时，当前页面是否显示 leftWindowH5
topWindowBooleantrue当存在 topWindow 时，当前页面是否显示 topWindowH5
rightWindowBooleantrue当存在 rightWindow时，当前页面是否显示 rightWindowH5
maxWidthNumber单位px，当浏览器可见区域宽度大于maxWidth时，两侧留白，当小于等于maxWidth时，页面铺满；不同页面支持配置不同的maxWidth；maxWidth = leftWindow(可选)+page(页面主体)+rightWindow(可选)H5（2.9.9+）

2.3 uniapp中的组件

 小程序API：微信开放文档

        与uniappAPI基本一致。

2.4 px与rpx

  1. px：

    • px 是像素（Pixel）的缩写，是一个相对固定的单位。
    • 在不同的设备上，1px 所代表的实际物理长度是不同的，因为不同设备的屏幕分辨率不同。在高分辨率屏幕上，1px 可能会显得更小。
    • px 常用于网页开发和其他不需要考虑设备屏幕尺寸差异的应用中。

  2. rpx：

    • rpx 是一种响应式的单位，主要用于微信小程序以及其他需要适应不同屏幕尺寸的应用程序。
    • 微信小程序将屏幕划分为 750rpx 的宽度，这样可以保证在不同设备上显示的一致性。
    • 使用 rpx 的好处是可以根据屏幕实际宽度进行自适应布局，无需为不同设备编写不同的样式代码。
    • 转换关系：假设屏幕宽度为 W，则 1rpx = W / 750px。例如，在 iPhone6s 上，屏幕宽度为 375px，那么 1rpx = 375px / 750 = 0.5px。

3 Vue与小程序生命周期

 Vue生命周期请参考:1.Vue核心-CSDN博客

应用生命周期

  1. onLaunch：当小程序启动时触发，全局只会触发一次。
  2. onShow：当小程序从前台进入后台再返回前台时触发。
  3. onHide：当小程序从前台进入后台时触发。
  4. onError：当小程序发生错误时触发。

        这些函数是在app.js文件中定义的，通过App(Object)函数注册一个小程序，并指定其生命周期回调。

页面生命周期

        页面生命周期则是针对小程序中的每个页面，包括以下几个回调函数：

  1. onLoad：页面加载时触发，会传入页面参数。
  2. onReady：页面初次渲染完成时触发。
  3. onShow：页面显示/切入前台时触发。
  4. onHide：页面隐藏/切入后台时触发。
  5. onUnload：页面卸载时触发。

组件生命周期

  1. created：在组件被创建后立即执行，此时组件视图还未添加到页面中。通常可以在这个函数中初始化一些数据和变量。

  2. attached：在组件完全初始化完毕、进入页面节点树后触发。这个生命周期可以做一些异步请求、数据更新等操作。

  3. ready：当组件及其所有子组件都准备就绪时触发，代表组件渲染完成并显示在界面上。

  4. moved：如果组件在一个已有的节点树内移动位置，则会触发此生命周期。

  5. detached：在组件离开页面节点树后触发。退出一个页面时，如果组件还在页面节点树中，则 detached 会被触发。

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

ArkUI组件--Text组件

ArkUI组件--Text组件

1.声明Text组件并设置文本内容 Text(content?:string|Recource) #两种数据类型，字符串和本地资源文件 ①string格式，直接填写文本内容 Text(需要显示的文本) ②Recource格式，读取本地资源文件 Text($r(app.string.width_label)) 读取图…
阅读更多...
[读论文]BK-SDM: A Lightweight, Fast, and Cheap Version of Stable Diffusion

[读论文]BK-SDM: A Lightweight, Fast, and Cheap Version of Stable Diffusion

github: GitHub - Nota-NetsPresso/BK-SDM: A Compressed Stable Diffusion for Efficient Text-to-Image Generation [ICCV23 Demo] [ICML23 Workshop] ICML 2023 Workshop on ES-FoMo 简化方式 蒸馏方式（训练Task蒸馏outKD-FeatKD） 训练数据集 评测指标…
阅读更多...
(使用vite搭建vue3项目（vite + vue3 + vue router + pinia + element plus）)

(使用vite搭建vue3项目（vite + vue3 + vue router + pinia + element plus）)

使用vite搭建vue3项目（vite vue3 vue router pinia element plus） 初始化项目安装依赖，运行项目初始配置 初始化项目 1.需要在创建项目的位置cmd目录下执行 2. npm init vitelatest 回车 npm init vitelatest3.填上自己的项目名称 回车…
阅读更多...
GPTs每日推荐--生化危机【典藏版】

GPTs每日推荐--生化危机【典藏版】

今天给大家推荐一个游戏性质的GPTs，叫做生化危机典藏版，国内点击可玩。 开篇：玩家从末日中醒来。 选择：玩家会遇到各种资源、任务、剧情，需要自行选择相关的分支剧情，一旦选错，无法重选。 结局…
阅读更多...
Unirest-Java：Java发起GET、POST、PUT、DELETE、文件上传，文件下载工具类介绍

Unirest-Java：Java发起GET、POST、PUT、DELETE、文件上传，文件下载工具类介绍

一、简介 Unirest-Java是一个轻量级的HTTP客户端库，用于在Java应用程序中发送HTTP请求。 它提供了简单易用的API，可以方便地处理GET、POST、PUT、DELETE等HTTP方法。 Unirest-Java支持异步和同步请求，可以轻松地与JSON、XML等数据格式进行…
阅读更多...
鸿蒙系统扫盲（四）：鸿蒙使用的是微内核？

鸿蒙系统扫盲（四）：鸿蒙使用的是微内核？

我们常说，看一个系统是不是自研，就看它的内核，常见的内核分为：宏内核和微内核，当然还有两者结合体，他们到底有什么区别？ 1.白话宏内核和微内核 有一天，你结婚了，你和你…
阅读更多...
【降本增笑？滴滴史上最严重服务故障，裁员真不能裁测试】

【降本增笑？滴滴史上最严重服务故障，裁员真不能裁测试】

2023 年 11 月 27 日晚间，滴滴因系统故障导致 App 服务异常，不显示定位且无法打车。11 月 27 日晚，滴滴出行进行了回复：非常抱歉，由于系统故障。 前言 2023 年 11 月 28 日早间，滴滴出行消息称，…
阅读更多...
SQLserver通过字符串中间截取然后分组

SQLserver通过字符串中间截取然后分组

当我们存的数据是json的时候可以全部取出在模糊查询但是有多个重复数据的时候就没办法准确的模糊出来这个时候我们就需要用的字符串截取 --创建函数create FUNCTION [dbo].[Fmax] (str varchar(50),start VARCHAR(50),length VARCHAR(50)) RETURNS varchar(max) AS BEGINDEC…
阅读更多...
js性能优化

js性能优化

1.http\TCP url:资源定位符 1. HTTP和TCP是互联网上应用广泛的两种协议，其中HTTP是应用层协议，而TCP是传输层协议。 HTTP（Hypertext Transfer Protocol）是一种用于在网络上传输数据的协议，它以客户端/服务器模型为…
阅读更多...
python爬虫非对称加密RSA案例：某观鸟网站

python爬虫非对称加密RSA案例：某观鸟网站

声明： 该文章为学习使用，严禁用于商业用途和非法用途，违者后果自负，由此产生的一切后果均与作者无关 一、找出需要加密的参数 js运行 atob(‘aHR0cDovL2JpcmRyZXBvcnQuY24vaG9tZS9hY3Rpdml0eS9wYWdlLmh0bWw’) 拿到网址&#xf…
阅读更多...
vue3+ts项目中导入组件时报错has no default export

vue3+ts项目中导入组件时报错has no default export

下面这句会报错has no default export import Button from "./components/Button.vue";使用vetur这个插件（我目前的版本是0.37.3，应该是这个版本之前的都不支持）。但是依旧报错，所以我选择禁用了，就不报错了…
阅读更多...
2024清理软件排名第一的是CCleaner

2024清理软件排名第一的是CCleaner

CCleaner2024版是一款专业好用的系统优化和隐私保护工具。CCleaner官方版主要用来清除Windows系统不再使用的垃圾文件和使用者的上网记录以空出硬盘容量，按工具同时注重保护用户隐私，被誉为“世界上最受欢迎的PC清洁剂”。 CCleaner下载如下&#xff1a…
阅读更多...
龙迅分配器LT86102UXE/LT86104UX，HDMI一分二/HDMI一分四

龙迅分配器LT86102UXE/LT86104UX，HDMI一分二/HDMI一分四

龙迅LT86102UXE描述; Lontium LT86102UXE HDMI2.0分配器具有1：2的分配器，符合HDMI2.0/1.4规范，最大6Gbps高速数据速率，自适应均衡RX输入和预先强调的TX输出，以支持长电缆应用程序，内部TX通道交换灵活的PCB…
阅读更多...
【自习室预约系统源码】基于springboot框架的自习室管理和预约系统设计

【自习室预约系统源码】基于springboot框架的自习室管理和预约系统设计

🍅 简介：500精品计算机源码学习 🍅 欢迎点赞 👍 收藏 ⭐留言 📝 文末获取源码 目录 一、以下学习内容欢迎领取： 二、文档资料截图： 三想了解更多，请收藏、评论、留言：…
阅读更多...
在windows server系统下，快速部署自己的网站

在windows server系统下，快速部署自己的网站

目录 xampp简介xampp的作用xampp的安装方法Apache简介Apache的作用 本文主要介绍使用xampp软件包在windows server系统下，快速部署自己的网站。 xampp简介 XAMPP是一款基于Apache、MySQL、PHP和Perl的开源Web服务器软件包。XAMPP支持多个操作系统，包括W…
阅读更多...
活动回顾｜德州仪器嵌入式技术创新发展研讨会（上海站）成功举办，信驰达科技携手TI推动技术创新

活动回顾｜德州仪器嵌入式技术创新发展研讨会（上海站）成功举办，信驰达科技携手TI推动技术创新

2023年11月28日，德州仪器(TI)嵌入式技术创新发展研讨会在上海顺利举办。作为TI中国第三方IDH，深圳市信驰达科技有限公司受邀参加，并设置展位，展出CC2340系列低功耗蓝牙模块及TPMS、蓝牙数字钥匙解决方案，与众多业内伙伴…
阅读更多...
网络层之无分类编址CIDR（内涵计算例题）

网络层之无分类编址CIDR（内涵计算例题）

学习的最大理由是想摆脱平庸，早一天就多一份人生的精彩；迟一天就多一天平庸的困扰。各位小伙伴，如果您： 想系统/深入学习某技术知识点… 一个人摸索学习很难坚持，想组团高效学习… 想写博客但无从下手，急需…
阅读更多...
openGauss学习笔记-141 openGauss 数据库运维-例行维护-例行重建索引

openGauss学习笔记-141 openGauss 数据库运维-例行维护-例行重建索引

文章目录 openGauss学习笔记-141 openGauss 数据库运维-例行维护-例行重建索引141.1 背景信息141.2 重建索引141.3 操作步骤 openGauss学习笔记-141 openGauss 数据库运维-例行维护-例行重建索引 141.1 背景信息 数据库经过多次删除操作后，索引页面上的索引键将被…
阅读更多...
ai绘画Midjourney绘画提示词Prompt教程

ai绘画Midjourney绘画提示词Prompt教程

一、Midjourney绘画工具 SparkAi【无需魔法使用】： SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如何搭建部署AI创作ChatGPT？小编这里写一个详细图文教程吧！本系统使用NestjsVueTypescript框架技术，持续集成AI能力到…
阅读更多...
理论与实践相结合之交换机通信（数据链路层）

理论与实践相结合之交换机通信（数据链路层）

前提 本文所使用的演示工具是“Cisco Packet Tracer”，没有安装的请参考以下链接进行安装 理论与实践相结合之Cisco Packet Tracer网络模拟器安装教程-CSDN博客 交换机简介 交换机是一种网络硬件设备，每个交换机都维护了一个mac地址和端口的对应表&a…
阅读更多...
最新文章

Copyright @ 2022~2023