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

发布时间:2024年01月22日

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)

文章来源:https://blog.csdn.net/weixin_47075554/article/details/135751218
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。