使用HbuilderX软件
Hbuilder官网
下载开发版
image.png
HbuilderX插件

1-1 实用的插件

下载内置终端
image.png
image.png
image.png
image.png

1-2 调试

浏览器

uni-app支持多个端同时调试,这也是它最便捷的地方,首先看一下浏览器端的调试:
调试之前我们首先要配置一下你的浏览器的安装路径,默认HBuilder是检测不到的
点击【运行】>>【运行到浏览器】>> 【配置web服务器】
1、环境配置 - 图6

手机调试

以安卓手机为例,需要开启开发者模式才能进行调试,方法如下:
打开【设置】>> 【关于本机】,找到【软件版本】,连续点击五次,即可开启开发者选项
1、环境配置 - 图7
开发者选项的开启和关闭在【设置】 >> 【高级设置】>> 【开发者选项】,如下:
1、环境配置 - 图8
进入打开 【USB调试】,插上数据线连接手机,然后就能真机调试了。中途可能要进行一次授权,点击确认即可,授权成功后你的手机上会安装一个HBuilder app,你之后再开发环境中做的所有效果都会渲染到这个app中
1、环境配置 - 图9
点击,选择自己的手机即可调试
1、环境配置 - 图10

  1. iphone手机更加简单,连接手机后直接运行,他会报错,然后在手机设置一下就行了,步骤如下:
  2. 【设置】>> 【通用】>> 【设备管理】,信任一下HBuilder即可。

小程序调试

点击 【运行】 >> 【运行到小程序模拟器】>> 【运行设置】
1、环境配置 - 图11

打开后把微信开发者工具的安装路径粘贴多对应的地址栏即可
1、环境配置 - 图12

需要注意两点: 1)微信开发者工具必须是官方最新版。 2)微信开发者工具需要授权,方法如下:
打开微信开发者工具,点击设置图标

1、环境配置 - 图13
选择【安全】,服务端口选择开启
1、环境配置 - 图14

然后即可进行微信小程序调试
1、环境配置 - 图15
*百度,支付宝,字节跳动小程序步骤和微信类似