---
pageClass: custom-page-class
---

```uni-app``` 是一个使用 [Vue.js](https://vuejs.org/) 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

`DCloud`公司拥有900万开发者、数百万应用、12亿手机端月活用户、数千款uni-app插件、70+微信/qq群。阿里小程序工具官方内置uni-app（[详见](https://docs.alipay.com/mini/ide/0.70-stable)），腾讯课堂官方为uni-app录制培训课程（[详见](https://ask.dcloud.net.cn/article/35640)），开发者可以放心选择。

`uni-app`在手，做啥都不愁。即使不跨端，```uni-app```也是更好的小程序开发框架（[详见](https://ask.dcloud.net.cn/article/35947)）、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目，你都可以快速交付，不需要转换开发思维、不需要更改开发习惯。

<div class="quick">
    <h3 id="快速体验"><a href="/#%e5%bf%ab%e9%80%9f%e4%bd%93%e9%aa%8c" data-id="快速体验" class="anchor"><span>快速体验</span></a></h3>
    <p>一套代码编到13个平台，这不是梦想。眼见为实，扫描13个二维码，亲自体验最全面的跨平台效果！</p>
    <div class="flex-img-group-view">
      <a href="//m3w.cn/uniapp" target="_blank" class="clear-style barcode-view">
        <div class="barcode-img-box">
          <img src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/7c946930-bcf2-11ea-b997-9918a5dda011.png" width="160" />
        </div>
        <b>Android版</b>
      </a>
      <a href="https://itunes.apple.com/cn/app/hello-uni-app/id1417078253?mt=8" target="_blank" class="clear-style barcode-view">
        <div class="barcode-img-box">
          <img src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/7c910dd0-bcf2-11ea-b680-7980c8a877b8.png" width="160" />
        </div>
        <b>iOS版</b>
      </a>
      <a href="https://hellouniapp.dcloud.net.cn/" target="_blank" class="clear-style barcode-view">
        <div class="barcode-img-box">
          <img src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/uni-h5-hosting-qr.png" width="160" />
        </div>
        <b>Web版</b>
      </a>
      <a href="//m3w.cn/uniapp" target="_blank" class="clear-style barcode-view">
        <div class="barcode-img-box"><img src="//img.cdn.aliyun.dcloud.net.cn/guide/uniapp/gh_33446d7f7a26_430.jpg" width="160" /></div>
        <b>微信小程序版</b>
      </a>
    </div>
    <div class="flex-img-group-view" style="margin-top: 20px;">
      <a href="//m3w.cn/uniapp" target="_blank" class="clear-style barcode-view">
        <div class="barcode-img-box"><img src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/30112940-bcf2-11ea-a30b-e311646dfaf2.png" width="160" /></div>
        <b>支付宝小程序版</b>
      </a>
      <a href="//m3w.cn/uniapp" target="_blank" class="clear-style barcode-view">
        <div class="barcode-img-box"><img src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/e7fc6700-bcf1-11ea-b680-7980c8a877b8.png" width="160" /></div>
        <b>百度小程序版</b>
      </a>
      <a href="//m3w.cn/uniapp" target="_blank" class="clear-style barcode-view">
        <div class="barcode-img-box">
          <img src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/mp-toutiao.png" width="160" />
        </div>
        <b>字节跳动小程序版</b>
      </a>
      <a href="//m3w.cn/uniapp" target="_blank" class="clear-style barcode-view">
        <div class="barcode-img-box">
          <img src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/hello-uni-qa-union.png" width="160" />
        </div>
        <b>快应用</b>
      </a>
    </div>
    <div class="flex-img-group-view" style="margin-top: 20px;">
      <a href="//m3w.cn/uniapp" target="_blank" class="clear-style barcode-view">
        <div class="barcode-img-box">
          <img src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/hello-uni-qq.png" width="160" />
        </div>
        <b>QQ小程序版</b>
      </a>
      <a href="https://so.mp.360.cn/mp.html?appid=qh4j181qqtru354st6" target="_blank" class="clear-style barcode-view">
        <div class="barcode-img-box">
          <img src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/hello-uni-mp-360-qr.png" width="160" />
        </div>
        <b>360小程序</b>
      </a>
      <a href="//m3w.cn/uniapp" target="_blank" class="clear-style barcode-view">
        <div class="barcode-img-box"><img src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a90b5f95-90ba-4d30-a6a7-cd4d057327db/04cb978b-070f-4122-b374-cb3cd9f9528f.png" width="160" /></div>
        <b>快手小程序版</b>
      </a>
      <a href="//m3w.cn/uniapp" target="_blank" class="clear-style barcode-view">
        <div class="barcode-img-box"><img src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a90b5f95-90ba-4d30-a6a7-cd4d057327db/0daa3f31-47aa-4a9b-bd2f-6d3a7a968bd5.png" width="160" /></div>
        <b>飞书小程序版</b>
      </a>
    </div>
    <div class="flex-img-group-view" style="margin-top: 20px;">
      <a href="//m3w.cn/uniapp" target="_blank" class="clear-style barcode-view">
        <div class="barcode-img-box">
          <img src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a90b5f95-90ba-4d30-a6a7-cd4d057327db/25463394-c584-4f68-bd57-6e05c43d55a7.png" width="160" />
        </div>
        <b>钉钉小程序版</b>
      </a>
      <a href="javascript:void(0)" οnclick="js_method()" class="clear-style barcode-view">
        <div class="barcode-img-box" style="width: 160px;"></div>
        <b></b>
      </a>
      <a href="javascript:void(0)" οnclick="js_method()"  class="clear-style barcode-view">
        <div class="barcode-img-box" style="width: 160px;"></div>
        <b></b>
      </a>
      <a href="javascript:void(0)" οnclick="js_method()" class="clear-style barcode-view">
        <div class="barcode-img-box" style="width: 160px;"></div>
        <b></b>
      </a>
    </div>
    <p>注：<br/>
        <em>- 某些平台不能提交简单demo，故补充了一些其他功能；hello uni-app示例代码可从[github](https://github.com/dcloudio/hello-uniapp)获取</em></br>
        <em>- 快应用仅支持 vivo 、oppo、华为</em></br>
        <em>- 360小程序仅 windows平台支持，需要在360浏览器中打开</em></br>
    </p>
</div>

### uni-app视频介绍

我们精心准备了一个简单的十分钟介绍视频，方便你快速了解```uni-app```的主要特征：

<!-- <video id="video" onplay="videoPlay()" preload="none" controls="controls" width="100%" poster="https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/poster.png" src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-dc-site/78e4ebc0-54be-11eb-a16f-5b3e54966275.mp4"></video> -->

<video id="video" onplay="videoPlay()" preload="none" controls="controls" width="100%" poster="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-dc-site/9d299680-555d-11eb-8a36-ebb87efcf8c0.jpg" src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/a876efc0-4f35-11eb-97b7-0dc4655d6e68.mp4"></video>

### 为什么要选择uni-app？

```uni-app```在开发者数量、案例、跨端抹平度、扩展灵活性、性能体验、周边生态、学习成本、开发成本等8大关键指标上拥有更强的优势。
<!-- ![](https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/uni20190418.png) -->
<div class="uniapp-home-content">
    <div class="uniapp-home-content-item">
      <div class="uniapp-home-content-item-image">
        <img src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/9c70d280-4f36-11eb-8a36-ebb87efcf8c0.png">
      </div>
      <div class="uniapp-home-content-item-header">
        <h5 class="uniapp-home-content-item-title">开发者/案例数量更多</h5>
        <p class="uniapp-home-content-item-text">数百万应用、uni统计月活12亿、70+微信/qq群、更高的百度指数</p>
        <p class="uniapp-home-content-item-text">跨端完善度更高，真正落地的提高生产力</p>
      </div>
    </div>
    <div class="uniapp-home-content-item">
      <div class="uniapp-home-content-item-image">
        <img src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/9d2b6ff0-4f36-11eb-b680-7980c8a877b8.png">
      </div>
      <div class="uniapp-home-content-item-header">
        <h5 class="uniapp-home-content-item-title">平台能力不受限</h5>
         <p class="uniapp-home-content-item-text">在跨端的同时，通过条件编译+平台特有API调用，可以优雅的为某平台写个性化代码，调用专有能力而不影响其他平台。</p>
        <p class="uniapp-home-content-item-text">支持原生代码混写和原生sdk集成。</p>
      </div>
    </div>
    <div class="uniapp-home-content-item">
      <div class="uniapp-home-content-item-image">
        <img src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/9e0d6b80-4f36-11eb-97b7-0dc4655d6e68.png">
      </div>
      <div class="uniapp-home-content-item-header">
        <h5 class="uniapp-home-content-item-title">性能体验优秀</h5>
        <p class="uniapp-home-content-item-text">加载新页面速度更快、自动diff更新数据。</p>
        <p class="uniapp-home-content-item-text">App端支持原生渲染，可支撑更流畅的用户体验。</p>
        <p class="uniapp-home-content-item-text">小程序端的性能优于市场其他框架。<a href="https://ask.dcloud.net.cn/article/35947" target="_blank">评测</a></p>
      </div>
    </div>
    <div class="uniapp-home-content-item">
      <div class="uniapp-home-content-item-image">
        <img src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/9f01dda0-4f36-11eb-8a36-ebb87efcf8c0.png">
      </div>
      <div class="uniapp-home-content-item-header">
        <h5 class="uniapp-home-content-item-title">周边生态丰富</h5>
        <p class="uniapp-home-content-item-text"><a href="https://ext.dcloud.net.cn/?orderBy=WeekDownload" target="_blank">插件市场</a>数千款插件。</p>
        <p class="uniapp-home-content-item-text">支持NPM、支持小程序组件和SDK。</p>
        <p class="uniapp-home-content-item-text">微信生态的各种sdk可直接用于跨平台App。</p>
      </div>
    </div>
    <div class="uniapp-home-content-item">
      <div class="uniapp-home-content-item-image">
        <img src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/9fc22060-4f36-11eb-bdc1-8bd33eb6adaa.png">
      </div>
      <div class="uniapp-home-content-item-header">
        <h5 class="uniapp-home-content-item-title">学习成本低</h5>
        <p class="uniapp-home-content-item-text">基于通用的前端技术栈，采用vue语法+微信小程序api，无额外学习成本。</p>
      </div>
    </div>
    <div class="uniapp-home-content-item">
      <div class="uniapp-home-content-item-image">
        <img src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/a09723a0-4f36-11eb-97b7-0dc4655d6e68.png">
      </div>
      <div class="uniapp-home-content-item-header">
        <h5 class="uniapp-home-content-item-title">开发成本低</h5>
        <p class="uniapp-home-content-item-text">不止开发成本，招聘、管理、测试各方面成本都大幅下降。</p>
        <p class="uniapp-home-content-item-text">HBuilderX是高效开发神器，熟练掌握后研发效率至少翻倍（即便只开发一个平台）。</p>
      </div>
    </div>
</div>

<!-- ```uni-app``` 使用```Vue.js```的语法 + 微信小程序的API，均为通用技术。

有一定 ```Vue.js``` 和小程序开发经验的开发者可快速上手 ```uni-app``` ，开发出兼容多端的应用。

```uni-app```提供了条件编译机制，在跨端的同时，可以优雅的为某平台写个性化代码、调用专有能力而不影响其他平台。这是能落地的真正一套代码的解决方案，而不是仅仅统一技术栈，实际项目仍然多套代码、各自升级。

```uni-app```打包到App时使用了使用独立v8引擎，渲染层支持原生渲染和webview渲染双选，内置大量常用原生功能，支持原生插件扩展，并且插件市场有丰富的插件生态，无需懂原生开发亦可完成复杂应用。

`uni-app`提供了`uni小程序sdk`，支持以sdk方式嵌入原生项目中混合开发，帮助原生App得到小程序能力，并可享受`uni-app`的开发者生态。

```uni-app```被DCloud定义为**终极跨平台开发框架**，拥有极强的竞争优势。

- 对于技术人员而言：不用学那么多的平台开发技术、研究那么多前端框架，学会基于vue的```uni-app```就够了。
- 对于公司而言：更低成本，覆盖更多用户，```uni-app```是高效利器。 -->

### 功能框架

从下面```uni-app```功能框架图可看出，```uni-app```在跨平台的过程中，不牺牲平台特色，可优雅的调用平台专有能力，真正做到海纳百川、各取所长。

![](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a90b5f95-90ba-4d30-a6a7-cd4d057327db/423744c0-5673-4a14-adca-14bd986c3f05.jpg)

### 一套代码，运行到多个平台

```uni-app```实现了一套代码，同时运行到多个平台；如下图所示，一套代码，同时运行到iOS模拟器、Android模拟器、H5、微信开发者工具、支付宝小程序Studio、百度开发者工具、字节跳动开发者工具、QQ开发者工具（底部8个终端选项卡代表8个终端模拟器）：

![](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/efd8e280-60a9-11eb-a16f-5b3e54966275.jpg)

实际运行效果如下（点击图片可放大）：

![](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a90b5f95-90ba-4d30-a6a7-cd4d057327db/ec6e95dd-77ad-4d14-aafa-ca503f5b9e53.jpg)