如何让HBuilderX开发工具创建的uni-app项目调试运行在你的手机上,我们不需要安装手机模拟器调试运行程序

演示源码下载地址:

链接:https://pan.baidu.com/s/1d5tEaCC1lku-SMI7QxRhHA
提取码:59lc

演示项目目录结构如下图所示:

如何让HBuilderX开发工具创建的uni-app项目调试运行在你的手机上,我们不需要安装手机模拟器调试运行程序_第1张图片

我的手机型号是vivo X20,刚在天猫上买了一条原装的手机usb数据线,直接使用这条原装的数据线将我的手机连接到电脑上

如何让HBuilderX开发工具创建的uni-app项目调试运行在你的手机上,我们不需要安装手机模拟器调试运行程序_第2张图片

开启手机开发模式:设置 ---> 更多设置 ---> 关于手机 ---> Android 版本 8.1.0 这行上快速连续单击7次

返回到更多设置页,你会发现出现了“开发者选项

如何让HBuilderX开发工具创建的uni-app项目调试运行在你的手机上,我们不需要安装手机模拟器调试运行程序_第3张图片

此时HBuilder X开发工具里面是无法识别我的手机的

如何让HBuilderX开发工具创建的uni-app项目调试运行在你的手机上,我们不需要安装手机模拟器调试运行程序_第4张图片

我让开发工具HBuilderX识别手机的办法是在我的电脑上和手机上先后安装360手机助手来解决问题

http://sj.360.cn/index.html

如何让HBuilderX开发工具创建的uni-app项目调试运行在你的手机上,我们不需要安装手机模拟器调试运行程序_第5张图片

 电脑上安装360手机助手成功后,我们会看到下面这样的界面效果

如何让HBuilderX开发工具创建的uni-app项目调试运行在你的手机上,我们不需要安装手机模拟器调试运行程序_第6张图片

 我们使用手机扫码下载安装360手机助手

如何让HBuilderX开发工具创建的uni-app项目调试运行在你的手机上,我们不需要安装手机模拟器调试运行程序_第7张图片

 如何让HBuilderX开发工具创建的uni-app项目调试运行在你的手机上,我们不需要安装手机模拟器调试运行程序_第8张图片

 如何让HBuilderX开发工具创建的uni-app项目调试运行在你的手机上,我们不需要安装手机模拟器调试运行程序_第9张图片

 如何让HBuilderX开发工具创建的uni-app项目调试运行在你的手机上,我们不需要安装手机模拟器调试运行程序_第10张图片

 如何让HBuilderX开发工具创建的uni-app项目调试运行在你的手机上,我们不需要安装手机模拟器调试运行程序_第11张图片

 如何让HBuilderX开发工具创建的uni-app项目调试运行在你的手机上,我们不需要安装手机模拟器调试运行程序_第12张图片

 如何让HBuilderX开发工具创建的uni-app项目调试运行在你的手机上,我们不需要安装手机模拟器调试运行程序_第13张图片

 如何让HBuilderX开发工具创建的uni-app项目调试运行在你的手机上,我们不需要安装手机模拟器调试运行程序_第14张图片

 如何让HBuilderX开发工具创建的uni-app项目调试运行在你的手机上,我们不需要安装手机模拟器调试运行程序_第15张图片

 正式进入 电脑端360助手 去连接 手机360端助手

 如何让HBuilderX开发工具创建的uni-app项目调试运行在你的手机上,我们不需要安装手机模拟器调试运行程序_第16张图片

上图表示手机端360助手还没有打开,随后我们可以打开手机360助手并且授权软件可以使用 ,

成功通过USB连接截图如下:

如何让HBuilderX开发工具创建的uni-app项目调试运行在你的手机上,我们不需要安装手机模拟器调试运行程序_第17张图片

如何让HBuilderX开发工具创建的uni-app项目调试运行在你的手机上,我们不需要安装手机模拟器调试运行程序_第18张图片

在点击运行-[设备:Android-26dcd9]-[yuedu] 后,在你的手机上立即出现要求你安装HBuilder这个工具的手机版到你的手机上

如何让HBuilderX开发工具创建的uni-app项目调试运行在你的手机上,我们不需要安装手机模拟器调试运行程序_第19张图片

 如何让HBuilderX开发工具创建的uni-app项目调试运行在你的手机上,我们不需要安装手机模拟器调试运行程序_第20张图片

 演示项目成功地返回登录成功信息如下:

如何让HBuilderX开发工具创建的uni-app项目调试运行在你的手机上,我们不需要安装手机模拟器调试运行程序_第21张图片

如何让HBuilderX开发工具创建的uni-app项目调试运行在你的手机上,我们不需要安装手机模拟器调试运行程序_第22张图片

 

 我们只修改一下login.vue的login代码





 

再一次点击运行-[设备:Android-26dcd9]-[yuedu]

如何让HBuilderX开发工具创建的uni-app项目调试运行在你的手机上,我们不需要安装手机模拟器调试运行程序_第23张图片

我们立即会看到手机启动页面是像下面这样的

如何让HBuilderX开发工具创建的uni-app项目调试运行在你的手机上,我们不需要安装手机模拟器调试运行程序_第24张图片

成功登录后显示用户信息如下:

如何让HBuilderX开发工具创建的uni-app项目调试运行在你的手机上,我们不需要安装手机模拟器调试运行程序_第25张图片

 如何让HBuilderX开发工具创建的uni-app项目调试运行在你的手机上,我们不需要安装手机模拟器调试运行程序_第26张图片

 

在开发过程中,我们如何让手机调用台式机或者笔记本上的api数据接口呢?

1.我们要保证的手机和电脑在同一个网段里 —— 通常的办法是将台式电脑与手机都连接同一个wifi上;

2.我们还可以在台式电脑或者笔记电脑上安装花生壳软件,让你的台式电脑或者笔记本电脑作为一个网站服务器

  利用花生壳软件的内网穿透功能,将台式电脑或者笔记电脑上的api数据接口发布到公网上,这样手机就能访问了

如何让HBuilderX开发工具创建的uni-app项目调试运行在你的手机上,我们不需要安装手机模拟器调试运行程序_第27张图片

 如何让HBuilderX开发工具创建的uni-app项目调试运行在你的手机上,我们不需要安装手机模拟器调试运行程序_第28张图片

 3. 配置路由器的NAT也可以将内网电脑作为网站服务器来使用,请先看看自己的路由是否具备这样的功能设置

你喜欢哪种方式就选择哪种方式,不花钱的办法就是让你的手机和电脑同时去蹭同一个邻居家的wifi

如果你身边没有手机或者手机数据线,那就使用像下面这样的软件模拟器调试项目吧

如何把MuMu模拟器集成到HBuilderX开发工具里?

如何让HBuilderX开发工具创建的uni-app项目调试运行在你的手机上,我们不需要安装手机模拟器调试运行程序_第29张图片 如何让HBuilderX开发工具创建的uni-app项目调试运行在你的手机上,我们不需要安装手机模拟器调试运行程序_第30张图片

如何让HBuilderX开发工具创建的uni-app项目调试运行在你的手机上,我们不需要安装手机模拟器调试运行程序_第31张图片

如何让HBuilderX开发工具创建的uni-app项目调试运行在你的手机上,我们不需要安装手机模拟器调试运行程序_第32张图片

 如何让HBuilderX开发工具创建的uni-app项目调试运行在你的手机上,我们不需要安装手机模拟器调试运行程序_第33张图片

 

如何让HBuilderX开发工具创建的uni-app项目调试运行在你的手机上,我们不需要安装手机模拟器调试运行程序_第34张图片

如何让HBuilderX开发工具创建的uni-app项目调试运行在你的手机上,我们不需要安装手机模拟器调试运行程序_第35张图片

你可能感兴趣的:(uni-app)