什么是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 不使用这个 apiuni.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包，然后发布到各大应用厂商

uni-app框架简介相关推荐

切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
Django框架简介
Django框架简介 MVC框架和MTV框架 MVC,全名是Model View Controller,是软件工程中的一种软件架构模式,把软件系统分为三个基本部分:模型(Model).视图(View) ...
六款值得推荐的Android开源框架简介
六款值得推荐的Android开源框架简介技术不再多,知道一些常用的.不错的就够了.下面就是最近整理的"性价比"比较高的Android开源框架,应该是相对实用的. 1.volley ...
Vue.js框架简介（1）
1.Vue.js框架简介 Vue(读音 /vju:/,发音类似于 view)是一套用于构建用户界面的渐进式的JavaScript框架. 1.1.为什么要学习Vue.js 什么是Vue.js Vue.j ...
Appium+python自动化（三十八） - Appium自动化测试框架综合实践 - 框架简介-助你冲击高薪，迎娶白富美（超详解）...
简介好久没有更新博客了,博友们是不是有点等不及了.不好意思啊,中秋节过后太忙了,这篇是好不容易抽点零碎时间写的.从这一篇开始小伙伴或者童鞋们,就跟随宏哥的脚步,一步步的从无到有,从0到1的搭建一个完 ...
分布式电商项目十四：Vue前端框架简介及使用
Vue前端框架简介及使用就像是后端我们使用springboot来进行开发一样,前端需要使用Vue框架进行开发.由于前端不是我们的主要内容,所以只介绍简单的使用内容.具体更深的内容请参考Vue的官方网 ...
HbuilderX:uni app踩坑之uView-ui
HbuilderX:uni app踩坑之uView-ui 最近在自学uniapp,想找一个ui框架提高一下学习和开发的效率,于是就网上冲浪,浪来浪去,最后选择了uView-ui这款.其实有些框架我是有 ...
delphi源码三层框架【框架简介】
一,框架简介 1,本套源码主要是用来开发企业应用系统如:erp ,mes,hrms,进销存等制造业内部应用系统:跟网上常见的delphi中间件相比,功能更丰富,开发便捷.若用来开发一些几千上万的高并 ...
WEEX框架（一）框架简介和快速上手体验
框架简介 Weex,是能够完美兼顾性能与动态性,让移动开发者通过简捷的前端语法写出Native级别的性能体验的框架,并支持iOS.安卓.Web等多端部署,由阿里巴巴研发和维护. 对于移动开发者来说,W ...
第三方框架简介ios
第三方框架简介iOS 图像 1.图片浏览控件MWPhotoBrowser 实现了一个照片浏览器类似 iOS 自带的相册应用,可显示来自手机的图片或者是网络图片,可自动从网络下载图片并进行缓存.可对图片 ...

uni-app框架简介

什么是uni-app

使用 uni-app 的前置条件

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

开发工具

框架目录见下:

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

App（ios、安卓）

H5

如何实现跨端

条件编译

注意事项

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

uni-app框架简介相关推荐

最新文章

热门文章

uni-app框架简介

什么是uni-app

使用 uni-app 的前置条件

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

开发工具

框架目录见下:

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

App（ios、安卓）

H5

如何实现跨端

条件编译

注意事项

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

uni-app框架简介相关推荐

最新文章

热门文章

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