uni-app的基本使用

1.uni-app介绍

uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架 开发者通过编写 Vue.js 代码，uni-app 将其编译到 iOS、Android、微信小程序、支付宝小程序、百度小程序、H5等多个平台，保证其正确运行并达到优秀体验。

2.为什么要学习uni-app?

相对开发者来说，减少学习成本，因为只学会uni-app之后，即可开发出 iQs,Android,H5,以及各种小程序的应用，不需要再去学习开发其他应用的框架，相对公司而言，也大大减少了开发成本

3.环境搭建

安装编辑器HbuilderX HbuilderX是通用的前端开发工具，但为uni-app做了特别优化

打开HbuilderX之后会有这个页面打开我点的箭头

打开之后点击下载即可 下载完以后是一个压缩包 这时我们需要把他解压

这就是加压以后打开的文件夹啦

4.初始化项目

利用HbuilderX初始化项目

• 点击HbuilderX菜单栏文件>项目>新建
• 选择uni-app,填写项目名称，项目创建的目录
  

5.运行项目

在菜单栏中点击运行，运行到浏览器，选择浏览器即可运行
在微信开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具，即可在微信开发者工具里面体验uni-app
在微信开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到手机或模拟器 -> 选择调式的手机

以上三个都有我们只需要跟着一起操作即可
注意：

• 如果是第一次使用，需要先配置小程序ide的相关路径，才能运行成功
• 微信开发者工具在设置中安全设置，服务端口开启

6.介绍项目目录和文件作用

pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等
manifest.json 文件是应用的配置文件，用于指定应用的名称、图标、权限等。
App.vue是我们的跟组件，所有页面都是在App.vue下进行切换的，是页面入口文件，可以调用应用的生命周期函数。
main.js是我们的项目入口文件，主要作用是初始化vue实例并使用需要的插件。
uni.scss文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。
unpackage就是打包目录，在这里有各个平台的打包文件
pages所有的页面存放目录
static静态资源目录，例如图片等
components组件存放目录

7.全局配置和页面配置

通过globalStyle进行全局配置
用于设置应用的状态栏、导航条、标题、窗口背景色等详细文档

创建新的message页面
右键pages新建message目录，在message目录下右键新建.vue文件,并选择基本模板

<template>
	<view>
		这是信息页面
	</view>
</template>

<script>
</script>

<style>
</style>

通过pages来配置页面

属性	类型	默认值	描述
path	String		配置页面路径
style	Object		配置页面窗口表现，配置项参考 pageStyle

pages数组数组中第一项表示应用启动页

"pages": [ 、
		{
   
			"path":"pages/message/message"
		},
		{
   
			"path": "pages/index/index",
			"style": {
   
				"navigationBarTitleText": "uni-app"
			}
		}
	]```
通过style修改页面的标题和导航栏背景色，并且设置h5下拉刷新的特有样式

```javascript
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
   
			"path":"pages/message/message",
			"style": {
   
				"navigationBarBackgroundColor": "#007AFF",
				"navigationBarTextStyle": "white",
				"enablePullDownRefresh": true,
				"disableScroll": true,
				"h5": {
   
					"pullToRefresh": {
   
						"color": "#007AFF"
					}
				}