ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

VSCode安卓开发实战:原生Gradle、Flutter与React Native三种方式详解

VSCode安卓开发实战:原生Gradle、Flutter与React Native三种方式详解 先和你说个结论用 VSCode 写安卓开发完全可行而且很多场景下比 Android Studio 更顺手。我是从命令行和配置文件一路折腾过来的后来把主力编辑器从 Android Studio 切到 VSCode再用回原生项目时也没有不适感。这篇文章想聊的就是用 VSCode 做安卓开发的三种主要方式一是 VSCode Java/Kotlin Gradle 做原生安卓二是 VSCode Flutter 做跨平台 App三是 VSCode React Native 做跨平台 App。这篇文章适合谁如果你手头电脑配置不算高、受不了 Android Studio 的启动速度如果你本来就是 VSCode 的重度用户不想在两个 IDE 之间来回切又或者你只是想写点安卓小工具、课程设计、个人 Demo那下面这套玩法能帮你省下不少折腾时间。我会把每种方式的工具链、目录结构、构建命令、调试方法、避坑经验都拆开讲尽量让你看完就能照着做。1. 先搞清楚 VSCode 在安卓开发里到底承担什么角色1.1 VSCode 只是“工位”真正的编译引擎在外面很多人一上来就问VSCode 不是编辑器吗怎么能编译安卓答案是它确实不做编译编译靠的是 JDK、Android SDK、Gradle或者 Flutter、React Native 自带的构建系统。VSCode 在这里扮演的是“写代码、看代码、跑命令、调日志”的工位你可以把它理解成一个高级终端加代码浏览器的组合体。这个定位决定了它的取舍。好处是轻启动快内存占用小对 Markdown、Git、远程开发、AI 代码补全这些场景的支持都很好。坏处是它不像 Android Studio 那样开箱即用很多和环境有关的配置需要你自己动手补。你越理解这层关系后面遇到问题就越不慌——环境报错的时候不是 VSCode 出问题了而是你机器上的 JDK、SDK、Gradle 配置有问题。1.2 三种主要方式到底怎么分既然 VSCode 不管编译那“怎么编译”就成了划分方式的核心。第一种是原生安卓路线也就是用 Java 或者 Kotlin 写代码用 Gradle 构建 APK和 Android Studio 做的其实是同一件事只是把 IDE 换成了 VSCode第二种是 Flutter 路线代码用 Dart 写UI 直接绘制构建的时候再调用 Android 工具链出 APK第三种是 React Native 路线代码用 JavaScript/TypeScript 写运行时通过 Metro 打包 JS 代码最后也调用 Android 工具链生成安装包。三条路线都能让你在 VSCode 里完成从创建项目到跑到真机、构建 APK 的完整流程但适用人群差别很大。原生路线适合必须写 Java/Kotlin 的课程作业、已有原生工程要维护的人Flutter 适合喜欢统一渲染层、追求高性能动画的开发者React Native 则适合前端出身、想把 Web 技能迁移到移动端的人。1.3 前置环境JDK 和 Android SDK 是共用底座无论选哪条路线有两样东西是绕不开的JDK 和 Android SDK。JDK 是 Java 工具链的基石Gradle、Kotlin、部分构建工具都要靠它跑Android SDK 则提供编译用的 android.jar、aapt2、adb、模拟器等组件。安装 JDK 建议直接用 JDK 17这已经是目前主流安卓构建链的稳定版本。配好环境变量后在终端输入java -version能看到版本号就说明成功。接着准备 Android SDK你不需要非得装 Android Studio但需要拿到完整的 SDK 目录。最简单的办法是安装 Android Studio 一次之后让它自己把 SDK 下载到默认路径如果你不想装也可以用命令行工具单独下载 platform-tools、platforms、build-tools然后把环境变量配好。最终需要确认这几个变量JAVA_HOME指向 JDK 安装目录ANDROID_HOME或ANDROID_SDK_ROOT指向 SDK 目录platform-tools目录加入 PATH保证能直接运行adb我个人习惯把 SDK 放在一个独立目录避免和用户目录下的缓存纠缠。这套基础环境配好后后面的三种开发方式都能共用省掉重复配置的时间。2. 方式一VSCode Java/Kotlin Gradle 做原生安卓2.1 编辑插件这样配提示和跳转才像样原生安卓开发在 VSCode 里最核心的痛点是代码提示和跳转。Java 方面我一直用的是微软官方扩展包Extension Pack for Java自带语言服务器、调试器、Maven/Gradle 支持装上之后最基本的类名提示、自动 import、F12 跳转都能用。Kotlin 方面目前的插件质量参差不齐我实际用下来比较稳的是Kotlin Language这个扩展它能提供基础的语法高亮和补全虽然不如 IntelliJ 的 Kotlin 插件智能但日常写写业务代码足够。另外我还建议装Android Extensions或者Android ID这一类的扩展它们能识别AndroidManifest.xml提供一些资源文件跳转和 APK 构建的入口。不过这些第三方扩展的更新频率不稳定不要对它们抱太高期待真正的构建还是要靠命令行。我的建议是插件只负责让你看得舒服、跳得方便构建一律交给 Gradle。遇到插件失效或者提示错乱不要花太多时间折腾插件配置直接看命令行输出和源码本身效率反而高。2.2 创建一个原生 Android 项目的最省事路径可能有人会问没有 Android Studio怎么创建原生安卓项目答案是用 Gradle 模板。如果你手头没有现成项目我推荐两条路要么先用 Android Studio 新建一个空项目然后切回到 VSCode 打开这是个非常现实的做法很多人其实也是这样干的要么用 Gradle 手动创建但模板文件太琐碎我一般不推荐新手手搓。假设你已经有了一个用 Android Studio 生成的项目用 VSCode 打开后通常会看到这些目录app/src/main/java放 Java/Kotlin 源码app/src/main/res放布局和资源app/build.gradle和build.gradle负责构建配置。App 的入口、Activity、AndroidManifest.xml这些核心文件都能直接在 VSCode 里编辑体验和 Android Studio 差别不大就是缺少可视化布局预览而已。小技巧打开项目后在 VSCode 里按CtrlJ打开终端确认当前目录在项目根目录下后面所有 Gradle 命令都在这个终端里执行。2.3 构建 APK 并安装到真机或模拟器原生项目拿到手后构建 APK 的核心命令就是gradlew。Linux 和 macOS 用./gradlewWindows 用gradlew.bat。最常用的是./gradlew assembleDebug这条命令会编译代码、处理资源、打包生成app/build/outputs/apk/debug/app-debug.apk。第一次运行会下载 Gradle 和依赖包耗时可能比较长属于正常现象。如果只想检查编译是否通过可以先跑./gradlew compileDebugJavaWithJavac能更快发现代码层面的错误。构建完成后连上开启 USB 调试的安卓手机或者启动模拟器用adb install -r app-debug.apk安装包。安装成功后想看 App 运行日志用adb logcat | grep AndroidRuntime这样能过滤出崩溃堆栈。日志级别、过滤条件可以按需求调整我平时会配合--pid你的应用进程号来缩小范围。2.4 原生调试效率提升三板斧原生开发在 VSCode 里最大的短板是调试。你要是在 AndroidManifest 里给 Activity 加一行android:debuggabletrue再用 VSCode 的 Java 调试扩展也能附加到应用进程但说实话体验不如 Android Studio 稳定。我更推荐三板斧组合第一用adb logcat看日志这是大多数逻辑问题的定位利器第二用adb shell am start -n 包名/Activity名快速拉起页面第三用一个能显示 Toast 或者日志的辅助工具类把关键变量值打出来。还有一个容易被忽略的操作改完代码后不用反复打包安装可以用./gradlew installDebug配合 VSCode 的“任务”功能把构建和安装绑定成一个快捷键。这样省下的时间很可观。关于原生路线的常见坑我列几个典型的报SDK location not found检查ANDROID_HOME环境变量是否设置或者项目里local.properties的sdk.dir是否正确。报Unable to load class org.gradle.api.internal.component.SoftwareComponentInternal多半是 Gradle 和 JDK 版本不匹配检查java -version和gradlew脚本里声明的 JDK 版本。新装依赖后找不到类执行./gradlew --sync或重新打开 VSCode 窗口让 Java 语言服务器重新加载。3. 方式二VSCode Flutter 做跨平台安卓开发3.1 Flutter 环境搭建和两个关键插件Flutter 是我个人非常推荐的一种方式因为官方对 VSCode 的支持相当到位基本属于一条龙服务。你只需要做三件事安装 Flutter SDK、安装 Dart 插件、安装 Flutter 插件。Flutter SDK 的安装就是下载压缩包解压到一个路径不带中文的目录然后把bin目录加入 PATH。装完之后在终端运行flutter doctor它会检查 Dart、Android SDK、Chrome 等依赖是否齐全。这里要注意flutter doctor不通过的时候VSCode 里的 Flutter 插件也会经常报错所以先把这个命令跑绿。VSCode 插件商店里搜Flutter和Dart官方出品装上就行。Flutter 插件提供了 Flutter 命令面板、调试配置、设备选择器、热重载按钮基本把最核心的开发流集成进来了。这个体验比原生开发顺滑一个档次。3.2 创建 Flutter 项目并跑到模拟器上环境准备好后在 VSCode 里按CtrlShiftP输入Flutter: New Project选应用类型填项目名就会自动在当前目录生成一个完整的 Flutter 工程。Flutter 的目录结构比原生工程清晰很多lib/main.dart是 Dart 入口android/目录是原生壳工程ios/目录是 iOS 壳工程真正的业务代码都在lib下。想启动安卓模拟器可以用 Android Studio 创建 AVD也可以用 VSCode 右下角的设备选择器选择已启动的模拟器。如果你一个模拟器都没有先用命令flutter emulators查看有哪些可用设备没有的话需要用avdmanager创建命令稍微复杂但一次配好后面很省心。设备就绪后直接在 VSCode 里按F5如果没有配置 launch.jsonFlutter 插件会自动生成一个可用的调试配置。启动后 App 会安装到模拟器上终端会显示Flutter run key commands这时候按r是热重载按R是热重启按q退出。VSCode 也会在编辑器上方显示一排按钮点一下就能触发热重载比敲命令还省事。3.3 热重载调试和 APK 发布打包Flutter 在 VSCode 里的调试体验我觉得是三种方式里最好的。因为 Dart 语言服务器支持完整的断点、变量查看、调用栈信息你可以在main.dart里打断点然后按F5启动体验和调试普通桌面程序没什么区别。再加上热重载速度非常快很多 UI 问题可以在几秒内看到修改效果这比原生改完还要重新构建安装舒服太多。要生成可安装的 APK在 VSCode 终端执行flutter build apk --release这条命令会输出build/app/outputs/flutter-apk/app-release.apk。如果你只想快速分发测试可以用flutter build apk --debugFlutter 的坑主要集中在这几处一是首次构建下载 Gradle 依赖特别慢这时检查 Android SDK 和 Gradle 仓库配置比反复重跑更有效二是flutter doctor显示 Android 工具链有问题多半是cmdline-tools版本或build-tools缺失装一下对应版本就能解决三是热重载偶尔会遇到状态不一致这时候按R做热重启基本都能恢复。4. 方式三VSCode React Native 开发安卓应用4.1 RN 需要的前端工具链和 VSCode 插件React Native 的技术栈更贴近前端Node.js 是核心环境。你需要先安装 Node.js LTS 版本然后准备 JDK 和 Android SDK这两样和前面原生路线共用。最后用 npm 或 yarn 创建项目。我建议使用官方的社区 CLI命令是npx react-native-community/cli init AwesomeProject在 VSCode 里插件方面推荐React Native Tools和ES7 React/Redux/React-Native snippets。前者提供真机/模拟器的启动调试能力后者帮你快速生成组件、导入语句。如果你的项目用了 TypeScript再配合TypeScript Vue Plugin与ESLint写起来就很接近 Web 开发体验了。RN 和 Flutter 最大的不同是RN 没有一种新的 UI 语言而是用 React 组件映射到安卓原生控件JS 代码和原生代码之间有一层桥接。这个特性决定了它的运行需要启动一个 Metro 打包器来实时提供 JS 代码这也是很多新手前期不习惯的地方。4.2 Metro、模拟器与真机运行配置项目创建好后在 VSCode 终端里先跑npm start启动 Metro再另外开一个终端跑npm run android这个命令会触发 Gradle 构建并把应用安装到当前连接的设备上。如果你的系统同时存在多台设备需要先通过adb devices确认目标设备。真机调试时一个常见问题是应用能装能开但加载不出 JS Bundle。这时用一条命令解决adb reverse tcp:8081 tcp:8081作用是让手机上的应用能访问电脑上 Metro 监听的 8081 端口。如果你用的是模拟器官方镜像一般已经把这个端口映射好了不需要手动adb reverse。调试的话在 VSCode 里按F5选择 React Native 调试配置就可以打断点、看 console 日志。另一个技巧是在模拟器上按CtrlM打开开发者菜单可以切换 Debug/Release 模式、调用性能监视器、重新加载 JS这些对排查问题非常有帮助。4.3 RN 打包 APK 和典型问题排查RN 的正式包不能像开发时那样依赖 Metro它需要把 JS 代码打包进资源目录然后和原生代码一起生成 APK。常规做法是先生成 release bundlenpx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/然后在android目录下执行./gradlew assembleRelease。不过如果你的项目配置了apply from: ../../node_modules/react-native/react.gradle也可以直接跑assembleRelease它会自动执行 bundling 步骤。具体看项目模板版本新版本 CLI 通常已经内置了打包流程省去手动 bundle 的麻烦。RN 的坑我踩过不少常见的有报SDK Build Tools revision XX.X.X is too low for project检查build.gradle里的buildToolsVersion改成已安装的版本。报Lambda expressions are not supported at language level 7在build.gradle里增加compileOptions配置指定 Java 8 或更高版本。报Unable to load script from assets index.android.bundle多数是 debug 模式没连上 Metro先跑npm start再重新运行应用。报Could not connect to development server执行adb reverse tcp:8081 tcp:8081然后重新加载。RN 的调试链路相对复杂但只要把 Metro、端口映射、Gradle 构建这三个环节理顺后面就顺手了。5. 三种方式横向对比与最终选型建议5.1 一张表看穿三种方式的差异写到这里我用一张表把三种方式的核心差异总结一下方便你结合自己的情况判断对比项VSCode 原生 GradleVSCode FlutterVSCode React Native语言Java / KotlinDartJavaScript / TypeScriptUI 渲染系统原生控件自绘引擎原生控件 JS 映射开发效率中等构建慢高热重载极快中等依赖 Metro代码提示一般Kotlin 支持偏弱非常好官方插件好前端工具链成熟调试体验日志调试为主完整断点调试断点 Metro 调试适合场景原生项目维护、系统能力深度定制轻量 App、校园项目、需要双端交付前端团队转型移动端电脑配置要求低但对磁盘空间要求不小低较流畅低较流畅实测下来Flutter 的 VSCode 体验最接近 Android Studio 的“开箱即用”因为它官方就把 VSCode 当成一等公民来支持原生开发只建议在你有现成工程或者必须写 Kotlin/Java 的场景下使用RN 则适合那些已经熟练 React 的开发者前端经验能直接迁移过来。5.2 几个容易被人忽略的细节选型的时候除了上面的技术对比还有几个容易被忽略的细节。一个是 VSCode 里的终端会继承系统环境变量但不会自动刷新你改了JAVA_HOME或ANDROID_HOME一定要完全关闭 VSCode 再重新打开相关配置才会生效。另一个是.vscode目录下的settings.json可以针对项目单独配置 Java、Kotlin、Dart 的路径团队协作时可以把通用的配置提交到仓库减少同事的环境对齐成本。还有无论是 Flutter 还是 RN最终的 APK 还是要通过 Android 工具链构建所以 Android SDK 千万别装得太过精简。我遇到过不少次只装了 platform-tools没有对应 platform 和 build-tools 版本导致 Flutter/RN 构建时莫名其妙的报错。这类问题只要打开 SDK Manager把缺失的包补上基本都能解决。5.3 我个人在实际操作中的体会我当前的主力开发环境是 VSCode Flutter偶尔维护一个原生 Kotlin 项目。用下来的最大感受是VSCode 在安卓开发这件事上上限完全取决于你对自己工具链的理解程度。你越清楚每一步构建在做什么VSCode 就越好用越是依赖 IDE 自动帮你处理一切越容易被各种配置问题折磨。如果你是第一次用 VSCode 做安卓我的建议是先别急着删 Android Studio。你可以在 Android Studio 里建好项目模板、配好 SDK再用 VSCode 打开同一个目录慢慢体验它的开发流。这样过渡最平滑也不会因为环境问题卡死在第一天。等你熟悉了 Gradle、Flutter 或 RN 的构建逻辑后再考虑完全脱离 Android Studio这时你会发现 VSCode 是真的轻、真的快而且日常开发完全够用。最后再分享一个我在三个项目里都用得很顺的小技巧把常用的构建命令写到 VSCode 的tasks.json里然后用快捷键CtrlShiftB一键执行。无论是原生 Gradle 的assembleDebug、Flutter 的build apk --release还是 RN 的run-android都可以绑定成任务。这样写代码、构建、看日志就都留在了一个窗口里来回切换的摩擦直接归零。这个小改动我觉得比装一堆花里胡哨的插件更实在。
返回列表