VSCode如何进行安卓开发?Code FA项目实战分享

本篇文章带大家了解一下vscode如何进行安卓开发?希望对需要的朋友有所帮助!

VSCode如何进行安卓开发?Code FA项目实战分享

vs code 大部分是由 ts 编写,上层 UI 可以运行在各个系统的浏览器中,但 vs code 基于 electron 框架,这个框架提供了对 node 的支持,一些浏览器内核中的 js 引擎没有的 api,例如 I/O,系统内核的一些交互等。而 code-server 则是解决了脱离 electron 的问题。目前安卓上有一个叫 aid learing 的软件,自带 VS Code ,看了一下原理差不多,并不是 linux 图形界面打开的 VS Code,也是打开的 webview 连接本地的服务,但这个玩意占磁盘内存太高,整个下载安装完就干掉6个g。【推荐学习:《vscode入门教程》】

客户端框架

客户端是用 Flutter 进行的开发,而这个框架的选用并不是为了跨端,仅仅是为了快速尝试,还有基础能力的使用。

实现方法分析

code-server 在 github 发布的版本中是有 arm64 架构的,整个下载后,开终端解压执行就挂了,这个虽然是 arm64,并且带有一个 arm64 的 node,但是是为完整 linux 准备的。也就是说,node 中硬编码了 /usr /lib 等这些路径,并且附带的 node_modules 中也有大量的使用到 linux 特有节点的路径,这些安卓上都没有。后来一想,termux 中自带的环境也是有 libllvm gcc nodejs 的,把整个 node_mudules 一删,再手动 install 一下,就行了。所以整个流程大致分为两类。

初始尝试方案:非完整Linux

启动 termux 环境

安装 node,python,libllvm,clang

下载 code-server arm64,解压

处理兼容,删除 node_modules ,重新 yarn install

执行 bin/code-server 启动服务

经过一些测试发现,这种模式有一些问题。

下载的依赖太多,由于源都在我的个人服务器,会下很久。编译太久,yarn install 的时候调用了 gcc 的编译,整个过程特别耗时。启动的 vs code 用不了搜索代码(正常情况能支持这个功能)磁盘占用太大,一阵操作下来,直接1.6g磁盘空间给干没了,主要是 npm install 拉了很多东西,还生成了一堆缓存,node_modules 嘛,比黑洞还重的东西。

不过按照以上的流程过一遍后,code-server 内的 node_modules 已经是安卓 arm64 可用的模块了,二次打包 code-server,流程就可以简化成如下

启动 termux 环境

安装 node

下载 code-server arm64,解压

执行 bin/code-server

但还是会存在编辑器无法搜索代码的 bug,node 虽然只有 20m ,但还是在个人服务器,下行带宽 5mb,大概 700kb/s ,emmm,要集成到 apk 内的话,得集成 deb ,调 dpkg 去安装,放弃。

最后使用方案:完整Linux

启动 termux 环境

下载并安装完整 Linux(30m)

下载 code-server arm64(自带node能用了)

执行 bin/code-server 启动服务

最终是选用了完整 Linux 的方式,除了安装需要的体积更小之外,还有完整源的支持,异常 bug 的避免等。由于整个 VS Code 的启动需要的 130mb 的内存都是第一次打开需要的,所以将这些内存的占用放到服务器上,由 app 启动再下载的意义并不大,最后就全都作为资源文件集成到了 apk 内。

具体实现

启动 termux 环境

这个过程之前有现成的轮子了,只需要按照 termux-package 的编译脚本编译一个 bootstrap 集成到 apk,app 启动进行解压,然后根据符号链接格式进行恢复就行。终端是 termare_view。

bootstrap 是一个带有最小依赖的类 linux 环境,有bash,apt 等。

具体实现代码

function initApp(){  cd ${RuntimeEnvir.usrPath}/  echo 准备符号链接...  for line in `cat SYMLINKS.txt`  do    OLD_IFS="$IFS"    IFS="←"    arr=($line)    IFS="$OLD_IFS"    ln -s ${arr[0]} ${arr[3]}  done  rm -rf SYMLINKS.txt  TMPDIR=/data/data/com.nightmare.termare/files/usr/tmp  filename=bootstrap  rm -rf "$TMPDIR/$filename*"  rm -rf "$TMPDIR/*"  chmod -R 0777 ${RuntimeEnvir.binPath}/*  chmod -R 0777 ${RuntimeEnvir.usrPath}/lib/* 2>/dev/null  chmod -R 0777 ${RuntimeEnvir.usrPath}/libexec/* 2>/dev/null  apt update  rm -rf $lockFile  export LD_PRELOAD=${RuntimeEnvir.usrPath}/lib/libtermux-exec.so  install_vs_code  start_vs_code  bash}

RuntimeEnvir.usrPath 是 /data/data/$package/files/usr/bin

安装完整 Linux 和 code-server

这个我从好几个方案进行了筛选,起初用的 atlio 这个开源,整个开源依赖 python,并且有一个requirement.txt ,需要执行 python -r requirement.txt,依赖就是一大堆,后来换了 proot-distro,纯 shell,所以只需要直接集成到 apk 内就行。

1.安装 ubuntu

install_ubuntu(){  cd ~  colorEcho - 安装Ubuntu Linux  unzip proot-distro.zip >/dev/null  #cd ~/proot-distro  bash ./install.sh  apt-get install -y proot  proot-distro install ubuntu  echo '$source' > $ubuntuPath/etc/apt/sources.list}

2.安装 code-server

install_vs_code(){  if [ ! -d "$ubuntuPath/home/code-server-$version-linux-arm64" ];then    cd $ubuntuPath/home    colorEcho - 解压 Vs Code Arm64    tar zxvf ~/code-server-$version-linux-arm64.tar.gz >/dev/null    cd code-server-$version-linux-arm64  fi}

启动 code-server

直接用 proot-distro 启动就行,非常方便

–termux-home 参数:开启 app 沙盒的 home 挂载到 ubuntu 的 /root 下,这样 ubuntu 就能用 app 里面的文件夹了。

start_vs_code(){  install_vs_code  mkdir -p $ubuntuPath/root/.config/code-server 2>/dev/null  echo '  bind-addr: 0.0.0.0:8080  auth: none  password: none  cert: false  ' > $ubuntuPath/root/.config/code-server/config.yaml  echo -e "x1b[31m- 启动中..x1b[0m"  proot-distro login ubuntu -- /home/code-server-$version-linux-arm64/bin/code-server}

其实整个实现其实是没啥难度的,全都是一些 shell 脚本,也是得益于之前的 Termare 系列的支持,有兴趣的可以看下这个组织。然后就是打开 webview 的过程了,如果觉得性能不好,你可以用局域网的电脑来进行连接。看一下非首次的启动过程

WebView 实现方案

首先去 pub 看了一下 webview 的插件,官方目前正在维护的 webview 有这样的提示

Snyk Code Snyk Code

当下比较流行的代码安全检查工具

Snyk Code 26 查看详情 Snyk Code

Hybrid composition mode has a built-in keyboard support while Virtual displays mode has multiple keyboard issuesHybrid composition mode requires Android SKD 19+ while Virtual displays mode requires Android SDK 20+Hybrid composition mode has performence limitations when working on Android versions prior to Android 10 while Virtual displays is performant on all supported Android versions

也就是说开启 hybird 后,安卓10以下有性能限制,而使用虚拟显示器的话,键盘问题会很多。

实际尝试的时候,OTG 连接的键盘基本是没法用的。

再分析了下这个场景,最后还是用的原生 WebView,这里有些小坑。

必须启用项

        WebSettings mWebSettings = mWebView.getSettings();        //允许使用JS        mWebSettings.setJavaScriptEnabled(true);        mWebSettings.setJavaScriptCanOpenWindowsAutomatically(true);        mWebSettings.setUseWideViewPort(true);        mWebSettings.setAllowFileAccess(true);        // 下面这行不写不得行        mWebSettings.setDomStorageEnabled(true);        mWebSettings.setDatabaseEnabled(true);        mWebSettings.setAppCacheEnabled(true);        mWebSettings.setLoadWithOverviewMode(true);        mWebSettings.setDefaultTextEncodingName("utf-8");        mWebSettings.setLoadsImagesAutomatically(true);        mWebSettings.setSupportMultipleWindows(true);

路由重定向

有些场景 VS Code 会打开一个新的窗口,例如点击 file -> new window 的时候,不做处理,webview 会调起系统的浏览器。

        //系统默认会通过手机浏览器打开网页,为了能够直接通过WebView显示网页,必须设置        mWebView.setWebViewClient(new WebViewClient() {            @Override            public boolean shouldOverrideUrlLoading(WebView view, String url) {                //使用WebView加载显示url                view.loadUrl(url);                //返回true                return true;            }        });

浏览器正常跳转

例如终端输出了 xxx.xxx,ctrl + 鼠标点击,预期是会打开浏览器的。

mWebView.setWebChromeClient(webChromeClient);WebChromeClient webChromeClient = new WebChromeClient() {        @Override        public boolean onCreateWindow(WebView view, boolean isDialog, boolean isUserGesture, Message resultMsg) {            WebView childView = new WebView(context);//Parent WebView cannot host it's own popup window.            childView.setBackgroundColor(Color.GREEN);            childView.setWebViewClient(new WebViewClient() {                @Override                public boolean shouldOverrideUrlLoading(WebView view, String url) {                    context.startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse(url)));                    return true;                }            });            WebView.WebViewTransport transport = (WebView.WebViewTransport) resultMsg.obj;            transport.setWebView(childView);//setWebView和getWebView两个方法            resultMsg.sendToTarget();            return true;        }    };

可行性探索

这个能干嘛?安卓屏幕那么小,电脑能本地用 VsCode 干嘛要连安卓的?

有一个 vs code 加一个完整的 linux 环境,能 cover 住一些场景的开发了,安卓开发等除外。开发程序到 arm 板子的同学,PC 上还得弄一堆交叉编译工具链,并且每次编译调试过程也很繁琐,现在就能本地写本地编译。

正巧,买了一个平板,爱奇艺之余,也能作为程序员的一波生产力了。

1.png

编译 C 语言

选了一个一直在学习的项目,scrcpy,一堆 c 源码,最后很顺利的编译下来了。

2.png

Web 开发

移动端的网页调试一直都是问题,作为野路子前端的我也很无奈,一般会加一些 vconsole 的组件来获取调试日志。

之前个人项目速享适配移动端 web 就是这么干的

现在,我们可以本地开发,本地调试,有 node 整个前端大部分项目都能拉下来了,真实的移动端物理环境。试试out.gif

写博客

本篇文章完全是在这个安卓版的 VS Code 中完成的,使用 hexo 本地调式

4.png

写文档

5.png

6.png

写后台,接口测试

写一点简单的后台,如 python 的 fastapi,flask,并通过 rest client 进行接口测试

8.png

最后

为了让其他的用户能直接使用到这个 app,我将其上架到了酷安。

看了下 vscodium 和 code-server 的开源协议都是 MIT,如果有侵权的地方辛苦评论区提醒一下鄙人。

Code FA 酷安下载地址

Code FA 个人服务器下载地址

个人软件快捷下载地址

开源地址

随便玩,有问题评论区留言,觉得不错的给个 star,文章不错的给个赞,

以上就是VSCode如何进行安卓开发?Code FA项目实战分享的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/502255.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
Windows电脑如何禁止远程连接?先来两种方法
上一篇 2025年11月8日 20:55:40
java框架与物联网连接性的最佳实践
下一篇 2025年11月8日 20:55:41

相关推荐

  • vscode上怎么运行html_vscode上运行html步骤【指南】

    首先保存文件为.html格式,再通过浏览器或Live Server插件打开预览;推荐安装Live Server实现本地服务器运行与实时刷新,提升开发体验。 在 VS Code 上运行 HTML 文件并不需要复杂的配置,只需几个简单步骤即可预览页面效果。VS Code 本身是一个代码编辑器,不直接运行…

    2026年5月10日
    100
  • php源码怎么运行手机_php源码手机运行环境搭建步骤【教程】

    可在手机上通过特定工具运行PHP源码。首先选择支持PHP的移动应用,安卓用户可安装UserLAnd或KSWEB,iOS用户可尝试iSH Shell或a-Shell;然后配置本地服务器环境,启动HTTP和PHP服务,将PHP文件放入指定根目录;接着可通过Termux搭建完整开发环境,更新包列表并安装P…

    2026年5月10日
    200
  • Binance交易所2026版安卓下载 币安平台正版App v3.8.8

    币安(binance)是全球领先的数字资产交易平台之一,为用户提供广泛的数字货币交易服务、金融衍生品以及资产管理等功能。币安app以其安全稳定、操作便捷和功能全面的特点,受到了全球数百万用户的信赖。本文将为您提供币安平台正版app v3.8.8的安卓版本下载及安装教程,并详细介绍后续的注册、认证与交…

    2026年5月10日
    000
  • 欧易APP安卓版官方下载 v6.147.0 正版OKE手机交易所客户端

    欧易(oke)是一款全球领先的数字资产交易平台,为用户提供安全、稳定、可靠的数字资产交易服务。它支持数百种数字资产的现货和衍生品交易,并以其强大的技术实力、深度的交易流动性以及严格的风险控制体系而受到广大用户的信赖。本文将为您提供欧易app安卓版 v6.147.0 的官方正版下载资源与详细的图文教程…

    2026年5月10日
    100
  • vscode怎么运行html选择浏览器_vscode选浏览器运html法【教程】

    使用Live Server插件可在VS Code中运行HTML文件并指定浏览器。1. 安装Live Server插件后右键HTML文件选择Open with Live Server即可在默认浏览器中预览。2. 通过设置Live Server的Browser选项为chrome、firefox或edge…

    2026年5月10日
    100
  • 火币app下载 火币app官方下载最新版 火币htx交易所安卓版

    若您需要下载火币htx官方最新版的安卓应用,最安全可靠的方式是通过其官方网站进行获取。为了保障您的数字资产安全,请务必避免使用任何非官方渠道提供的下载链接或安装包,因为这些来源可能包含恶意软件,对您的账户和资金构成威胁。访问官网后,通常可以在页面显眼位置找到app下载入口或二维码。 火币官网直达: …

    2026年5月10日
    000
  • HTML如何设置网页图标_HTML favicon.ico图标设置步骤

    首先准备16×16或32×32像素的ICO格式图标文件并命名为favicon.ico,上传至网站根目录;然后在HTML的中添加link标签引用图标,推荐同时支持PNG格式以适配多设备;最后清除浏览器缓存或通过隐身模式测试显示效果。 在网页中设置favicon.ico图标能让浏览器标签页、书签栏等位置…

    2026年5月10日
    100
  • 加密货币新币上市发行排行榜_2025年最新数字货币潜力币首发实时消息

    Binance币安 官网直达: 安卓安装包下载: 欧易OKX ️ 官网直达: 安卓安装包下载: Huobi火币️ 官网直达: 安卓安装包下载: 目前市场上关于“新币上市发行”的实时排行榜并不存在统一标准,多数所谓榜单带有营销或推测性质,投资需高度警惕。根据2025年9月上旬的公开信息,以下是一些与数…

    2026年5月10日
    000
  • vscose html怎么运行_vscode运行html方法(拼写修正)【教程】

    一、安装Live Server扩展可实现自动刷新预览;二、直接右键HTML文件用浏览器打开;三、通过配置tasks.json任务运行文件。 如果您编写了 HTML 文件并希望在浏览器中查看其效果,但不知道如何在 Visual Studio Code 中运行,可以通过以下几种方式快速预览页面内容: 一…

    2026年5月10日
    000
  • OKE交易平台官网入口 欧易官方最新版v6.140.1APP下载安装

    OKE交易平台官网入口 欧易官方最新版v6.140.1APP下载安装OKE交易平台官网入口 欧易官方最新版v6.140.1APP下载安装OKE交易平台官网入口 欧易官方最新版v6.140.1APP下载安装OKE交易平台官网入口 欧易官方最新版v6.140.1APP下载安装

    欧易oke交易平台是全球知名的数字资产交易所,提供现货、合约及理财等多功能服务。本文将详细介绍如何访问欧易官网、下载最新版安卓app、完成安装及注册,并讲解c2c买币操作,帮助新手顺利进入数字资产交易市场。 访问欧易官网入口: ① 打开浏览器,输入欧易OKE官网入口链接访问官方平台。② 在首页找到最…

    2026年5月10日 用户投稿
    100
  • 加密货币是什么意思?加密货币起源、技术、特色

    加密货币起源于2008年中本聪提出的比特币概念,依托区块链、密码学与共识机制实现去中心化交易,具有稀缺性、全球流通和高隐私性,是对传统金融体系的创新补充。 Binance币安 官网直达: 安卓安装包下载: 欧易OKX ️ 官网直达: 安卓安装包下载: Huobi火币️ 官网直达: 安卓安装包下载: …

    2026年5月10日
    000
  • 以太坊ETH交易平台币安官网地址入口

    以太坊ETH交易平台币安官网地址入口以太坊ETH交易平台币安官网地址入口以太坊ETH交易平台币安官网地址入口以太坊ETH交易平台币安官网地址入口

    在当下的加密市场中,选择一款安全可靠的交易平台是每一位新手的第一步。本文将为大家详细介绍币安binance交易所的官网入口、最新版app获取方式、注册操作流程,并额外讲解如何通过c2c买币功能快速完成资产购买,让用户能够顺利开启以太坊(eth)等主流币的交易体验。 一、币安官网入口: 用户如需进入币…

    2026年5月10日 用户投稿
    000
  • VSCode内置了哪些编程语言插件?

    vscode 内置语言插件一览 VSCode 已内置多款语言插件,免除安装市场插件的步骤。以下是如何查看内建语言插件: 快捷键 Ctrl+Shift+P 唤出命令窗口输入并选择 “Show Built-in Extensions”左侧出现的 “Programmin…

    2026年5月10日
    000
  • o易交易所APP官方下载2025 okex安卓正版安装包v6.137.1

    o易交易所APP是一款功能全面的数字资产交易平台,致力于为全球用户提供安全、便捷、专业的加密货币交易服务。该应用支持多种主流数字货币的交易,包括比特币(BTC)、以太坊(ETH)等,并提供币币交易、合约交易、理财等多元化服务。 欧易官网入口: 欧易okex安卓正版安装包v6.137.1: o易交易所…

    2026年5月10日
    000
  • 加密货币排行前十有哪些 加密货币排行榜

    比特币(BTC)凭借稀缺性和机构资金流入稳居榜首;2. 以太坊(ETH)作为智能合约平台引领DeFi与NFT生态;3. 泰达币(USDT)以1:1美元锚定提供市场流动性;4. 瑞波币(XRP)推动跨境支付并拓展国际合作;5. 币安币(BNB)依托币安生态与通缩机制保持竞争力;6. 索拉纳(SOL)以…

    2026年5月10日
    000
  • O易交易所下载最新官方版v6.137.0安卓版

    o易交易所是一款专业的数字资产服务应用,致力于为广大用户提供安全、便捷的交易体验。该平台通过不断的技术创新,优化产品功能,确保用户能够轻松管理和交易其数字资产。本文将为您提供最新官方版本的详细安装指引,并附上官方的app下载链接。您只需通过点击本文中提供的下载链接,即可轻松获取并安装官方应用程序,开…

    2026年5月10日
    200
  • 深入探索Go语言交互式调试:从GDB到Delve

    Go语言的交互式调试功能至关重要,开发者可通过多种工具实现断点设置、单步执行等操作。本文将首先介绍传统的GDB调试方式及其在IDE中的集成,随后重点阐述Go语言原生调试器Delve的优势与使用,并结合主流IDE提供详细的调试实践指南,助您高效定位和解决Go程序中的问题。 Go语言调试基础:GDB 在…

    2026年5月10日
    000
  • 欧易官网APP下载 v6.149.0 安卓手机正版OKX交易所

    欧易okx是一款全球领先的数字资产交易平台,为用户提供包括比特币(btc)、以太坊(eth)等在内的多种数字资产的交易及相关服务。其app设计友好,功能全面,致力于为用户提供安全、稳定、可靠的交易体验。本文将为您提供欧易官网app v6.149.0 安卓手机正版的下载安装教程,并详细介绍后续的注册、…

    2026年5月10日
    000
  • 在vscode中怎么运行html_vscode运行html文件方法【教程】

    1、使用Live Server扩展可实现自动刷新预览,安装后右键选择Open with Live Server即可在浏览器中实时查看HTML页面效果。 如果您在使用VSCode编写HTML文件,但不知道如何快速预览页面效果,可以通过多种方式在浏览器中运行HTML文件。以下是几种常用的实现方法: 一、…

    2026年5月10日
    000
  • C++如何为项目配置调试环境

    配置C++调试环境需生成调试符号并正确设置IDE或调试器。首先编译时添加-g(GCC/Clang)或/Zi(MSVC)以生成调试信息,使用CMake时设CMAKE_BUILD_TYPE为Debug;其次在IDE中配置可执行文件路径、工作目录、命令行参数、环境变量及调试器类型(如GDB、LLDB),V…

    2026年5月10日
    000

发表回复

登录后才能评论
关注微信