2021-08-03 uni-app基础教程 环境配置
一、环境配置 1.下载
通过可视化界面,内置相关环境,开箱即用,无需配置
下载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-项目,点击工具栏的运行->运行到浏览器->选择浏览器,即可在浏览器里面体验uni-app的H5版。
真机运行:连接手机,开启USB调试,进入hello-项目,点击工具栏的运行->真机运行->选择运行的设备,即可在该设备里面体验uni-app。
如手机无法识别,请点击菜单运行-运行到手机或模拟器-真机运行常见故障排查指南。注意当前开发App也需要安装微信开发者工具。在微信开发者工具里运行:进入hello-项目,点击工具栏的运行->运行到小程序模拟器->微信开发者工具,即可在微信开发者工具里面体验uni-app。
注意:如果是第一次使用,需要先配置小程序ide的相关路径,才能运行成功。如下图,需在输入框输入微信开发者工具的安装路径。若不能正常启动微信开发者工具,需要开发者手动启动,然后将uni-app生成小程序工程的路径复制到微信开发者工具里面,在里面开发,在微信开发者工具里面就可以看到实时的效果。uni-app或将项目编译到根目录的目录。
在支付宝小程序开发者工具里运行:进入hello-项目,点击工具栏的运行->运行到小程序模拟器->支付宝小程序开发者工具,即可在支付宝小程序开发者工具里面体验uni -app。
在百度开发者工具里运行:进入hello-项目,点击工具栏的运行->运行到小程序模拟器->百度开发者工具,即可在百度开发者工具里面体验uni-app。
在字节跳动开发者工具里运行:进入hello-项目,点击工具栏的运行->运行到小程序模拟器->字节跳动开发者工具,即可在字节跳动开发者工具里面体验uni -app。
提示
运行的快捷键是Ctrl+r。还提供了快捷运行菜单,可以按数字快速选择要运行的设备:
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模拟器:
模拟器端口:
手机模拟器的名称
默认端口号
模拟器
5555
夜神模拟器
62001/52001
海马玩模拟器
26944
mumu模拟器
7555
天天模拟器
6555
逍遥安卓模拟器
21503
蓝叠3模拟器
5555
雷神安卓模拟器
5555
腾讯手游助手
5555