README.md

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

即使不跨端，```uni-app```同时也是更好的小程序开发框架。详见[评测](https://ask.dcloud.net.cn/article/35947)

`DCloud`公司拥有340万开发者用户，旗下```uni-app```有5万+案例、600+插件、50+微信/qq群、更高的百度指数，可以放心选择。

<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>一套代码编到7个平台，这不是梦想。眼见为实，扫描7个二维码，亲自体验最全面的跨平台效果！</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://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/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://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/uni-ios.png" width="160"/>
			</div>
        	<b>iOS版</b>
        </a>
        <a href="https://uniapp.dcloud.io/h5/" target="_blank" class="clear-style barcode-view">
			<div class="barcode-img-box">
				<img src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/uni-h5.png" width="160"/>
			</div>
        	<b>H5版</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>
        <a href="//m3w.cn/uniapp" target="_blank" class="clear-style barcode-view">
			<div class="barcode-img-box"><img src="https://img-cdn-qiniu.dcloud.net.cn/img/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://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/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="http://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/mp-toutiao.png" width="160"/>
			</div>
        	<b>头条小程序版</b>
        </a>
    </div>
    <p>
        <em>注：Appstore、百度、头条平台不能提交简单demo，故补充了一些其他功能。</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://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/uni-app20190127.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://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/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">5万+案例、600+插件、50+微信/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://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/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://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/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">体验更好的Hybrid框架，加载新页面速度更快。</p>
        <p class="uniapp-home-content-item-text">App端支持weex原生渲染，可支撑更流畅的用户体验。</p>
        <p class="uniapp-home-content-item-text">小程序端的性能优于市场其他框架。<a href="https://ask.dcloud.net.cn/article/35947">评测</a></p>
      </div>
    </div>
    <div class="uniapp-home-content-item">
      <div class="uniapp-home-content-item-image">
        <img src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/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">插件市场</a>，各种轮子拿来即用。</p>
        <p class="uniapp-home-content-item-text">支持NPM、支持小程序组件和SDK、兼容mpvue组件和项目、兼容weex组件。</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://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/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://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/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时使用了小程序和weex双引擎，丰富的js扩展能力和高效的weex渲染都可以在```uni-app```中可以使用。同时支持以sdk方式嵌入原生项目中混合开发。生成的App性能体验优秀且扩展能力丰富。

```uni-app```支持将小程序生态丰富的组件和js sdk引用到App开发中，大幅强化了跨平台开发的三方生态，开发者可直接使用大量原sdk厂商维护的高质量sdk。

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

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

### 功能框架

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

![](https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/uni0124.png)

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

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

![](https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/dev1x8.jpg)

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

![](https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/run1x8.jpg)