README.md

---
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://opendocs.alipay.com/mini/ide/overview)），腾讯课堂官方为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="/README?id=%e5%bf%ab%e9%80%9f%e4%bd%93%e9%aa%8c" data-id="快速体验" class="anchor"><span>快速体验</span></a></h3> -->
    <p>一套代码编到14个平台，这不是梦想。眼见为实，扫描14个二维码，亲自体验最全面的跨平台效果！</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://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-android.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://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-ios.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://qiniu-web-assets.dcloud.net.cn/unidoc/zh/alipay1.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://qiniu-web-assets.dcloud.net.cn/unidoc/zh/baidu-uniapp.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://qiniu-web-assets.dcloud.net.cn/unidoc/zh/mp-kuaishou-new.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://qiniu-web-assets.dcloud.net.cn/unidoc/zh/lark-qr-code.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://qiniu-web-assets.dcloud.net.cn/unidoc/zh/dingding-qr-code.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://qiniu-web-assets.dcloud.net.cn/unidoc/zh/mp-jd-qrcode.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">
          <img style="opacity: 0;" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/mp-jd-qrcode.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">
          <img style="opacity: 0;" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/mp-jd-qrcode.png" width="160" />
        </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>

## 看视频，10分钟了解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://web-assets.dcloud.net.cn/unidoc/zh/DCloud.mp4"></video> -->

<!-- <video id="video" preload="none" controls="controls" width="100%" poster="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/dcloudPoster.jpg" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317%20(3).mp4"></video> -->


<video id="video" preload="none" controls="controls" width="100%" poster="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/dcloudPoster.jpg" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-app-video-courses.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://qiniu-web-assets.dcloud.net.cn/unidoc/zh/12x.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://qiniu-web-assets.dcloud.net.cn/unidoc/zh/22x.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://qiniu-web-assets.dcloud.net.cn/unidoc/zh/32x.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://qiniu-web-assets.dcloud.net.cn/unidoc/zh/42x.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://qiniu-web-assets.dcloud.net.cn/unidoc/zh/52x.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://qiniu-web-assets.dcloud.net.cn/unidoc/zh/62x.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://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-function-diagram.png)

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

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

![](https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/dev1x8.jpg)

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

<img src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-app-multiport.jpg" loading="lazy" class="zooming"></img>