简单介绍
uni-app实现了一套代码,同时运行到多个平台,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台。
基于通用的前端技术栈,采用vue语法+微信小程序api,比较容易上手
官网:https://uniapp.dcloud.io/
工具安装
开发uni-app需要安装HBuilderX
创建项目
点击左上角【文件】>>【新建】>>【项目】,选择uni-app模板。

uni-app目录结构
uni-app有自己的插件库,直接点击安装即可,而且,它也支持npm包管理,点击【工具】>> 【插件安装】即可配置
调试
1.浏览器
调试之前我们首先要配置一下你的浏览器的安装路径,默认HBuilder是检测不到的
点击【运行】>>【运行到浏览器】>> 【配置web服务器】
配置好了后,在点击【运行】>>【运行到浏览器】>> 选择电脑内的浏览器运行
2.手机调试
数据线连接电脑,点击【运行】>>【运行到手机或模拟器】>> 选择已连接的手机,手机上会安装一个HBuilder app,之后在开发环境中做的所有效果都会渲染到这个app中。
1)安卓手机,需要开启【USB调试】;
2)iphone手机,连接手机后直接运行,会报错,需要获得手机信任,步骤如下:
【设置】>> 【通用】>> 【设备管理】,信任一下HBuilder即可。
3.小程序调试:
点击 【运行】 >> 【运行到小程序模拟器】>> 【运行设置】
需要注意两点:
1)微信开发者工具必须是官方最新版。
2)微信开发者工具需要授权,方法如下:
打开微信开发者工具,点击设置图标,选择【安全】,服务端口选择开启,然后即可进行微信小程序调试
*百度,支付宝,字节跳动小程序步骤和微信类似
打包
1.h5
点击 【发行】 >> 【网站-h5手机版】
2.app(android,ios)
1)配置应用图标,否则是默认的hbuilder的logo
2)按照业务需求配置sdk与模块权限配置,例如用到了video组件,需要在App模块权限配置中勾选VideoPlayer选项,否则app打开会提示报错,还有微信登录授权,支付,分享等;
3)点击 【发行】 >> 【原生APP-云打包】
注:
证书密钥之类的文件需要安卓ios开发人员提供;
安卓测试包可以直接安装,ios测试包需要在打包时添加测试手机id
3.微信小程序
点击 【发行】 >> 【小程序-微信】
再到微信开发者工具中按照小程序发布流程:上传成体验版>> 提交审核>>发布
打包注意:
接口域名要记得手动切换测试环境或线上环境;
缺点:uni-app问世的时间还比较短,有很多地方还不是完善,坑比较多,而且对于使用中的一些bug及问题,官方回应的不是很及时,不过去社区一起讨论,也可以加一下qq群(官网有提供,现有30多个)。
总之,个人认为如果项目针对多个端开发,还是很值得使用uni-app的。