uni-app的简介

        uni-app是一个使用Vue.js开发跨平台应用的前端框架。开发者通过编写Vue.js代码，uni-app将其编译到iOS、Android、微信小程序等多个平台，保证其正确运行并达到优秀体验。uni-app继承自Vue.js,提供了完整的Vue.js开发体验。 uni-app组件规范和扩展api与微信小程序基本相同。 有一定Vue.js和微信小程序开发经验的开发者可快速上手uni-app,开发出兼容多端的应用。

uni-app官方文档地址： https://uniapp.dcloud.net.cn/

一、开发环境搭建

1、下载开发工具HBuilderX

        HBuilderX是通用的前端开发工具，它为uni-app做了特别强化。

        下载地址：https://www.dcloud.io/hbuilderx.html

2、创建uni-app项目

        打开HBuilderX，文件 → 新建 → 项目 → 选择uni-app项目，输入项目名进行创建。

3、运行uni-app项目

        运行方式：浏览器运行、真机运行、小程序运行等方式。

4、发布uni-app项目

        发布方式：云端原生APP、离线原生APP、H5、各种小程序。

二、工程目录结构 

三、uni-app相关配置

1、应用配置manifest.json

        manifest.json文件是uni-app项目中用来配置应用信息的重要文件。通过修改manifest.json文件，开发者可以配置应用的名称、图标、启动页面、权限等信息。manifest.json文件位于项目的根目录下。

2、编译配置vue.config.js

        vue.config.js是一个可选的配置文件，如果项目的根目录中存在这个文件，那么它会被自动加载，一般用于配置webpack等编译选项。

3、全局配置pages.json

         pages.json文件是uni-app项目中用来配置页面路由的文件，它决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar等。

4、全局样式uni.scss

        uni.scss是一个特殊文件，在代码中无需 import 这个文件即可在scss代码中使用这里的样式变量。uni-app的编译器在webpack配置中特殊处理了这个uni.scss,使得每个scss文件都被注入这个uni.scss,达到全局可用的效果。 

5、主组件App.vue

        App.vue是uni-app的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件。但App.vue本身不是页面，这里不能编写视图元素。这个文件的作用包括：调用应用生命周期函数、配置全局样式、配置全局的存储globalData等。

6、入口文件main.js

        main.js是uni-app的入口文件，主要作用是初始化vue实例、定义全局组件、使用需要的插件如vuex。  

四、开发规范

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

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

五 、资源路径

        在uni-app中，可以使用相对路径或绝对路径引入静态资源。推荐使用绝对路径！

相对路径：./static/logo.png

绝对路径：

• /static/logo.png
• @/static/logo.png

注意：在普通项目中@指向项目根目录，在cli项目中@指向src目录。