前述
uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。
在本文中仅对uniapp开发App进行介绍。
使用工具
uniapp开发工具为:HbuilderX;官方下载IDE地址
不推荐使用其他的IDE。虽然官方也有对vue-cli命令行创建安装uniapp的办法,但在可视化操作使用及兼容上还是HbuilderX会更优秀。毕竟HbuilderX是uniapp的亲爸爸,其他的都是继父。
创建APP
在点击工具栏里的文件 -> 新建 -> 项目:
选择uni-app类型,输入工程名,选择模板,点击创建,即可成功创建。
uni-app自带的模板有 Hello uni-app ,是官方的组件和API示例。还有一个重要模板是 uni ui项目模板,日常开发推荐使用该模板,已内置大量常用组件。
运行APP
浏览器运行:进入hello-uniapp项目,点击工具栏的运行 -> 运行到浏览器 -> 选择浏览器,即可在浏览器里面体验uni-app 的 H5 版。
真机运行:连接手机,开启USB调试,进入hello-uniapp项目,点击工具栏的运行 -> 真机运行 -> 选择运行的设备,即可在该设备里面体验uni-app。
如手机无法识别,请点击菜单运行-运行到手机或模拟器-真机运行常见故障排查指南。 注意目前开发App也需要安装微信开发者工具。
发布APP
在HBuilderX工具栏,点击发行,选择原生app-云端打包,如下图:
学习建议及常见需要注意的问题
1、下载的IDE时需要注意,建议下载App开发版,内置插件比较全。
2、安装IDE后,一开始不要盲目去安装很多插件。这会大大的消耗你学习的精力。
3、如果运行app时遇到报错不要着急,仔细阅读报错信息,hbuilderx的报错信息还是很友好的。比如下图:会告诉开发者需要安装xx插件。如果报错信息真的不是很清晰,可以看文档或。身为一个开发者,利用文档是很有必要的。或者采取拿来主义,对比hello uniapp实例,再不济就去问度娘。