uni-app通过WiFi连接手机调试Android、iOS应用

在使用uni-app进行跨平台开发时，通过WiFi连接手机调试Android和iOS应用可以极大提高开发效率。以下是如何通过WiFi连接进行调试的详细步骤和代码案例。

前提条件

1. 确保你的开发电脑和手机处于同一个WiFi网络中。
2. 手机已安装HBuilder X的调试基座（对Android来说是HBuilder，对iOS来说是HBuilderX的iOS调试助手）。

步骤一：获取设备的IP地址

首先，你需要获取手机的IP地址。这通常可以在手机的WiFi设置中找到。

步骤二：配置HBuilder X

1. 打开HBuilder X：启动你的HBuilder X IDE。

2. 运行/发行：选择你的项目，点击“运行”或“发行”按钮。

3. 选择WiFi连接：在弹出的运行配置窗口中，选择“手机运行”选项卡，然后选择“WiFi无线连接”。

4. 输入IP地址和端口：在“手机IP”字段中输入你手机的IP地址，端口号一般默认即可（如8080），然后点击“连接手机”。

步骤三：手机端的配置

1. 打开调试基座：在手机上打开HBuilder或HBuilderX的iOS调试助手。

2. 扫描二维码或输入IP地址：

   • 对于Android，HBuilder会自动扫描附近的调试请求，或者你可以手动输入电脑的IP地址和端口号。
   • 对于iOS，需要在HBuilderX的iOS调试助手中手动输入电脑的IP地址和端口号。

示例代码（无需修改，仅说明流程）

虽然这个流程不涉及具体的代码修改，但你可以通过以下代码片段了解uni-app的基本项目结构，确保你的项目已经正确配置：

// main.js
import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
    ...App
})
app.$mount()

<!-- pages/index/index.vue -->
<template>
  <view class="content">
    <text>{{ message }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, uni-app!'
    }
  }
}
</script>

<style>
.content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
</style>

结论

通过上述步骤，你应该能够成功通过WiFi连接手机调试uni-app的Android和iOS应用。确保你的开发环境和手机环境都正确配置，且处于同一网络下。这样，你就可以在HBuilder X中实时查看手机上的应用状态，进行高效的开发和调试。