#Uniapp：引入fonts目录结构全局样式启动模式全局变量

news2024/11/15 15:24:32

uni-app

运行到微信开发者工具需要注意

  1. 小程序路径需要配置，
  2. 小程序端口需要开启

目录结构

pages // 存放页面

static // 静态资源

uni_modules // 文件夹：用于存放 uniapp 项目的各种依赖文件。

unpackage // 打包文件目录

App.vue  // 根组件

main.js // 入口文件

manifest.js // 应用配置文件

pages.json // 页面配置文件

uni.scss  // 内置样式文件

开发规范

遵循vue和小程序混合

全局配置样式

全局 pages.json
"globalStyle": {

}
局部的样式会覆盖全局的样式

https://uniapp.dcloud.net.cn/collocation/pages#style

          {
              "path": "pages/message/message",
			"style": {
				"navigationBarTitleText": "message",
				"navigationBarBackgroundColor": "#00ff00",
				"h5": {
					"titleNView": {
						"backgroundColor": "#aa0000"
					}
				}
			}
              
          }

可以单独设置h5的样式

tabBar

  • tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。

condition启动模式

启动模式配置，仅开发期间生效，用于模拟直达页面的场景，如：小程序转发后，用户点击所打开的页面。

	"condition": { //模式配置，仅开发期间生效
		"current": 0, //当前激活的模式（list 的索引项）
		"list": [{
			"name": "detail", //模式名称
			"path": "pages/detail/detail", //启动页面，必选
			"query": "interval=400" //启动参数，在页面的onLoad函数里面得到。
		}]
	},

text组件

是否可选selectable

space 连续空格

view

hover-class 按下去激活的样式

属性名类型默认值说明
hover-classStringnone指定按下去的样式类。当 hover-class=“none” 时，没有点击态效果
hover-stop-propagationBooleanfalse指定是否阻止本节点的祖先节点出现点击态，App、H5、支付宝小程序、百度小程序不支持（支付宝小程序、百度小程序文档中都有此属性，实测未支持）
hover-start-timeNumber50按住后多久出现点击态，单位毫秒
hover-stay-timeNumber400手指松开后点击态保留时间，单位毫秒
button

常用

size

type

pain

disabled

hover-class

属性说明
属性名类型默认值说明生效时机平台差异说明
sizeStringdefault按钮的大小
typeStringdefault按钮的样式类型
plainBooleanfalse按钮是否镂空，背景色透明
disabledBooleanfalse是否禁用
loadingBooleanfalse名称前是否带 loading 图标H5、App(App-nvue 平台，在 ios 上为雪花，Android上为圆圈)
form-typeString用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件
open-typeString开放能力
hover-classStringbutton-hover指定按钮按下去的样式类。当 hover-class=“none” 时，没有点击态效果App-nvue 平台暂不支持
hover-start-timeNumber20按住后多久出现点击态，单位毫秒
hover-stay-timeNumber70手指松开后点击态保留时间，单位毫秒
app-parameterString打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效微信小程序、QQ小程序
hover-stop-propagationbooleanfalse指定是否阻止本节点的祖先节点出现点击态微信小程序
langstring‘en’指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。微信小程序
session-fromstring会话来源，open-type="contact"时有效微信小程序
send-message-titlestring当前标题会话内消息卡片标题，open-type="contact"时有效微信小程序
send-message-pathstring当前分享路径会话内消息卡片点击跳转小程序路径，open-type="contact"时有效微信小程序
send-message-imgstring截图会话内消息卡片图片，open-type="contact"时有效微信小程序
show-message-cardbooleanfalse是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效微信小程序
group-idString打开群资料卡时，传递的群号open-type=“openGroupProfile”QQ小程序
guild-idString打开频道页面时，传递的频道号open-type=“openGuildProfile”QQ小程序
public-idString打开公众号资料卡时，传递的号码open-type=“openPublicProfile”QQ小程序
data-im-idString客服的抖音号open-type=“im”抖音小程序2.68.0版本+
data-im-typeStringIM卡片类型open-type=“im”抖音小程序2.80.0版本+
data-goods-idString商品的id，仅支持泛知识课程库和生活服务商品库中的商品open-type=“im”抖音小程序2.80.0版本+
data-order-idString订单的id，仅支持交易2.0订单open-type=“im”抖音小程序2.80.0版本+
data-biz-lineString商品类型，“1”代表生活服务，“2”代表泛知识。open-type=“im”抖音小程序2.80.0版本+
@getphonenumberHandler获取用户手机号回调open-type=“getPhoneNumber”微信、支付宝、百度、抖音、快手、京东小程序
@getuserinfoHandler用户点击该按钮时，会返回获取到的用户信息，从返回参数的detail中获取到的值同uni.getUserInfoopen-type=“getUserInfo”微信、QQ、百度、快手、京东小程序
@errorHandler当使用开放能力时，发生错误的回调open-type=“launchApp”微信、QQ、快手、京东小程序
@opensettingHandler在打开授权设置页并关闭后回调open-type=“openSetting”微信、QQ、百度、快手、京东小程序
@launchappHandler从小程序打开 App 成功的回调open-type=“launchApp”微信、QQ、快手、京东小程序
@contactHandler客服消息回调open-type=“contact”微信、QQ、百度、快手小程序
@chooseavatarHandler获取用户头像回调open-type=“chooseAvatar”微信小程序
@agreeprivacyauthorizationHandler用户同意隐私协议事件回调，open-type="agreePrivacyAuthorization"时有效open-type=“agreeprivacyauthorization”微信小程序2.33.0
@addgroupappHandler添加群应用的回调open-type=“addGroupApp”QQ小程序
@chooseaddressHandler调起用户编辑并选择收货地址的回调open-type=“chooseAddress”百度小程序
@chooseinvoicetitleHandler用户选择发票抬头的回调open-type=“chooseInvoiceTitle”百度小程序
@subscribeHandler订阅消息授权回调open-type=“subscribe”百度小程序
@loginHandler登录回调open-type=“login”百度小程序
@imHandler监听跳转IM的成功回调open-type=“im”抖音小程序2.68.0版本+

image

有默认的宽高 320px 240px

mode的属于

scaleToFill

不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素

aspectFit

保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。

aspectFill

保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。

样式问题

注意在 uni-app 中不能使用 * 选择器。

目前支持的选择器有：

选择器
选择器样例样例描述
.class.intro选择所有拥有 class=“intro” 的组件
#id#firstname选择拥有 id=“firstname” 的组件
elementview选择所有 view 组件
element, elementview, checkbox选择所有文档的 view 组件和所有的 checkbox 组件
::afterview::after在 view 组件后边插入内容，仅 vue 页面生效
::beforeview::before在 view 组件前边插入内容，仅 vue 页面生效
uni-app 提供内置 CSS 变量
CSS 变量描述App小程序H5
–status-bar-height系统状态栏高度系统状态栏高度、nvue 注意见下25px0
–window-top内容区域距离顶部的距离00NavigationBar 的高度
–window-bottom内容区域距离底部的距离00TabBar 的高度

字体图标

阿里矢量图标库

字体文件的引用路径推荐使用以 ~@ 开头的绝对路径

@font-face {
	font-family: test1-icon;
	src: url('~@/static/iconfont.ttf');
}

<style>
	@import url("~@/static/fonts/iconfont.css");
	/*每个页面公共css */

	.c-rpx {
		background: #aa0000;
	}
</style>

scss

要使用先安装插件scss

uni.scss里面是变量可以全局使用

引用示例

.text {
			color: $uni-color-primary;
		}

事件

可以的传递事件 和 自定义参数

@click($event,params)

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Unity动画桢事件

Unity动画桢事件

1&#xff0c;使用原因 在新项目内部审核的时候&#xff0c;说什么动画节奏不匹配&#xff0c;所以决定用动画桢事件来处理技能释放。当释放技能的时候&#xff0c;先播放技能动画&#xff0c;然后再动画桢所在的时间戳执行技能的逻辑。 2&#xff0c;具体实现 1&#xff0c;…
阅读更多...
gin中使用限流中间件

gin中使用限流中间件

限流又称为流量控制&#xff08;流控&#xff09;&#xff0c;通常是指限制到达系统的并发请求数&#xff0c;本文列举了常见的限流策略&#xff0c;并以gin框架为例演示了如何为项目添加限流组件。 限流 限流又称为流量控制&#xff08;流控&#xff09;&#xff0c;通常是指…
阅读更多...
【前端基础--4】

【前端基础--4】

定位属性 position 可以将元素定位到你想要放到位置&#xff0c;使用方位值来进行移动(top,left,right,bottom)。 1.相对定位 position: relative; top: 20px; left: 20px; 以自身为定点进行移动&#xff0c;不会脱离文档流。 不会影响元素本身的性质&#xff1b;块级…
阅读更多...
Kali如何启动SSH服务并实现无公网ip环境远程连接

Kali如何启动SSH服务并实现无公网ip环境远程连接

文章目录 1. 启动kali ssh 服务2. kali 安装cpolar 内网穿透3. 配置kali ssh公网地址4. 远程连接5. 固定连接SSH公网地址6. SSH固定地址连接测试 简单几步通过[cpolar 内网穿透](cpolar官网-安全的内网穿透工具 | 无需公网ip | 远程访问 | 搭建网站)软件实现ssh 远程连接kali! …
阅读更多...
谷歌公布一个可以让 AI 进行自我判断输出内容正确性的模型训练框架 ASPIRE

谷歌公布一个可以让 AI 进行自我判断输出内容正确性的模型训练框架 ASPIRE

谷歌开发了一款名为 ASPIRE 的训练框架&#xff0c;旨在增强人工智能&#xff08;AI&#xff09;模型的选择性预测能力。这款框架为模型引入了 “可信度” 机制&#xff0c;即模型会输出一系列答案&#xff0c;并为每个答案赋予一个正确概率评分。通过这种方式&#xff0c;ASPI…
阅读更多...
鲜花商城，Java项目、前端vue

鲜花商城，Java项目、前端vue

系统架构 后台&#xff1a; SpringBoot Mybatis-plus Mybatis Hutool工具包 lombok插件 前台&#xff1a;Vue Vue Router ELementUI Axios 系统简介 功能&#xff1a;首页推荐&#xff08;默认根据用户买过的商品进行推荐&#xff0c;如果没买过则根据商品销量推荐&…
阅读更多...
Sybase PowerDesigner15安装配置

Sybase PowerDesigner15安装配置

1，软件介绍 ​ Power Designer 是Sybase公司的CASE工具集，使用它可以方便地对管理信息系统进行分析设计，他几乎包括了数据库模型设计的全过程。利用Power Designer可以制作数据流程图、概念数据模型、物理数据模型，还可以为数据仓库制作结构模型，也能对团队设计模型进行控…
阅读更多...
RocketMQ源码阅读-十-事务消息

RocketMQ源码阅读-十-事务消息

RocketMQ源码阅读-十-事务消息 交互流程事务消息发送Producer发送事务消息Broker处理结束事务请求Broker 生成 ConsumeQueue 事务消息回查Broker发起回查Producer 接收回查 总结 交互流程 事务消息交互流程图如下&#xff1a;事务消息发送步骤如下&#xff1a; 生产者将半事务…
阅读更多...
redis-持久化-1

redis-持久化-1

Redis 提供了2个不同形式的持久化方式。 RDB&#xff08;Redis DataBase&#xff09; AOF&#xff08;Append Of File&#xff09; 一、Redis持久化之RDB 1.什么是RDB 在指定的时间间隔内将内存中的数据集快照写入磁盘&#xff0c; 也就是行话讲的Snapshot快照&#xff0c…
阅读更多...
爬虫是什么 怎么预防

爬虫是什么 怎么预防

爬虫是一种自动化程序&#xff0c;用于从网页或网站中提取数据。它们通过模拟人类用户的行为&#xff0c;发送HTTP请求并解析响应&#xff0c;以获取所需的信息。 爬虫可以用于各种合法用途&#xff0c;如搜索引擎索引、数据采集和监测等。然而&#xff0c;有些爬虫可能是恶意的…
阅读更多...
HarmonyOS4.0系统性深入开发26方舟开发框架（ArkUI）概述

HarmonyOS4.0系统性深入开发26方舟开发框架（ArkUI）概述

方舟开发框架&#xff08;ArkUI&#xff09;概述 方舟开发框架&#xff08;简称ArkUI&#xff09;为HarmonyOS应用的UI开发提供了完整的基础设施&#xff0c;包括简洁的UI语法、丰富的UI功能&#xff08;组件、布局、动画以及交互事件&#xff09;&#xff0c;以及实时界面预览…
阅读更多...
低代码是软件开发的未来吗？

低代码是软件开发的未来吗？

一、前言 低代码开发是近年来在网络开发领域备受关注的一个趋势。低代码开发是指使用最少的编程代码来开发应用程序或业务逻辑&#xff0c;这使得即使是没有IT或编程经验的初学者也能快速创建所需的功能。 虽然低代码开发还没有威胁到传统开发者的角色&#xff0c;但不可否认的…
阅读更多...
【嵌入式学习】C++QT-Day2-C++基础

【嵌入式学习】C++QT-Day2-C++基础

笔记 见我的博客&#xff1a;https://lingjun.life/wiki/EmbeddedNote/19Cpp 作业 自己封装一个矩形类(Rect)&#xff0c;拥有私有属性:宽度(width)、高度(height)&#xff0c; 定义公有成员函数: 初始化函数:void init(int w, int h) 更改宽度的函数:set_w(int w) 更改高度…
阅读更多...
Nginx日志检测分析工具 - WGCLOUD

Nginx日志检测分析工具 - WGCLOUD

WGCLOUD可以对Nginx的日志文件进行全面分析&#xff0c;包括IP、sql注入攻击、搜索引擎蜘蛛爬取记录、HTTP响应状态码、访问量最高的IP统计、扫描攻击统计等 效果如下图
阅读更多...
前端学习：HTTP协议、请求响应、分层解耦

前端学习：HTTP协议、请求响应、分层解耦

HTTP协议 HTTP-概述 HTTP&#xff1a;Hyper Text Transfer Protocol(超文本传输协议)&#xff0c;规定了浏览器与服务器之间数据传输的规则。如果想知道http协议的数据传输格式有哪些&#xff0c;可以打开浏览器&#xff0c;点击 F12 打开开发者工具&#xff0c;点击Network 来…
阅读更多...
国民技术N32G430C8开发笔记一-新建IAR工程

国民技术N32G430C8开发笔记一-新建IAR工程

一、创建IAR工程 1、新建工程&#xff0c;保存到project文件夹。 2、添加SDK到工程。 根据原厂SDK的文件结构在IAR新建相应分组&#xff0c;把各个文件夹的文件加载进去&#xff0c;其中startup文件选择IAR平台的startup_n32g430_EWARM.s。 3、添加头文件路径&#xff0…
阅读更多...
springboot124中药实验管理系统设计与实现

springboot124中药实验管理系统设计与实现

简介 【毕设源码推荐 javaweb 项目】基于springbootvue 的中药实验管理系统设计与实现 适用于计算机类毕业设计&#xff0c;课程设计参考与学习用途。仅供学习参考&#xff0c; 不得用于商业或者非法用途&#xff0c;否则&#xff0c;一切后果请用户自负。 看运行截图看 第五章…
阅读更多...
Java 枚举和注解

Java 枚举和注解

一、枚举类 把具体的对象一个一个例举出来的类就称为枚举类 枚举对应英文(enumeration, 简写 enum)枚举是一组常量的集合。可以这里理解&#xff1a;枚举属于一种特殊的类&#xff0c;里面只包含一组有限的特定的对象。 1.实现方式1——自定义类实现枚举 public class Enume…
阅读更多...
HarmonyOS 讨论一下 TextInput的inputFilter正则表达式解决方案

HarmonyOS 讨论一下 TextInput的inputFilter正则表达式解决方案

我们 TextInput组件中有这样一个属性 inputFilter 按官方文档的描述 它有两个行参 第一个是字符串类型的 就是 正则表达式 你要怎么去匹配内容 然后 第二个是一个函数 它可以接到一个行参 如果错误时 第二个参数的方法才会执行 行参字符串类型输出被过滤的无效内容 我们可以这…
阅读更多...
力扣hot100 两数相加 链表 思维

力扣hot100 两数相加 链表 思维

Problem: 2. 两数相加 Code ⏰ 时间复杂度: O ( n ) O(n) O(n) &#x1f30e; 空间复杂度: O ( n ) O(n) O(n) /*** Definition for singly-linked list.* public class ListNode {* int val;* ListNode next;* ListNode() {}* ListNode(int val) { this.…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023