dcloudio / uni-app

A cross-platform framework using Vue.js

uni-app

简体中文 | English

uni-app 是一个使用 Vue.js 开发小程序、H5、App的统一前端框架。官网地址：https://uniapp.dcloud.io

开发者使用 Vue 语法编写代码，uni-app 框架将其编译到 小程序（微信/支付宝/百度/字节跳动/QQ/快手/钉钉/小红书）、App（iOS/Android）、H5等多个平台，保证其正确运行并达到优秀体验。

uni-app的特点

• 开发者和案例更多：HBuilder装机量800万台，开发者社区月活百万，70多个QQ微信群承载10万人。案例众多，uni统计月活超10亿（详见）
• 性能更高（见评测）
• 更丰富的周边生态，插件市场数千款插件
• 提供比小程序原生开发更好的开发体验、更高的工程化效率
• 跨端抹平度更完善，且各端特色发挥更灵活，可真正实现一套代码多端覆盖，无需各端多头维护升级
• 权威认可：阿里小程序官方工具内置uni-app（详见）、腾讯课堂官方自制uni-app培训视频（详见）

扫码体验

开发一次，编译到14个平台。依次扫描14个二维码，亲自体验最全面的跨平台效果！

注： 某些平台不能提交简单demo，补充了一些其他功能。

快速开始

uni-app支持通过vue-cli命令行、HBuilderX可视化界面两种方式快速创建项目：

• vue-cli命令行方式：不限IDE，适合对node熟悉的开发者，扩展阅读：在vscode中开发uni-app、在 WebStorm 中开发 uni-app
• HBuilderX可视化界面：专用IDE，内置相关环境，开箱即用，开发效率更高。

项目案例

案例展示：uniapp.dcloud.io/case

欢迎提交你的应用，uni-app案例征集

需求墙

uni-app计划支持的功能点，会在需求墙上进行展示，征集开发者的投票意见，前往投票。

更新日志

uni-app一直保持高频的更新迭代，详见正式版更新日志、Alpha版更新日志。

论坛

由于DCloud有70多个QQ、微信群，官方已无法维护更多交流群。请开发者到官方论坛交流：https://ask.dcloud.net.cn/explore/ 。论坛提供了比issues更专业的工具服务。

插件市场

uni-app有丰富的插件生态，众多开发者提交了数千款组件、sdk、项目模板，详见：https://ext.dcloud.net.cn/

除了众多三方ui库，官方还提供了uni-ui，在性能和跨端兼容方面有更强的优势。详见：https://ext.dcloud.net.cn/plugin?id=55

现有项目如何迁移到uni-app体系

• 微信小程序转换uni-app指南及转换器：https://ask.dcloud.net.cn/article/35786
• vue h5项目转换uni-app指南：https://ask.dcloud.net.cn/article/36174
• mpvue 项目（组件）迁移指南、示例及资源汇总： https://ask.dcloud.net.cn/article/34945
• wepy转uni-app转换器：https://github.com/zhangdaren/wepy-to-uniapp

常见疑问

• 问：不同端有不同的需求、不同的特色，登录支付也不一样，如何统一？

• 答：差异部分使用条件编译。uni-app提供了灵活强大的条件编译。可以完美处理复用部分和差异部分。真正一套工程源码。当业务升级时，不再需要多端维护。如果多端维护，经常会因为某些端的流量不大，就一直拖延无法让那些用户享受到最新服务。另外登录支付在客户端部分，已经被uni-app统一成一样的api了。

• 问：多端是不是一种妥协，是否会造成性能下降？

• 答：good question。多端且不影响性能，确实很难，但uni-app做到了。在h5端，它的性能、包体积与直接使用vue.js开发一致； 在小程序端，它的性能比大多数开发框架更好，uni-app底层自动处理的setdata差量同步机制，比开发者手动写setdata更好，就像使用vue.js更新界面比手动写js修改dom更高效一样； 在App，uni-app支持webview渲染和原生渲染双引擎，启用原生渲染时，css写法受限，但性能是很接近原生开发的效果的，在当前的手机环境下，千万日活以下的应用在App使用uni-app也不会遇到任何压力。当然也可以在已经做好的原生App中将部分页面改为uni-app实现; 此外，我们会把很多跨端处理放在编译期完成的，这样会减少对运行期的效率影响。

• 问：不做多端，是不是不需要uni-app？

• 答：不是。大量开发者用uni-app只做一个端，详见案例。对于开发者而言，一个优秀工具在手，做什么都不愁。

• 问：uni-app以后会不会变更开源协议，转向收费？

• 答：官方承诺永远不会变更开源协议。无论HBuilderX、uni-app、App，面向**人永久免费。

更多资料

• 评测：跨端开发框架深度横评之2020版
• 评测：深入测试一周，主流多端框架大比武
• uni-app在App端和flutter、react native的比较

贡献指南

如果你想参与贡献，请先阅读贡献指南。

uni-app's Issues

可以热更新吗

Hbuilder x 可以像Hbuilder 一样生成wgt 热更新吗

能不能集成一个markdown的编辑器，最新的示例中有分析器了。

能不能集成一个markdown的编辑器，最新的示例中有分析器了。编辑器也是非常常用的。

var(--status-bar-height)不起作用

Hello <script> export default { } </script> <style> .index { flex: 1; flex-direction: column; } .status { height: var(--status-bar-height); width: 100%; } .top_view{ height: var(--status-bar-height); width: 100%; position: fixed; top: 0; } .content{ justify-content: center; align-items: center; } </style>

"globalStyle": {
	"navigationStyle": "custom"
},

这里已经开启了
在andriod 6.0的手机上不起作用？这个是不是BUG，还是不支持

接口域名小程序必须是https的，app也必须是https的域名吗

uni.getProvider在调试模式可以取得provider list，但云端打包后不能取得

如题，uni.getProvider在调试模式可以取得provider list，形如：['weixin','qq','sinaweibo','xiaomi']，但云端打包后取得的是[]

路由

如何使用vue的路由导航

uni-app必须使用云端打包吗？

之前没用过dcloud的产品，但是了解过。最近在找vue编写app的框架，发现uni-app还不错。这个框架没开源吗？为啥只看到云端编译，核心的代码都放到了服务器吗？

uni.showActionSheet是否关闭弹层

uni.showActionSheet选中不关闭弹层的方法有没有

征集uni-app扩展组件

update at 2019-01-08

uni-app 已开放插件市场，对接轮子制造者和需求方，欢迎开发者积极提交插件。

下面是原问题

欢迎已使用uni-app的各位开发者积极分享扩展组件，共同繁荣uni-app生态。

建议大家将封装好的组件开源，在本issues下提交开源地址，我们评估可用性及用户体验后，会在官网单独增加一个生态栏目，将优秀组件推荐给uni-app的开发者。

关于更新大量数据，会导致页面卡顿，数据无法及时渲染的问题

由于uni-app 转换小程序是借鉴mpvue 的思路，那么mpvue的这个问题 Meituan-Dianping/mpvue#639 导致的大量数据更新的脏检查优化是怎么处理的，等待mpvue 的下一个版本修复，还是已经对这个问题进行了优化

uni-app是不是改变了vue props单向传递的规则，我测试数据是双向绑定的？

uni-app是不是改变了vue props单向传递的规则，我测试数据是双向绑定的？

uni-app项目案例征集

已收集的案例：https://uniapp.dcloud.io/case

为提供更好的技术支持及回访，我们特开设本issues收集uni-app项目的使用情况。

欢迎已使用uni-app的各位开发者积极分享案例，共同繁荣uni-app生态。

TypeError: Cannot read property 'for' of undefined 这是个什么错误呢？

模块编译失败：TypeError: Cannot read property 'for' of undefined 14:54:43.057 at fixDefaultIterator (C:\Users\Administrator\Desktop\HBuilderX.0.1.47.20180823-alpha.full\plugins\uniapp\lib\mpvue-template-compiler\build.js:4234:24) 14:54:43.068 at mark (C:\Users\Administrator\Desktop\HBuilderX.0.1.47.20180823-alpha.full\plugins\uniapp\lib\mpvue-template-compiler\build.js:4266:5) 14:54:43.068 at markComponent (C:\Users\Administrator\Desktop\HBuilderX.0.1.47.20180823-alpha.full\plugins\uniapp\lib\mpvue-template-compiler\build.js:4333:5) 14:54:43.078 at baseCompile (C:\Users\Administrator\Desktop\HBuilderX.0.1.47.20180823-alpha.full\plugins\uniapp\lib\mpvue-template-compiler\build.js:4349:15) 14:54:43.090 at compile (C:\Users\Administrator\Desktop\HBuilderX.0.1.47.20180823-alpha.full\plugins\uniapp\lib\mpvue-template-compiler\build.js:4046:28) 14:54:43.101 at Object.module.exports (C:\Users\Administrator\Desktop\HBuilderX.0.1.47.20180823-alpha.full\plugins\uniapp\lib\mpvue-loader\lib\template-compiler\index.js:43:18)

前端框架怎么icons部分的教程都没有

前端框架肯定会使用到icons的，可是uni-app框架中怎么使用，官方演示中提供了一个常用的icons，不知道如何使用

如何添加css预处理语言，例如less sass

使用普通的css写法工作量太大了，不利于维护

关于动态获取权限的问题

iOS端，当用户禁止APP调用相机权限之后，html5+没有判断是否成功调用相机的回调，Android端也是类似的问题。以前用mui解决这个需求是用了第三方的插件本地打包，uni-app就不知道怎么解决了，官方有没有具体的解决方案。

使用HbuilderX创建的例子接口和模版页面全部打不开报错

21:36:52.155 App Launch at App.vue:4
21:36:52.175 App Show at App.vue:37
21:36:59.987 Do not have handler in current page: pages/API/API. Please make sure that handler has been defined in pages/API/API, or not use handler with 'v-if'
21:37:05.416 success at App.vue:19
21:43:44.963 Do not have handler in current page: pages/API/API. Please make sure that handler has been defined in pages/API/API, or not use handler with 'v-if'

可视化拖拽生成并导出vue代码

有没有计划像墨刀那样的可视化拖拽生成页面， 并导出vue代码

mac下启动不了小程序预览

已经是最新版本小程序开发工具了，日志如下：

14:02:59.053 idePortFile: /Users/zhengkai1/Library/Application Support/微信web开发者工具/Default/.ide
14:02:59.066 starting ide...
14:03:02.108 IDE server has started, listening on http://127.0.0.1:50770
14:03:02.117 initialization finished
14:03:02.183 Runtime error: Error
14:03:02.183 Error: getaddrinfo ENOTFOUND http://127.0.0.1 http://127.0.0.1:50770
14:03:02.183 Runtime error: Error
14:03:02.183 Error: socket hang up
14:03:02.410 StatusCodeError: 400 - "{"code":40000,"error":"错误 Error: 系统错误，错误码：1"}"
14:03:02.417 微信开发者工具打开项目失败，请参阅启动日志！
14:03:02.418 注：请将微信开发者工具升级到最新版本！

带阴影的组件与rich-text里的图片层级有bug

兄弟层级，当上一元素带有阴影，下一元素为rich-text时。rich-text里的图片的层级比阴影高，会显示在阴影上方。

期待解决的问题ing

我最关心的问题：
1.怎么统一安卓推送
2.5+怎么丰富打开安卓和苹果的文件管理器，进行文件上传
3.安装第三方包太麻烦了，我如果用很多第三方包，都放在根目录下面的话会显得不整洁
4.赶紧支持增量更新吧
5.希望uni生态越来越好，apicloud虽然是抄袭hbuilder，但是他们的组件很多，希望uni也不用我们开发者再造轮子

uni-app什么时候能支持快应用

如题

uni-app的textarea绑定foucs无效

详细问题描述
[内容]
uni-app的textarea绑定foucs无效
重现步骤
[步骤]
template里面加上<textarea :focus="textareaFocus" auto-height />
在js写上
export default {
data() {
return {
textareaFocus: true
}
},
onLoad: function (option) {
this.textareaFocus = true // 页面加载不能使textarea获得焦点
},
methods: {
focusTextarea() { // 按下按钮也不能使textarea获得焦点
this.textareaFocus = true
}
}
}
[结果]
页面加载完毕，或者按按钮，都不能使textarea获得焦点
[期望]
页面加载完毕，或者按按钮，textarea获得焦点，弹出键盘，用户可以直接填写内容

运行环境
[系统版本]
andriod 8.0
[浏览器版本]
[IDE版本]
HbuilderX 0.1.46.20180810-alpha

indexlist 组件分享

工作的时候用到写的，希望大家喜欢

github

什么情况？官网打不开了

无法访问此网站
uniapp.dcloud.io 的响应时间过长。
请试试以下办法：

检查网络连接
检查代理服务器和防火墙
运行 Windows 网络诊断
ERR_CONNECTION_TIMED_OUT

为什么我的微信小程序工具上方那 预览和上传等按钮都是灰色的 是需要设置什么吗

已解决

只能在真机调接口吗?会不会很慢??

只能在真机调接口吗?会不会很慢??

pages.json里修改pages数组保存没有自动更新；condition里的current无效

pages.json里修改pages数组保存没有自动更新；condition里的current无效

支付你这样介绍完全看不懂

完全不知道该配置什么怎么配置

tabbar 设置 position:top好像不管用啊

uni.hideTabbar() 能不能支持一下app

想这个uni-app开发的教程，不知有何建议。

本人高校教授一枚，喜欢研究技术。一直是hb的粉丝，也开设了相关课程。没教材所以一直想写本书，又担心对技术钻研不深误人子弟，看到uni出来，试玩了下做了个小项目感觉不错，能够结合vue开发效率比以前高了很多。大家有什么建议可以提出来，我看能不能组织下搞个开放的教程。

uni.getUserInfo接口官方示例无法拿到用户信息

uni.login({
provider: 'weixin',
success: function (loginRes) {
console.log(loginRes.authResult);
// 获取用户信息
uni.getUserInfo({
provider: 'weixin',
success: function (infoRes) {
console.log('用户昵称为：' + infoRes.userInfo.nickname);
}
});
}
});

最新版的 xcode 真机调试不能用打开就关闭

rt

关于mpvue 开发的小程序快速打包

有人使用mpvue开发完小程序，再使用uni-app打包的么。目前有一个已经使用mpvue开发完成的项目，如何快速迁移至uni-app

关于picker 【date】模式， fields设置成month，真机上无法正确显示

<picker mode="date" :value="date" start="2015-09" end="2040-09" @change="bindDateChange" fields="month">
								<view class="uni-input">{{date}}</view>
							</picker>		

data() {
			return {
				title: 'picker',
				array: ['**', '美国', '巴西', '日本'],
				index: 0,
				date: '2016-09',
				time: '12:01'
			}
		},

手机上显示：只显示2018年，8和9两个月份，还显示了day

头部转台

发现一个问题单个js文件超过500k就报错了

[BABEL] Note: The code generator has deoptimised the styling of "unknown" as it exceeds the max of "500KB".
希望官方能解决一下，引入第三方库的时候总是有这个问题

分包可以吗

头部系统栏

如何我不想显示 navigationBarTitleText 只改变颜色 该如何做

支持小程序原生的API么?

比如：蓝牙

官方地址应该是 http://uniapp.dcloud.io/

还有，目前uniapp是还没有正式推广吗？
我看官方demo都是nml 的项目结构
有些文档是直接搬的mpvue来的，不怕侵权么？

系统状态栏的一个小问题

如何我只想要系统状态栏改变颜色。不想添加任何标题 该如何做呢 可不可以自定义呢？ 求大佬告知
定义的
.status_bar {
height: var(--status-bar-height);
width: 100%;
background-color: #2cdedf;
}
不会占满一行

bug: 在子组件里面使用for循环居然无效？

我在子组件里面使用for循环无效，讲代码复制到父组件中运行正常，uni-app有点不完善啊哥。

最新版hello-uniapp编译不过

错误信息:
14:00:09.289 文件查找失败：'E:/code/uin-app/uni-app/examples/hello-uniapp/platforms/app-plus/tabbar-nvue/tabbar-nvue.vue' at platforms\app-plus\tabbar-nvue\tabbar-nvue.js:3

小程序转app，app不需要获取login，小程序必须要，怎么解决

各位大佬，求指点，怎么兼顾，小程序获取，app不获取呢

有没有办法调用外部浏览器中打开某个链接

有没有办法调用外部浏览器中打开某个链接

uni.getUserInfo(OBJECT)新版小程序好像不能用了

提示
VM834:1 获取 wx.getUserInfo 接口后续将不再出现授权弹窗，请注意升级

关于组件slot

官方文档说不支持slot的写法，为什么我写slot，有效果呢，是不是官方更新了，文档没有更新的呢？？

希望提供能够直接获取摄像头图像的接口，不是调用照相机，而是获取摄像头实时数据。

之前项目中要做人脸识别，h5+没法直接获取摄像头数据，要是能够像浏览器那样直接拿到摄像头的实时数据就好了，希望能有方案，我看cordova有这样的插件。

button组件少了个微信小程序中的属性 lang

指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。