标准版uni-app移动端页面添加/开发操作流程
页面简介
uni-app项目中,一个页面就是一个符合Vue SFC规范
的.vue
文件或.nvue
文件。
.vue
页面和.nvue
页面,均全平台支持,差异在于当uni-app发行到App平台时,.vue
文件会使用webview进行渲染,.nvue
会使用原生进行渲染。nvue具体介绍及使用方法见: nvue原生渲染
新建页面
uni-app
中的页面,通常会保存在工程根目录下的pages
目录下。
每次新建页面,均需在pages.json
中配置pages
列表;未在pages.json -> pages
中配置的页面,uni-app
会在编译阶段进行忽略。
pages.json
的目录结构
一般主要页面我们放在pages
中,
// 例如: 首页、购物车 个人中心等
{"path": "pages/index/index", // 该路径需要对应文件 pages中的路径"style": {"navigationBarTitleText": "","navigationStyle": "custom", "navigationBarTextStyle": "white",}
},
而一些业务模块且不是tabbar页面,我们可以在subPackages
中创建分包
/// 实例
"subPackages": [{ // 模块分包"root": "pages/extension","name": "extension","pages": [{"path": "customer_list/chat","style": {"navigationBarTitleText": "对话详情", // 页面title"navigationStyle": "custom","app-plus": {"scrollIndicator": false //禁用原生导航栏,"titleNView": {"type": "default"},"disableScroll": true}}]
}]
应用首页
这里要注意的是uni-app
会将pages.json -> pages
配置项中的第一个页面,作为当前工程的首页(启动页)。
模板内引入静态资源
template内引入静态资源,如image、video等标签的src属性时,可以使用相对路径或者绝对路径,形式如下
注意
@
开头的绝对路径以及相对路径会经过 base64 转换规则校验- 引入的静态资源在非 h5 平台,均不转为 base64。
- H5 平台,小于 4kb 的资源会被转换成 base64,其余不转。
- 自
HBuilderX 2.6.6
起template
内支持@
开头路径引入静态资源,旧版本不支持此方式 - App 平台自
HBuilderX 2.6.9
起template
节点中引用静态资源文件时(如:图片),调整查找策略为【基于当前文件的路径搜索】,与其他平台保持一致
css 引入静态资源
css文件或style标签内引入css文件时(scss、less 文件同理),可以使用相对路径或绝对路径(HBuilderX 2.6.6)
/* 绝对路径 */
@import url('/common/uni.css');
@import url('@/common/uni.css');
/* 相对路径 */
@import url('../../common/uni.css');
删除页面
删除页面时,需做两件工作:
- 删除
.vue
文件或.nvue
文件 - 删除
pages.json -> pages
列表项中的配置
相关文章:
标准版uni-app移动端页面添加/开发操作流程
页面简介 uni-app项目中,一个页面就是一个符合Vue SFC规范的.vue文件或.nvue文件。 .vue页面和.nvue页面,均全平台支持,差异在于当uni-app发行到App平台时,.vue文件会使用webview进行渲染,.nvue会使用原生进行渲染。…...
VMware 安装配置 Ubuntu(最新版、超详细)
Linux 系列教程: VMware 安装配置 Ubuntu(最新版、超详细)FinalShell 远程连接 Linux(Ubuntu)系统Ubuntu 系统安装 VS Code 并配置 C 环境 文章目录 1. 下载安装 VMware2. 检查网络适配器3. Ubuntu 下载4. 创建虚拟机5…...
clickhouse ttl不生效
现象: 日志保留31天, 但是发现1年前的数据还有。 表结构: CREATE TABLEads_xxxx_metrics_1m_local (static_time String COMMENT 统计时间,......) ENGINE ReplacingMergeTree (process_time) PARTITION BYtoYYYYMMDD (toDate (static_tim…...
前端打包webpack vite
起步 | webpack 中文文档 | webpack中文文档 | webpack中文网 npm run build 1webpack: mkdir webpack-demo cd webpack-demo npm init -y npm install webpack webpack-cli --save-dev vite : 快速上手 | Vue.js...
Cesium之home键开关及相机位置设置
显隐控制 设置代码中的homeButton var TDT_IMG_C "https://{s}.tianditu.gov.cn/img_c/wmts?servicewmts&requestGetTile&version1.0.0" "&LAYERimg&tileMatrixSetc&TileMatrix{TileMatrix}&TileRow{TileRow}&TileCol{TileCol}…...
nginx根据二级目录转发服务以及带/和不带/的区别
在nginx中配置proxy_pass代理转发时,如果在proxy_pass后面的url加/,表示绝对根路径;如果没有/,表示相对路径,把匹配的路径部分也给代理走。具体实例如下 1.配置文件location带/且proxy_pass带/ server {listen 80;se…...
JVM 性能调优命令(jps,jinfo,jstat,jstack,jmap)
常用命令:jps、jinfo、jstat、jstack、jmap jps jps查看java进程及相关信息 jps -l 输出jar包路径,类全名 jps -m 输出main参数 jps -v 输出JVM参数jps命令示例 显示本机的Java虚拟机进程: # jps 15729 jar 92153 Jps 90267 Jstat显示主类…...
探索 IntelliJ IDEA 2024.1最新变化:全面升级助力编码效率
探索 IntelliJ IDEA 2024.1最新变化:全面升级助力编码效率 文章目录 探索 IntelliJ IDEA 2024.1最新变化:全面升级助力编码效率摘要引言 IntelliJ IDEA 2024.1 最新变化关键亮点全行代码补全 Ultimate对 Java 22 功能的支持新终端 Beta编辑器中的粘性行 …...
【Kafka】Zookeeper集群 + Kafka集群
Zookeeper 概述 Zookeeper是一个开源的分布式的,为分布式框架提供协调服务的Apache项目。 Zookeeper 工作机制★★★ Zookeeper从设计模式角度来理解: 1)是一个基于观察者模式设计的分布式服务管理框架; 它负责存储和管理大家都关…...
递归 python
↵一、简单理解 解决问题的一种方法,它将问题不断的分成更小的子问题,直到子问题可以用普通的方法解决。通常情况下,递归会使用一个不停调用自己的函数。 【注】:每一次递归调用都是在解决一个更小的问题,如此进行下…...
解读科技智慧公厕改变生活的革命性创新之路
公共厕所,作为城市基础设施的一部分,一直以来都备受人们诟病。脏乱差、设施老旧、管理混乱,成为公共厕所长期存在的问题。然而,随着科技的不断进步,智慧公厕应运而生,为解决公厕难题,智慧公厕源…...
鸿蒙ArkTS小短剧开源项目进行中
鸿蒙小短剧开源项目进行中 短剧项目名称:CCShort-TV 短剧项目名称:CCShort-TV 使用ArtTS语言,API9以上,HarmonyOS系统的短剧开源代码,使用GSYVideoPlayer作为核心播放器的小短剧。主要以ArkTS,ArkUI编写为…...
基于STM32的RFID智能门锁系统
本文针对RFID技术,着重研究了基于单片机的智能门锁系统设计。首先,通过链接4*4按键模块与主控STM32,实现了多种模式,包括刷卡开锁、卡号权限管理、密码开锁、修改密码、显示实时时间等功能。其次,采用RC522模块与主控S…...
消息队列的简介
什么是消息队列? 消息队列就是用于不同系统 不同服务之间异步地传递信息,就是不用生产者和消费者同时在线或者直接连接,消息存储在队列中,直到消费者准备处理 消息队列的核心概念: 生产者:发送消息的一方 消费者:处理消息的一方 队列:存储队列的一方 优点: 1解耦: 生产者和消费…...
一个开箱即用的物联网项目,开源免费可商用
一、平台简介 今天给大家推荐一款开源的物联网项目,简单易用,非常适合中小团队和个人使用,项目代码和文档完全开源,个人和公司都可以应用于商业项目,只需要保留开源协议文件即可。 本项目可应用于智能家居、农业监测…...
成为程序员后你都明白了什么呢?
成为程序员后你都明白了什么? 简介:探讨成为程序员后的收获和体会,以及对未来的展望。 方向一:技术成长 在技术成长方面,我认识到编程不仅仅是一种技能,更是一种思维方式。在不断地学习和实践中…...
Rust常见陷阱 | 算术溢出导致的 panic
Rust作为一种内存安全性语言,对于算术运算中的溢出处理特别严格。由于Rust默认会在debug模式下进行算术操作的溢出检查,任何溢出行为都会导致panic,这样能够帮助开发者在调试阶段发现潜在的溢出错误。尽管在release模式下,溢出会导致值的截断,并不会引起panic,但忽视这一…...
SRS服务接入华为云CDN
一、srs配置 正常的标准配置即可,需打开hls推流即可,一般配置中默认打开 二、华为云cdn配置 1.登录华为云,找内容分发网络cdn 2.点击域名管理,点击添加域名 3.配置加速域名 4.选择点播加速 5.添加源站 配置源站地址…...
微信小程序----微信小程序基础
能够知道如何创建小程序项目能够清楚小程序项目的基本组成结构能够知道小程序页面由几部分组成能够知道小程序中常见的组件如何使用能够知道小程序如何进行协同开发和发布 一.小程序简介 1. 小程序与普通网页开发的区别 1. 运行环境不同 网页运行在浏览器环境中小程序运行在…...
牛客周赛 Round 39(A,B,C,D,E,F,G)
比赛链接 官方题解(视频) B题是个贪心。CD用同余最短路,预处理的完全背包,多重背包都能做,比较典型。E是个诈骗,暴力就完事了。F是个线段树。G是个分类大讨论,出题人钦定的本年度最佳最粪 题目…...
性能优化工具
CPU 优化的各类工具 network netperf 服务端: $ netserver Starting netserver with host IN(6)ADDR_ANY port 12865 and family AF_UNSPEC$ cat netperf.sh #!/bin/bash count$1 for ((i1;i<count;i)) doecho "Instance:$i-------"# 下方命令可以…...
【简单介绍下R-Tree】
🌈个人主页: 程序员不想敲代码啊 🏆CSDN优质创作者,CSDN实力新星,CSDN博客专家 👍点赞⭐评论⭐收藏 🤝希望本文对您有所裨益,如有不足之处,欢迎在评论区提出指正,让我们共…...
比特币叙事大转向
作者:David Lawant 编译:秦晋 要理比特币解减半动态,最关键的图表是下面这张,而不是价格图表。它显示了自 2012 年以来,矿业总收入与比特币现货交易量的比例,并标注了三个减半日期。 虽然矿工仍然是比特币生…...
Spring的事务传播机制有哪些
Spring的事务传播机制有哪些? Spring的事务传播机制用于控制在多个事务方法相互调用时事务的行为。 在复杂的业务场景中,多个事务方法之间的调用可能会导致事务的不一致,如出现数据丢失、重复提交等问题,使用事务传播机制可以避…...
【Linux系统】地址空间 Linux内核进程调度队列
1.进程的地址空间 1.1 直接写代码,看现象 1 #include<stdio.h>2 #include<unistd.h>3 4 int g_val 100;5 6 int main()7 {8 int cnt 0;9 pid_t id fork();10 if(id 0)11 {12 while(1)13 {14 printf(&…...
centos搭建yum源
目录 1.createrepo简介 2.repo搭建思路 3.安装 4.使用 1.createrepo简介 createrepo 是一个用于创建 RPM 包的工具,它可以帮助你创建一个本地的 YUM 仓库。createrepo 并不是用于运行 YUM 仓库服务的软件,而是用来生成仓库的元数据,使得 YUM 可以理解和使用这个仓库。 …...
使用Docker搭建一主二从的redis集群
文章目录 一、根据基础镜像构建三个docker容器二、构建master机三、配置slave机四、测试 本文使用 主机指代 物理机、 master机指代“一主二从”中的 一主, slave机指代“一主二从”中的 二从 一、根据基础镜像构建三个docker容器 根据本文第一章(…...
华为配置通过流策略实现流量统计
配置通过流策略实现流量统计示例 组网图形 图1 配置流策略实现流量统计组网图 设备 接口 接口所属VLAN 对应的三层接口 IP地址 SwitchA GigabitEthernet1/0/1 VLAN 10 - - GigabitEthernet1/0/2 VLAN 20 - - GigabitEthernet1/0/3 VLAN 10、VLAN 20 - - S…...
vue2和vue3的v-if与v-for优先级对比
Vue.js 中使用最多的两个指令就是 v-if 和 v-for,因此我们可能会想要同时使用它们。虽然官方不建议这样做,但有时确实是必须的,我们来了解下他们的工作方式: 在 vue 2.x 中,在一个元素上同时使用 v-if 和 v-for 时&am…...
ARM之栈与方法
ARM之栈与方法 计算机中的栈是一种线性表,它被限定只能在一端进行插入和删除操作(先进后出)。通常将可以插入和删除操作的一端称为栈顶,相对的一端为栈底。 通常栈有递增堆栈(向高地址方向生长)、递减堆栈…...
Winfrom —— GDI画板
定义绘制对象 Graphics g; 起始点坐标 Point start; 画笔颜色 Color c1 Color.Black; 是否开始绘制 当flagtrue开始绘制,结束绘 private void Form1_MouseDown(object sender, MouseEventArgs e) {if (e.Button MouseButtons.Left) //点击了鼠标左键{start …...
【Jenkins】Jenkins自动化工具介绍
目录 技术背景常规的手动打包步骤 Jenkins简介起源与发展Jenkins的核心价值1.自动化1.1代码构建1.2测试自动化1.3自动部署 2.持续集成与持续部署CI/CD的概念如何减少集成问题更快速地发布软件版本 Jenkins优势Jenkins的主要竞争对手Travis CI:CircleCI:GitLab CI: Jenkins与其他…...
鸢尾花数据集的KNN探索与乳腺癌决策树洞察
鸢尾花数据集的KNN探索与乳腺癌决策树洞察 今天博主做了这个KNN和决策树的实验。 一.数据集介绍 介绍一下数据集: 威斯康星州乳腺癌数据集: 威斯康星州乳腺癌数据集(Wisconsin Breast Cancer Dataset)是一个经典的机器学习数…...
【python】计算水仙花数
【python】计算水仙花数 "水仙花数"是指一个3位数,它的三个位上的数字的3次幂之和等于它本身。例如,"153"就是一个水仙花数,因为1^3 5^3 3^3 153。以下是一个Python代码示例,用于计算并打印出所有的三位数…...
二、Flask会话技术和模板语言
Cookie Session # views.py: 路由 视图函数 import datetimefrom flask import Blueprint, render_template, request, redirect, session from .models import *# 蓝图 blue Blueprint(user, __name__)# 首页 可以写两个路由,都是访问同一个函数 blue.route(/) b…...
qt-C++笔记之QProcess声明在堆上和声明在栈上对进程执行是否异步的影响
qt-C笔记之QProcess声明在堆上和声明在栈上对进程执行是否异步的影响 —— 2024-04-13 code review! 文章目录 qt-C笔记之QProcess声明在堆上和声明在栈上对进程执行是否异步的影响1.结论2.关于异步执行在堆上声明 QProcess在栈上声明 QProcess 3.waitForFinished详解函数原…...
使用go和消息队列优化投票功能
文章目录 1、优化方案与主要实现代码1.1、原系统的技术架构1.2、新系统的技术架构1.3、查看和投票接口实现1.4、数据入库MySQL协程实现1.5、路由配置1.6、启动程序入口实现 2、压测结果2.1、设置Jmeter线程组2.2、Jmeter聚合报告结果,支持11240/秒吞吐量2.3、Jmeter…...
文心一言VSchatGPT4
文心一言和GPT-4各有优势,具体表现在不同的测试场景下。 在某些测试场景中心一言的表现优于GPT-4,例如在故事的完整度和情节吸引力方面,文心一言表现得更加符合指令,情节更吸引人。这可能得益于其模型在训练时对中文语境的深入理…...
Ubuntu无网络标识的解决方法
1.出现的情况的特点 2.解决办法 2.1 进入root并输入密码 sudo su 2.2 更新NetworkManager的配置 得先有gedit或者vim,两个随意一个,这里用的gedit,没有就先弄gedit,有的话直接下一步 apt-get install gedit 或者vim apt-get ins…...
深入挖掘C语言 ---- 文件操作
目录 1. 文件的打开和关闭1.1 流和标准流1.1.1流1.1.2标准流 1.2 文件指针1.3 文件的打开和关闭 2. 顺序读写3. 随机读写3.1 fseek3.2 ftell3.3 rewind 4. 读取结束判定 正文开始 1. 文件的打开和关闭 1.1 流和标准流 1.1.1流 我们程序的数据需要输出到各种外部设备, 也需要…...
【C语言】【数据结构】项目实践——贪吃蛇游戏(超详细)
前言 本篇博客我们来实现一个小游戏项目——贪吃蛇,相信肯定很多人都玩过,那么整个贪吃蛇是怎么实现出来的那,这个项目用到了很多方面的知识:C语言函数、枚举、结构体、动态内存管理、预处理指令、链表、Win32 API等。我们就通过这…...
前端正则表达式js和测试工具
一、校验数字的表达式 1. 数字:^[0-9]*$2. n位的数字:^\d{n}$3. 至少n位的数字:^\d{n,}$4. m-n位的数字:^\d{m,n}$5. 零和非零开头的数字:^(0|[1-9][0-9]*)$6. 非零开头的最多带两位小数的数字:^([1-9][0-9…...
P8715 [蓝桥杯 2020 省 AB2] 子串分值 (双边检测)
# [蓝桥杯 2020 省 AB2] 子串分值 ## 题目描述 对于一个字符串 $S$, 我们定义 $S$ 的分值 $f(S)$ 为 $S$ 中恰好出现一次的字符个数。例如 $f\left({ }^{\prime \prime} \mathrm{aba}{ }^{\prime \prime}\right)1$,$f\left({ }^{\prime \prime} \mathrm{abc}{ }^{…...
Scala 03 —— Scala Puzzle 拓展
Scala 03 —— Scala Puzzle 拓展 文章目录 Scala 03 —— Scala Puzzle 拓展一、占位符二、模式匹配的变量和常量模式三、继承 成员声明的位置结果初始化顺序分析BMember 类BConstructor 类 四、缺省初始值与重载五、Scala的集合操作和集合类型保持一致性第一部分代码解释第二…...
springboot+vue全栈开发【3.前端篇之Vue基础语法1】
目录 前言Vue基础语法1.内容渲染指令2.属性绑定指令3.使用JavaScript表达式 前言 hi,这个系列是我自学开发的笔记,适合具有一定编程基础(html、css那些基础知识要会!)的同学,有问题及时指正! …...
武汉星起航:上海股权中心成功挂牌,创始人张振邦领航跨境新纪元
在金秋十月的尾声,上海股权托管交易中心迎来了一场备受瞩目的盛事。2023年10月30日,武汉星起航电子商务有限公司成功挂牌展示,正式登录资本市场,开启了一段崭新的发展篇章。这一里程碑式的跨越,不仅标志着武汉星起航在…...
find和grep查找搜索命令常用的一些使用方式
目录 find和grep查找搜索命令常用的一些使用方式 一、find命令 二、grep命令 find和grep查找搜索命令常用的一些使用方式 一、find命令 我们知道在Windows系统中想要搜索查找文件,一般需要满足两个条件: 1、知道在哪些目录中查找 2、知道查找的内容&…...
Spring Cloud学习笔记:Eureka集群搭建样例
这是本人学习的总结,主要学习资料如下 - 马士兵教育 1、项目架构2、Dependency3、项目启动类4、application.yml5、启动项目 1、项目架构 因为这是单机模拟集群搭建,为了方便管理就都放在了一个项目中。这次准备搭建三个项目server1, server2, server3 …...
js实现抽奖效果
<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>随机抽奖</title> </head> <body>…...
现代化个人博客系统 ModStartBlog v9.3.0 支持Laravel 9
ModStart 是一个基于 Laravel 模块化极速开发框架。模块市场拥有丰富的功能应用,支持后台一键快速安装,让开发者能快的实现业务功能开发。 系统完全开源,基于 Apache 2.0 开源协议。 功能特性 丰富的模块市场,后台一键快速安装 …...
剪辑师创作必备声音素材,BGM背景音效素材合集1万款
一、素材描述 本套音效包含了全面丰富的声音效果,如动物、运输、人群、天气、航空、军事、Foley声音等,以及世界各地的场景声效等,可能是同类音效中最为全面的,共由三套声音素材组合而成,1、熊猫背景音乐3800首&#…...
Spring Security实现用户认证一:简单示例
Spring Security实现用户认证一:简单示例 1 原理1.1 用户认证怎么进行和保存的?认证流程SecurityContext保存 2 创建简单的登录认证示例2.1 pom.xml依赖添加2.2 application.yaml配置2.3 创建WebSecurityConfig配置类2.4 测试 1 原理 Spring Security是…...
Vue的学习 —— <网络请求库Axios>
目录 前言 正文 一、Axios基本概念 二、安装Axios 三、Axios使用方法 四、向服务器发送请求 前言 在之前的开发案例中,我们通常直接在组件中定义数据。但在实际的项目开发中,我们需要从服务器获取数据。当其他用户希望访问我们自己编写的网页时&a…...
详细分析Python中的win32com(附Demo)
目录 前言1. 基本知识2. Excel3. Word 前言 对于自动化RPA比较火热,相应的库也比较多,此文分析win32com这个库,用于操作office 1. 基本知识 Win32com 是一个 Python 模块,是 pywin32 扩展的一部分,允许 Python 代码…...
【scikit-learn005】支持向量机(Support Vector Machines, SVM)ML模型实战及经验总结(更新中)
1.一直以来想写下基于scikit-learn训练AI算法的系列文章,作为较火的机器学习框架,也是日常项目开发中常用的一款工具,最近刚好挤时间梳理、总结下这块儿的知识体系。 2.熟悉、梳理、总结下scikit-learn框架支持向量机(Support Vec…...
高斯分布应用;高斯分布和高斯核有什么;正态分布的具体应用举例说明
目录 高斯分布应用 高斯分布和高斯核有什么 正态分布的具体应用举例说明 高斯分布应用...
Sam Blackshear谈Move如何赋能开发者
Move编程语言提供了直观的编码体验,让开发者能够快速上手。Mysten Labs的联合创始人兼CTO Sam Blackshear创建了Move,这是一种用于编写智能合约的语言,更像传统编程语言,如JavaScript或Rust。 https://youtu.be/iYe_hG8Mzx8 视频…...
AI绘画原理及工具介绍
市面上的AI绘画工具是运用人工智能技术来辅助或自动完成绘画创作的工具。这些工具依托于深度学习和图像处理技术,能够学习和模仿人类绘画的风格和技巧,从而生成具有艺术感的图像。以下是关于市面上AI绘画工具的详细介绍: 一、原理 数据收集…...
EIP-4844对Polygon的意义
1. 引言 Dencun 升级引入了L2新资源,并降低了与calldata相关的交易手续费。 本文要点为: EIP-4844 引入了 blobspace —— 一种用于高效管理大型二进制对象 (large binary objects,BLOB) 的数据库存储概念。Blobs 将降低rollups的交易成本…...
树莓派3B+入门(无外设)
昨日刚到一块树莓派3B,甚是喜爱,然半宿未眠 1、下载 在官网先下载烧录文件https://www.raspberrypi.com/software/ 下载完毕打开,选择,根据自己板子型号定 操作系统用最新的就行,64位不太稳定 储存卡,需…...
JVM运行时内存:虚拟机栈
文章目录 1. 概述2. 栈针3. 栈针内部结构3.1 局部变量表3.2 操作数栈3.3 动态链接3.4 方法返回地址3.5 一些附加信息 运行时内存整体结构如下图所示: 1. 概述 如何理解栈管运行,堆管存储? 角度一:GC;OOM角度二:栈、堆执行效率角…...
STM32 HAL TM1638读取24个按键
本文分享一下天微电子的另一款数码管按键驱动芯片TM1638的单片机C语言驱动程序。 笔者采用的MCU是STM32单片机,STM32CubeMX Keil5开发,使用了HAL库。 一、TM1638介绍 1、基础信息 TM1638属于一款LED驱动控制专用电路,其特性如下…...