uniapp教程指南
uniapp介绍
uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。
uniapp特点
- 跨平台
- 一套代码可以运行在多个平台,打包生成多个平台的应用
- 学习成本低(拥抱开发者)
- 基于vue+小程序的语法
- 开发成本低(拥抱老板)
- 无需单独招聘IOS和安卓开发
创建并运行项目
-
通过HBuildreX(亲爸开发的)编辑器内置环境,下载App版本,该编辑器包含了uniapp创建、运行、打包。(推荐的方式)
- 下载地址
- 一定要下载App版本
- 此编辑器是不需要安装,只需要解压使用就行
- 创建项目
-
文件
-->新建
-->项目
-
选择类型uni-app,输入项目名称(建议不要使用中文),选择模板(推荐学习的时候选择默认模板)
-
- 运行项目
-
运行到浏览器端(h5)
- 在编辑器就会生成项目,随便点击项目的某个文件,比如点击选中app.vue,点击工具栏
运行
-->运行到浏览器
-->chrome
- 运行效果如下
- 在编辑器就会生成项目,随便点击项目的某个文件,比如点击选中app.vue,点击工具栏
-
运行到真机或者模拟器
- 真机需要连接usb,打开开发者工具开启usb调试功能
- 此处我是采用雷神模拟器,下载安装雷神模拟器,进行如下配置
- 打开模拟器,设置模拟器(如下图)
- 打开HBuilder,点击
运行
-->运行到手机或模拟器
-->android模拟器端口号设置
- 进行模拟器安装目录和端口号配置
- 选择
运行
-->运行到手机或模拟器
--> 选中运行即可 - 切换到模拟器,效果如下
- 打开模拟器,设置模拟器(如下图)
-
-
通过vue-cli命令行创建(不推荐)
- 全局安装vue-cli
npm install -g @vue/cli yarn add @vue/cli -g
- 创建uni-app
vue create -p dcloudio/uni-preset-vue my-project
- 此处项目因为托管github上面,安装可能会超时
- 解决方案
- 使用手机热点
- 增加本地dns解析,修改hosts文件
- 选中模板
- 运行项目
- npm run dev:h5