uni-app初体验

什么是uni-app？

uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台。 详情点击 uni-app 官方文档
uni-app在跨端数量、扩展能力、性能体验、周边生态、学习成本、开发成本等6大关键指标上拥有极强的竞争优势：

1. 跨端数量更多
2. 平台能力不受限
3. 性能体验更优秀
4. 周边生态丰富
5. 学习成本低
6. 开发成本低

使用 uni-app 的前置条件

不要认为 uni-app 可以跨多端，就感觉开发难度会直线上升。如果说，你开发过小程序，恰好又会 vue， 那么你的学习成本会非常的低。
如果你原生小程序与 vue 都没有接触过的话，我建议你花一些时间，看一看他们的官方文档。再回来学习 uni-app。
官方建议使用==HBuilder==软件，因为模拟运行调试一块，IDE不具备。

创建uni-app项目

1. 在点击工具栏里的文件 -> 新建 -> 项目：
   
2. 选择uni-app，输入工程名，并且你可以从模板里的 你喜欢的模板 即可体验官方示例。最后点击创建，即可成功创建 uni-app 项目。
   
   官方模板地址：DCloud 插件市场（模板相当多，插件相当多，可以直接导入项目，或者导入一个demo）

项目结构

├─ components ··················· uni-app组件目录
   └──comp-a.vue  ··················· 可复用的a组件
├── pages ·······················  业务页面文件存放目录
    ├─ index ······················ 使用到的字体文件
        └── index.vue ····················· index页面
    ├─ list ······················· 使用到的图片文件
        └── list.vue ····················· list页面
├─ static ··· 存放应用引用静态资源（如图片、视频等）的地方，注意：静态资源只能存放于此
├─ main.js ······················· Vue初始化入口文件
├─ App.vue ··· 应用配置，用来配置App全局样式以及监听 
├─ manifest.json ················ 配置应用名称、appid、logo、版本等打包信息
└─ pages.json················· 配置页面路由、导航条、选项卡等页面类信息

下面目录说明好好看一下

common 是存放公共js和css的目录，大家可以把一些工具js或者公共的css放这里面

components是放组件的目录，我们所有的组件都可以放这里面，记住组件里面不能使用uni-app页面钩子函数

pages 是uni-app放页面的文件夹，我们每次在这里面新建一个页面，hbuilder X都会在pages.json里面配置好。

static 是存放字体或图片的文件夹，一些静态资源都可以放这里面

store 是vuex状态管理，因为uni-app项目内置vuex所以直接在main.js里面配置一下就可以使用了

subpages 是因为内容过多，分的包，这里面新建的页面pages.json里面不会自动生成对应配置项

subpagesA 也是分的包，因为小程序限制，所以建议大家在一开始就考虑分包情况。免得后面又要整理

unpackage 里面的打包后的东西，我们可以不用管，h5打包后会放在这个里面的dist/build/h5里面

App.vue 可以说是入口文件，我们公共的css可以放这里面，应用启动需要做的事情也可以放这里面，但是这个里面是不能进行页面跳转的

main.js 是入口js文件，跟vue脚手架一样的，我们可以引入全局js，配置一些全局js函数等都可以在这里操作

manifest.json是uni-app的配置项，一般都是可视化配置，很少用到源码配置，大家基本看一看就知道了

pages.json 就是页面配置文件了，你写的每一个页面都要在这里面配置，每个页面一些的特殊配置项也是在这里面写，uni-app pages配置项

uni.scss 是uni-app的样式包，大家随意放

这个就是page.json的页面。

注意：

static 目录下的 js 文件不会被编译，如果里面有 es6 的代码，不经过转换直接运行，在手机设备上会报错。

css、less/scss 等资源同样不要放在 static 目录下，建议这些公用的资源放在 common 目录下。

HbuilderX 1.9.0+ 支持在根目录创建 ext.json sitemap.json 文件。

3. 运行项目：
   项目的运行有多种方式：
   1. 在浏览器运行
   
   2. 在手机上运行。
   3. 直接在HBuilder上预览。（点击右上角的预览，可以直接生成二维码，然后在手机上运行，若果不行，就百度使用二维码生成器，把需要的地址放进去就可以了。）
      

uni-app的有缺点。

优点：

1. 一套代码，多端运行。

2. 代码实现简单，开发快速。

3. uniapp开发体验对前端人员十分友好,和微信小程序的开发方式类似。

4. 突破了系统对H5调用原生功能的限制，比如使用uniapp结合HTML5plus能调用系统相册图片选择和拍照等。

缺点：

1. 兼容性问题，在Android平台上表现较微信小程序和iOS上差。

2. 文件命名等受限。

3. 官方反馈信息不及时。