当前位置:   article > 正文

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

hbuilder怎么在vivo手机运行

演示源码下载地址:

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

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

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

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

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

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

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

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

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

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

 

 

 

 

 

 

 

 

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

 

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

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

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

 

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

 

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

  1. <template>
  2. <view>
  3. login ...
  4. </view>
  5. </template>
  6. <script>
  7. export default {
  8. data() {
  9. return {
  10. }
  11. },
  12. onLoad: function(e) {
  13. // #ifdef APP-PLUS
  14. uni.login({
  15. success: (res) => {
  16. uni.getUserInfo({
  17. success: function(info) {
  18. console.log(info);
  19. },
  20. fail: () => {
  21. uni.showToast({
  22. title: '微信登录授权失败'
  23. });
  24. }
  25. })
  26. },
  27. fail: () => {
  28. uni.showToast({
  29. title: '微信登录授权失败'
  30. });
  31. }
  32. });
  33. // #endif
  34. },
  35. methods: {
  36. }
  37. }
  38. </script>
  39. <style>
  40. </style>

 

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

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

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

 

 

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

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

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

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

 

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

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

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

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

 

 

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/295057
推荐阅读
相关标签
  

闽ICP备14008679号