1. uni-app简介
uni-app 是一个使用vue的语法 + 微信小程序的标签和API的跨平台前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台，几乎覆盖所有流量端，uni-app 具有跨端数量更多、性能体验更优秀、学习成本低、开发成本低等几大关键优势。
2. 使用uni-app的前置条件
不要认为uni-app 可以跨多端，就感觉开发难度会直线上升。如果说，你开发过小程序，恰好又会vue， 那么你的学习成本会非常的低。如果你原生小程序与vue 都没有接触过的话，我建议你花一些时间，看一看他们的官方文档。再回来学习uni-app。
3. 为了更好的跨端开发， 参考uni-app 统一规范：
3.1 页面组件我们要遵循Vue 单文件组件 (SFC) 规范；
3.2 组件标签靠近微信小程序规范
3.3 接口能力（JS API）靠近微信小程序规范
3.4 数据绑定及事件处理靠近Vue.js 规范，同时补充了App及页面的生命周期
3.5 为兼容多端运行，建议使用flex布局进行开发
4. 开发工具
HBuilderX，可视化的方式比较简单，HBuilderX 内置相关环境，开箱即用，无需配置node 。
5. 框架目录见下
┌─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 配置页面路由、导航条、选项卡等页面类信息
6. 发送请求对比
如果要开发小程序，我们需要知道不同平台下的小程序规范的 。规范了解之后，我们开发起来就相对来说比较简单一些。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 中使用，注意文档中标注的平台差异说明。
7. 如何实现跨端
虽说是跨端，但是肯定是有情况是不支持的，比如遇到有些平台特有的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
8. 注意事项
非H5 端，不能使用浏览器自带对象，比如document、window、localstorage、cookie 等，更不能使用jquery 等依赖这些浏览器对象的框架。因为各家小程序快应用都不支持这些对象。没有这些浏览器自带对象并不影响业务开发，uni 提供的api 足够完成业务。uni-app 的tag 同小程序的tag，和HTML 的tag 不一样，比如div 要改成view，span 要改成text、a 要改成navigator。
9. 如何快速创建一个uni-app项目
9.1 使用HBuildx工具，选择uni-app，输入工程名，如：testUniApp，点击创建，即可成功创建uni-app；
9.2 项目目录
** 9.3 运行项目，依次运行到浏览器（真机、小程序这里不做展示）**
** 9.4 运行效果图**
浏览器
10. 发布项目 （打包为原生App(云端)）
在HBuilderX工具栏，点击发行，选择原生app-云端打包，如下图：
点击打包即会生成一个apk包，然后发布到各大应用厂商，原文出处https://www.jianshu.com/p/ea4293005855
标签：vue,框架,程序,app,request,API,uni From： https://www.cnblogs.com/18sui/p/17277025.html