什么是uni-app

uni-app 是一个使用vue的语法 + 微信小程序的标签和API的跨平台前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台，几乎覆盖所有流量端。

uni-app 具有跨端数量更多、性能体验更优秀、学习成本低、开发成本低等几大关键优势。

使用 uni-app 的前置条件

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

为了更好的跨端开发， 参考uni-app 统一规范：

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

开发工具

毫无疑问，首选使用官方推出的HBuilderX 编辑器

可视化的方式比较简单，HBuilderX 内置相关环境，开箱即用，无需配置node 。

框架目录见下:

┌─components                   uni-app组件目录

│  └─comp-a.vue                可复用的a组件

├─hybrid                             存放本地网页的目录，详见

├─platforms                        存放各平台专用页面的目录，详见

├─pages                              业务页面文件存放的目录

│  ├─index

│  │  └─index.vue                index页面

│  └─list

│    └─list.vue                       list页面

├─static                                存放应用引用静态资源（如图片、视频等）的地方，注意：静态资源只能存放于此

├─main.js                              Vue初始化入口文件

├─App.vue                            应用配置，用来配置App全局样式以及监听

├─manifest.json                    配置应用名称、appid、logo、版本等打包信息

└─pages.json                        配置页面路由、导航条、选项卡等页面类信息

小程序（微信、支付宝、百度、头条、QQ、360）

如果要开发小程序，我们需要知道不同平台下的小程序规范的 。规范了解之后，我们开发起来就相对来说比较简单一些。uni-app 帮我们把不同平台的小程序API 几乎都封装了 ，只需要将前缀替换为uni 即可 例如：

• 我们调用微信小程序的request 请求：

wx.request({

    url: 'https://www.example.com/request', //仅为示例，并非真实接口地址

    data: {

        text: 'uni.request'

    },

    header: {

        'custom-header': 'hello' //自定义请求头信息

    },

    success: (res) => {

        console.log(res.data);

        this.text = 'request success';

    }

});

• 我们使用uni-app 的request 请求

uni.request({

    url: 'https://www.example.com/request', //仅为示例，并非真实接口地址

    data: {

        text: 'uni.request'

    },

    header: {

        'custom-header': 'hello' //自定义请求头信息

    },

    success: (res) => {

        console.log(res.data);

        this.text = 'request success';

    }

});

除了前缀wx 替换为uni之外，其他与原规范机会保持一致。uni-app 会最大程度的抹平不同小程序平台之间的差异。

App（ios、安卓）

uni-app 在App 端不仅可以使用绝大多数的小程序相关的API，同时也可以使用5+API 很好的补足了小程序上一些还没有实现的功能。同时，App 端内置weex 引擎，提供了原生渲染能力。让你 App 性能更好。

H5

h5 基本上跟常规vue 开发没有什么区别， 唯一需要注意的是，有些API 是不能在h5 中使用，注意文档中标注的平台差异说明。

如何实现跨端

虽说是跨端，但是肯定是有情况是不支持的，比如遇到有些平台特有的API 怎么办 ？不用担心，这些问题uni-app 都为你想到了，那就是使用条件编译。

条件编译

在C 语言中，通过#ifdef、#ifndef 的方式，为windows、mac 等不同os 编译不同的代码，uni-app 参考这个思路，为uni-app 提供了条件编译手段，在一个工程里优雅的完成了平台个性化实现 。

条件编译是利用注释实现的，在不同语法里注释写法不一样，js使用// 注释、css 使用、vue/nvue 模板里使用 ``。
举个例子：

// #ifdef %PLATFORM%

平台特有的API实现

// #endif

// #ifndef H5

// 表示只有 h5 不使用这个 api

uni.createAnimation(OBJECT)

// #endif

注意事项

非H5 端，不能使用浏览器自带对象，比如document、window、localstorage、cookie 等，更不能使用jquery 等依赖这些浏览器对象的框架。因为各家小程序快应用都不支持这些对象。没有这些浏览器自带对象并不影响业务开发，uni 提供的api 足够完成业务。

uni-app 的tag 同小程序的tag，和HTML 的tag 不一样，比如div 要改成view，span 要改成text、a 要改成navigator。

以下简单描述下快速创建一个uni-app项目

• 首先当然是安装工具，上面说过了，安装官方推荐的HBuilder-x；链接：https://www.dcloud.io/hbuilderx.html

• 安装好工具后，打开界面，新建项目；
  

• 选择uni-app，输入工程名，如：test，点击创建，即可成功创建uni-app；

• 项目目录
  

• 改写index页面，渲染 logo 以及 Hello uniApp
  

• 运行项目（依次运行到浏览器、真机、小程序）
  
  
  

• 运行效果图
  

• 发布项目 （打包为原生App(云端)）
  在HBuilderX工具栏，点击发行，选择原生app-云端打包，如下图：
  
  出现如下界面，点击打包即会生成一个apk包，然后发布到各大应用厂商