uni-app 基础--uni-app 介绍

1. uni-app 介绍

1.1 什么是uni-app

https://uniapp.dcloud.io/README

uni-app 是一个使用Vue.js 开发所有前端应用的框架。开发者编写一套代码，可发布到IOS，Android,H5，以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。

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

1.2 为什么要学习uni-app

为什么要学习uni-app：相对开发者来说，减少了学习成本

1.3 环境搭建

1.安装编辑器HbuilderX,HbuilderX 是通用的前端开发工具，但为uni-app做了特别强化。下载App 开发版开箱即用

2.安装微信开发者工具

1.4 利用HbuilderX 初始化项目

点击HbuilderX 菜单栏文件 -> 新建 -> 项目

选择uni-app类型，输入工程名，选择模板，点击创建，即可成功创建

创建uni-app 项目

1.5 运行项目

1.浏览器运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到浏览器 -> 选择浏览器，即可在浏览器里面体验uni-app 的 H5 版。

浏览器运行项目

2.真机运行：连接手机，开启USB调试，进入hello-uniapp项目，点击工具栏的运行 -> 真机运行 -> 选择运行的设备，即可在该设备里面体验uni-app。

如手机无法识别，请点击菜单运行-运行到手机或模拟器-真机运行常见故障排查指南。 注意目前开发App也需要安装微信开发者工具

真机运行项目

3.在微信开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具，即可在微信开发者工具里面体验uni-app。

注意：如果是第一次使用，需要先配置小程序ide的相关路径，才能运行成功。如下图，需在输入框输入微信开发者工具的安装路径。 若HBuilderX不能正常启动微信开发者工具，需要开发者手动启动，然后将uni-app生成小程序工程的路径拷贝到微信开发者工具里面，在HBuilderX里面开发，在微信开发者工具里面就可看到实时的效果。

小程序运行项目

1.6 介绍项目目录和文件作用

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

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

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

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

uni.scss 文件时为了方面整理控制应用的风格。比如按钮颜色，边框风格，uni.scss 文件预制了一批scss 变量

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

pages 所有的页面存放目录

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

components 组件存放目录

目录结构

1.7 开发规范

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

页面文件遵循 Vue 单文件组件 (SFC) 规范

组件标签靠近小程序规范，详见uni-app 组件规范

接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见uni-app接口规范

数据绑定及事件处理同 Vue.js 规范，同时补充了App及页面的生命周期

为兼容多端运行，建议使用flex布局进行开发