2021-08-02 uni-app基础教程 环境配置
一、环境配置
1.下载HBuilderX
通过HBuilderX可视化界面,HBuilderX内置相关环境,开箱即用,无需配置nodejs
开始之前,开发者需先下载安装如下工具:
- HBuilderX:官方IDE下载地址
下载App开发版,可开箱即用;如下载标准版,在运行或发行uni-app时,会提示安装uni-app插件,插件下载完成后方可使用。
如使用cli方式创建项目,可直接下载标准版,因为uni-app编译插件被安装到项目下了
2.创建uni-app
在点击工具栏里的文件->新建->项目:
选择uni-app类型,输入项目名,选择模板,点击创建,即可成功创建。
uni-app自带的模板有。Hello uni-app,是官方的组件和API示例。还有一个重要模板是uni ui项目模板,日常开发推荐使用该模板,已内置大量常用组件。
3.运行uni-app
- 浏览器运行:进入hello-uniapp项目,点击工具栏的运行->运行到浏览器->选择浏览器,即可在浏览器里面体验uni-app的H5版。
- 真机运行:连接手机,开启USB调试,进入hello-uniapp项目,点击工具栏的运行->真机运行->选择运行的设备,即可在该设备里面体验uni-app。如手机无法识别,请点击菜单运行-运行到手机或模拟器-真机运行常见故障排查指南。注意当前开发App也需要安装微信开发者工具。
- 在微信开发者工具里运行:进入hello-uniapp项目,点击工具栏的运行->运行到小程序模拟器->微信开发者工具,即可在微信开发者工具里面体验uni-app。注意:如果是第一次使用,需要先配置小程序ide的相关路径,才能运行成功。如下图,需在输入框输入微信开发者工具的安装路径。若HBuilderX不能正常启动微信开发者工具,需要开发者手动启动,然后将uni-app生成小程序工程的路径复制到微信开发者工具里面,在HBuilderX里面开发,在微信开发者工具里面就可以看到实时的效果。uni-app或将项目编译到根目录的unpackage目录。
- 在支付宝小程序开发者工具里运行:进入hello-uniapp项目,点击工具栏的运行->运行到小程序模拟器->支付宝小程序开发者工具,即可在支付宝小程序开发者工具里面体验uni -app。
- 在百度开发者工具里运行:进入hello-uniapp项目,点击工具栏的运行->运行到小程序模拟器->百度开发者工具,即可在百度开发者工具里面体验uni-app。
- 在字节跳动开发者工具里运行:进入hello-uniapp项目,点击工具栏的运行->运行到小程序模拟器->字节跳动开发者工具,即可在字节跳动开发者工具里面体验uni -app。
提示
- 如果是第一次使用,需要配置开发工具的相关路径。请点击工具栏的运行->运行到小程序模拟器->运行设置,配置相应的小程序开发者工具的路径。
- 支付宝/百度/字节跳动小程序工具,不支持直接指定项目启动并运行。因此开发工具启动后,替换HBuilderX控制台中提示的项目路径,在相应的小程序开发者工具中打开。
- 如果自动启动小程序22
- 】 发工具失败,请手动启动小程序开发工具放入HBuilderX控制台提示的项目路径,打开项目。
运行的快捷键是Ctrl+r。HBuilderX还提供了快捷运行菜单,可以按数字快速选择要运行的设备:
4.目录结构
一个 uni-app 工程,默认包含如下目录及文件:
┌─components uni-app组件目录
│ └─comp-a.vue 可复用的a组件
├─hybrid 存放本地网页的目录,详见
├─platforms 存放各平台专用页面的目录,详见
├─pages 业务页面文件存放的目录
│ ├─index
│ │ └─index.vue index页面
│ └─list
│ └─list.vue list页面
├─static 存放应用引用静态资源(如图片、视频等)的目录,注意:静态资源只能存放于此
├─wxcomponents 存放小程序组件的目录,详见
├─main.js Vue初始化入口文件
├─App.vue 应用配置,用来配置App全局样式以及监听 应用生命周期
├─manifest.json 配置应用名称、appid、logo、版本等打包信息,详见
└─pages.json 配置页面路由、导航条、选项卡等页面类信息,详见
5.手机模拟器
下载手机模拟器
MUMU模拟器:https://mumu.163.com/
模拟器端口:
手机模拟器的名称 | 默认端口号 |
Genymotion模拟器 | 5555 |
夜神模拟器 | 62001/52001 |
海马玩模拟器 | 26944 |
mumu模拟器 | 7555 |
天天模拟器 | 6555 |
逍遥安卓模拟器 | 21503 |
BlueStacks 蓝叠3模拟器 | 5555 |
雷神安卓模拟器 | 5555 |
腾讯手游助手 | 5555 |
2021-08-02 uni-app基础教程 环境配置相关推荐
- Glyphs App Essential Training Glyphs App基础教程 Lynda课程中文字幕
Glyphs App Essential Training 中文字幕 Glyphs App基础教程 中文字幕Glyphs App Essential Training 每个设计师都有一个字体 Glyp ...
- Spring+SpringMVC+Mybatis(开发必备技能)01、基础idea环境配置
Spring+SpringMVC+Mybatis(开发必备技能) 01.基础idea环境配置 环境: 数据库:MySQL 开发工具:IntelliJ IDEA 2020.1.3 x64 框架:SSM( ...
- 街舞学习APP基础教程开发
街舞学习APP开发,街舞学习APP开发教程.随着移动互联飞速发展,大家可以在网络上获得各种学习培训资讯,但这种资讯大部分真假难分,因此用户要想寻找有价值的信息内容通常需耗费很多的时长和活力.少儿街舞因 ...
- python详细安装教程环境配置-python3.6环境安装+pip环境配置教程图文详解
1.python安装可以跨平台 2.有两个版本2.7和3.6,第三方库适用2.7版,两个版本不兼容 windows安装: 第一种方法官网安装: 在官网下载安装包如图: 图下点击是默认下载32位所以我们 ...
- python详细安装教程环境配置-python环境安装详细步骤
python环境怎么安装 1.准备好安装包 1)上python官网下载python运行环境(https://www.python.org/downloads/),目前比较稳定的是python-3.5. ...
- Python爬虫APP抓包环境配置
工于利其事,必先利其器,在开始APP数据抓取之前,环境配置必不可少. 一套完美的开发环境,将使你未来的开发工作事半功倍. 一.抓包工具 抓包工具有很多,比较热门的有Wireshark.Fiddler. ...
- Git 基础知识 -- 环境配置、搭建Git服务器
简介 Git 是一种分布式的项目版本控制管理工具,所采取的概念是 "去中心化" ,每个开发人员都有自己的本地代码仓库,同时为同一个远程仓库服务.有了 Git 就可以将某个文件回 ...
- 云计算入门教程环境配置
###########严重声明################# 本人支持一切正规软件开发行为,接受知识付费理念. 并坚决抵制盗版行为,用于学习交流的非盈利目的的,且法律允许且支持的条件下,可以进行相 ...
- 02引言-AngularJS基础教程
0. 目录 目录 前言 正文 1 AngularJS 难或易 2 您需要Angular吗 3 使用Angular的理由 4 关于本书 5 接下来 声明 1. 前言 AngularJS是为了克服HTML ...
最新文章
- 一种关注于重要样本的目标检测方法!
- 批量残差网络-Aggregated Residual Transformations for Deep Neural Networks
- JavaScript中获取表单信息并添加在表格中
- 汽车保险解读:解析涉水损失险与自燃险
- CentOS 6.8 安装FTP及添加用户
- 【英语学习】【Python】Programming in Python 3 的目录
- 寒假集训日志(二)——最小生成树,拓扑排序,欧拉回路,连通路
- (90)常见伪路径约束情景
- 别再瞎找了,设计师日常工作需要的软件都在这里了
- 轻量级java开发工具_C++主流开发工具推荐
- 进入Python的多彩世界
- 蓝屏代码0x00000109 错误分析
- 《21天学通C语言》
- iOS 一种连线题效果的实现
- 少年派背后的故事 NVIDIA令其栩栩如生
- 常见下载方式之BT下载实现过程详解
- 【后端】Nginx 体系
- python独立网站教程_python做网站教程_如何免费做网站的教程
- Python安装Numpy模块
- Win10连接投影仪画面不是全屏怎么办
热门文章
- Primavera Unifier 自定义报表制作及打印分享
- 基于IQxel的WIFI RF测试指导书
- 互联网日报 | 双十一购物狂欢火爆开启;小米重返全球智能手机出货量前三;高德地图上线车道级导航...
- 【计算机网络】转菜鸟教程计算机网络知识总结
- 淘客基地:关于【淘客CMS优惠券商城】域名被限制通知
- 用了影印版的教材,觉得不错,比翻译版的好
- (一)GNURadio3.9 安装教程
- 小型桌面计算器的实现(javacc)
- 图片隐写神器Stegsolve安装教程
- 表单引擎之表单组件详细说明