uni-app框架简介

什么是 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';

}

});