uniapp介绍

uniapp介绍

uni-app是一个使用Vue.js开发所有前端应用的框架,开发者编写一套代码便可发布到多个平台

uni-app的优势:

1. 开发者/案例数量多,跨端完善度更高,真正落地的提高生产力
2. 平台能力不受限,支持原生代码混写和原生sdk集成
3. 性能体验优秀,App端支持原生渲染，可支撑更流畅的用户体验。小程序端的性能优于市场其他框架。
4. 周边生态丰富,微信生态的各种sdk可直接用于跨平台App
5. 学习成本低,基于通用的前端技术栈，采用vue语法+微信小程序api，无额外学习成本
6. 开发成本低,HBuilderX是高效开发神器，熟练掌握后研发效率至少翻倍
   HBuilderX下载网址
   
   

基本目录介绍:
pages: 业务页面文件存放的目录
static: 存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
unpackage: 非工程代码，一般存放运行或发行的编译结果
main.js: Vue初始化入口文件
App.vue: 应用配置，用来配置App全局样式以及监听 应用生命周期
manifest.json: 配置应用名称、appid、logo、版本等打包信息
pages.json: 配置页面路由、导航条、选项卡等页面类信息

pages.json 页面路由

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

主要配置项列表

1.pages

uni-app 通过 pages 节点配置应用由哪些页面组成，pages 节点接收一个数组，数组每个项都是一个对象，其属性值如下：
path:配置页面路径
style:配置页面窗口表现

Tips：

• pages节点的第一项为应用入口页（即首页）
• 应用中新增/减少页面，都需要对 pages 数组进行修改
• 文件名不需要写后缀，框架会自动寻找路径下的页面资源

{
  "pages": [{
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",//设置页面标题文字
        "enablePullDownRefresh":true//开启下拉刷新
      }
    },
    ...
  ]
}

2. tabBar

如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定一级导航栏，以及 tab 切换时显示的对应页。
基本属于如下:
color:tab 上的文字默认颜色
selectedColor:tab 上的文字选中时的颜色
backgroundColor:tab 的背景色
borderStyle:tabbar 上边框的颜色，可选值 black/white，也支持其他颜色值
position:可选值 bottom、top
fontSize:文字默认大小
height:tabBar 默认高度
spacing:图标和文字的间距
iconWidth:图标默认宽度（高度等比例缩放）
list:tab 的列表，最少2个、最多5个 tab

list基本属性:
pagePath:页面路径，必须在 pages 中先定义
text:tab 上按钮文字
iconPath:图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 position 为 top 时，此参数无效，不支持网络图片，不支持字体图标
selectedIconPath:选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 >> position 为 top 时，此参数无效
visible:该项是否显示，默认显示
iconfont:字体图标，优先级高于 iconPath

"tabBar": {
		"color": "#7A7E83",
		"selectedColor": "#3cc51f",
		"borderStyle": "black",
		"backgroundColor": "#ffffff",
		"list": [{
			"pagePath": "pages/index/index",
			// "iconPath": "static/image/icon_component.png",
			// "selectedIconPath": "static/image/icon_component_HL.png",
			"text": "首页"
		}, {
			"pagePath": "pages/list/list",
			// "iconPath": "static/image/icon_API.png",
			// "selectedIconPath": "static/image/icon_API_HL.png",
			"text": "列表"
		}]
	},

3. globalStyle

用于设置应用的状态栏、导航条、标题、窗口背景色等。
基本属性:
navigationBarBackgroundColor:导航栏背景颜色（同状态栏背景色）
navigationBarTextStyle:导航栏标题颜色及状态栏前景颜色，仅支持 black/white
navigationBarTitleText:导航栏标题文字内容
backgroundColor:下拉显示出来的窗口的背景色

"globalStyle": {
		"navigationBarTextStyle": "white",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#DD5347",
		"backgroundColor": "#F8F8F8"
	}