uni-app

uni-app

基础使用

介绍

uni-app是一个使用Vue.js开发的所有的前端的应用框架，开发者编写的一套代码，可以发布到iOS、Android、H5、以及各种小程序。

即使不跨端、uni-app同时也是更好的小程序开发框架

环境搭建

安装HbuilderX和小程序开发者工具

创建项目并运行

1、 双击打开 ： HBuilder X

2、 创建项目 ：选择 uni-app(U) —> 填写项目名称 —> 项目路径 —> 确认创建 （创建完毕）

3、运行到浏览器 ：点击 运行 —> 运行到浏览器 —> 选择谷歌浏览器

注意 第一次打开不会成功哦！

让我们解决一下

配置微信小程序

点击 运行 —> 运行到小程序模拟器 —> 选择 **微信开发者工具(W) - ** —> 弹出一个弹窗 —>

将此路径 配置 到 弹窗 里面 —> 配置完成后

配置完成后 并不会成功弹出 微信小程序的模拟器，我们还需要一下操作

打开 微信小程序 —> 点击 设置 —> 点击 安全设置 —> 开启 服务端口 —> 回到 **HBuilder ** —> 点击 运行 —> 运行到小程序模拟器 停止一下再重新运行一次 —>就成功了 完毕

项目目录

pages. json 文件用来对uni-app进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar "等

manifest.json 文件是应用的配置文件，用于指定应用的名称、图标、权限等。

App.vue 是我们的跟组件，所有页面都是在 App.vue下进行切换的，是页面入口文件，可以调用应用的生命周期函数。

main.js 是我们的项目入口文件，主要作用是初始化vue 实例并使用需要的插件。

uni.scss 文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。

unpackage 就是打包目录，在这里有各个平台的打包文件

pages 所有的页面存放目录

static 静态资源目录，例如图片等

components 组件存放目录

开发规范

为了实现多端兼容，综合考虑编译速度、运行性能等因素，uni-app 约定了如下开发规范：

• 页面文件遵循 Vue 单文件组件 (SFC) 规范
• 组件标签靠近小程序规范，详见uni-app 组件规范
• 接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见uni-app接口规范
• 数据绑定及事件处理同 Vue.js 规范，同时补充了App及页面的生命周期
• 为兼容多端运行，建议使用flex布局进行开发

全局配置和页面配置

pages.json 初始样式

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

pages 是页面配置

globalStyle 是全局配置

页面配置会覆盖全局配置

全局配置（pages.json）

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#F7F7F7	导航栏背景颜色(同状态栏背景色)
navigationBarTextStyle	String	white	导航栏标题颜色及状态栏的前景颜色，仅支持black/white
navigationBarTitleText	String		导航栏标题文字内容
backgroundColor	HexColor	#ffffff	窗口背景色
navigationBarTextText	String	dark	下拉loading的样式，仅支持dark/light
enablePullDownRefresh	Boolean	false	是否开启下拉刷新
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位只支持px

页面配置

创建新项目

在pages文件中新建文件

新建目录 message —> 新建文件 message.vue

在 pages.json 配置

"pages": [ //pages数组中第一项表示应用启动页，参考：ttps://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/message/message"
		}
		{
			"path": "pages/index/index"
		}		
]

注意： pages数组中第一项表示应用启动页，也就是放在数组第一个会在运行的时候被自动显示出来

设置样式

里面用到了 h5（是一个独有的特定的样式）

h5 平台下拉刷新动画，只有circle类型 / 设置 h5 只在里面中影响，不会影响微信小程序的样式

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/message/message",
			"style":{
				"navigationBarTitleText":"信息页",
				"navigationBarBackgroundColor":"#F0AD4E"
			},
			"h5":{
				"pullToRefresh":{
					"color":"#7D26CD"
				}
			}
		},
		{
			"path": "pages/index/index"
		}		
]

配置基本的tabbar

如果应用是一个多tab应用，可以通过tabBar配置项指定tab栏的表现，以及tab切换时显示的对应页。

Tips
1、 当设置position为 top时，将不会显示 icon
2、 tabBar中的list是一个数组，只能配置最少2个、最多5个 tab， tab 按数组的顺序排序。

属性	类型	必填	默认值	描述	平台差异说明
color	HexColor	是		tab上的文字默认颜色
selectedColor	HexColor	是		tab上的文字选中时的颜色
backgroundColor	HexColor	是		tab的背景颜色
borderStyle	String	否	black	tabbar上面边框的演示/仅支持black/white	App 2.3.4+支持其他颜色值
list	Array	是		tab的列表，只能配置最少2个、最多5个 tab
position	String	否	bottom	可选值bottom/top	top值仅支持小程序

代码演示

{
	"pages": [
		{
			"path": "pages/message/message",
			"style":{
				"navigationBarTitleText":"信息页",
				"navigationBarBackgroundColor":"#C4E1FF"
			},
			"h5":{
				"pullToRefresh":{
					"color":"#7D26CD"
				}
			}
		},
		{
			"path": "pages/index/index"
		},
		{
			"path": "pages/contact/contact"
		}		
	],
	"globalStyle": {
		...
	},
	"tabBar":{
		"list":[
			{
				"text":"首页",
				"pagePath":"pages/index/index",
				"iconPath":"static/tabs/shouye.png",
				"selectedIconPath":"static/tabs/shouye2.png"
			},
			{
				"text":"信息",
				"pagePath":"pages/message/message",
				"iconPath":"static/tabs/xinxi.png",
				"selectedIconPath":"static/tabs/xinxi2.png"
			},
			{
				"text":"我的",
				"pagePath":"pages/contact/contact",
				"iconPath":"static/tabs/wd.png",
				"selectedIconPath":"static/tabs/wd2.png"
			}
		]
	}
}

condition启动模式配置

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

属性说明：

属性	类型	是否必填	描述
current	Number	是	当前激活的模式，list节点的索引值
list