用uni-app 编写app 一

最新推荐文章于 2024-03-18 10:01:58 发布

左丘梦凡

最新推荐文章于 2024-03-18 10:01:58 发布

阅读量284

点赞数

分类专栏： uni-app 文章标签： uni-app javascript vue.js

本文链接：https://blog.csdn.net/qq_36874755/article/details/128224921

版权

uni-app 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

uni-app官网地址

新建项目

打开HBuilderX,新建项目，选择nui-app，选择默认模版
项目目录

pages 存放业务页面
static 存放应用引用的本地资源（如图片等）的目录
unpackage 非工程代码，一般存放运行或发行编译结果
app.vue 应用配置，用来配置app全局样式以及监听应用生命周期
main.js Vue 初始化入口文件
manifest.json 配置应用名称、appid，logo，版本等打包信息
pages.json 配置页面路由、导航条、选项卡等页面类信息
nui.scss uni-app内置的常用样式变量

创建页面

选中pages目录，新建vue文件
打开pages.json ,在pages 中添加页面
配置page的参数

path 页面的路径
style 页面窗口配置

style的参数

navigationBarTitleText 导航栏标题文字内容，传空字符串，
backgroundColor 窗口的背景色
navigationBarTextStyle 导航栏标题颜色及状态栏前景颜色默认white，black、white可选
app-plus 中的titleNView为false时不显示titleBar，为沉浸式，不写默认有titleBar

创建首页tabbar

打开pages.json ,在pages 后面添加"tabBar":{}.tab最少2个，最多5个
tabBar属性

color: tabbar 文字默认颜色
selectedColor 选中的tab文字颜色
list 是个tab集合此tab对象包括 pagePath 选中时页面的路径、iconPath 默认的icon、selectedIconPath 选中时的icon、text tab中的文字
backgroundColor tabbar的背景颜色
borderStyle tabbar 上边框的颜色，可选black、white
fontSize 文字大小，默认10px
iconWidth 图标默认宽度，默认24px
height tabbar高度，默认50px

pages.json 代码示例

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页",
				"app-plus": {
					"titleNView": false
				}
			}
		},{
			"path": "pages/info/info",
			"style": {
				"navigationBarTitleText": "资讯"
			}
		},{
			"path": "pages/service/service",
			"style": {
				"navigationBarTitleText": "服务"
			}
		},{
			"path": "pages/mine/mine",
			"style": {
				"navigationBarTitleText": "我的",
				"app-plus": {
					"titleNView": false
				}
			}
		}
	],
	"tabBar": {
		"color": "#000000",
		"selectedColor": "#005C99",
		"borderStyle": "black",
		"backgroundColor": "#FFFFFF",
		"list": [{
			"pagePath": "pages/index/index",
			"iconPath": "static/icon/icon_bar_home_normal.png",
			"selectedIconPath": "static/icon/icon_bar_home_selected.png",
			"text": "首页"
		}, {
			"pagePath": "pages/info/info",
			"iconPath": "static/icon/icon_bar_news_normal.png",
			"selectedIconPath": "static/icon/icon_bar_news_selected.png",
			"text": "资讯"
		}, {
			"pagePath": "pages/service/service",
			"iconPath": "static/icon/icon_home_service_def.png",
			"selectedIconPath": "static/icon/icon_home_service.png",
			"text": "服务"
		}, {
			"pagePath": "pages/mine/mine",
			"iconPath": "static/icon/icon_bar_me_normal.png",
			"selectedIconPath": "static/icon/icon_bar_me_selected.png",
			"text": "我的"
		}]
	},
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"uniIdRouter": {}
}