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)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年11月8日 20:55:19
下一篇 2025年11月8日 20:56:12

相关推荐

  • 使用 Mask 导入本地图片时,如何解决跨域问题?

    跨域疑难:如何解决 mask 引入本地图片产生的跨域问题? 在使用 mask 导入本地图片时,你可能会遇到令人沮丧的跨域错误。为什么会出现跨域问题呢?让我们深入了解一下: mask 框架假设你以 http(s) 协议加载你的 html 文件,而当使用 file:// 协议打开本地文件时,就会产生跨域…

    2025年12月24日
    200
  • 为什么在 React 组件中无法获得 Tailwind CSS 语法提示?

    为什么在 React 组件中无法获得 Tailwind CSS 语法提示? 你在 VSCode 中编写 HTML 文件时,可以正常获取 Tailwind CSS 语法提示。但当你尝试在 React 组件中编写 Tailwind CSS 时,这些提示却消失不见了。这是什么原因造成的? 解决方案 要解决…

    2025年12月24日
    000
  • 如何在 VSCode 中为 React 组件启用 Tailwind CSS 提示?

    在 vscode 中为 react 组件启用 tailwind css 提示 如果你在使用 vscode 编写 react 组件时,发现 tailwind css 提示无法正常显示,这里有一个解决方法: 安装 tailwind css intellisense 插件 这是实现代码提示的关键,确保你已…

    2025年12月24日
    200
  • Vue3 中如何将页面上的 PX 单位转换为 REM?

    vue3 下如何实现某个页面 px 自适应到 rem? 在 vue3 中,您可以在某个页面中使用 px 转 rem 的自适应功能,以免影响其他项目 ui 框架。以下是实现方法: 使用 jquery 获取页面宽度,并将其作为基准值。例如,使用 375 作为基准,您可以在页面 mounted 生命周期函…

    2025年12月24日
    000
  • 如何实现 Vue 3 项目中特定页面自适应,避免影响全局 UI 框架?

    自适应页面 px 到 rem 插件探索 在 vue 3 项目中,开发者有时需要让某个特定页面具有自适应大小,即根据不同分辨率自动调整 px 到 rem 的转换。然而,传统的 px-to-rem 插件可能会影响整个项目的 ui 框架。 为了解决这个问题,这里提供了一种利用 javascript 和 v…

    2025年12月24日
    000
  • Vue 3 页面如何实现 px to rem 自适应?

    如何在 vue 3 页面中实现 px to rem 自适应? 在 vue 项目中,有时需要让特定的页面进行 px to rem 自适应,以实现自动缩放。以下是一个可用的解决方案: 使用 javascript 获取页面宽度,并以 375px 作为基准值。例如: let appwidth = $(‘#a…

    2025年12月24日
    400
  • CSS 砌体 Catness

    css 就像技术中的其他东西一样 – 它总是在变化和发展。该领域正在进行的开发是 css 网格布局模块级别 3,也称为 css masonry 布局。 theo 制作了一段视频,介绍了它的开发方式以及苹果和谷歌就如何实施它进行的辩论。 所有这些让我很高兴尝试 css 砌体! webkit…

    好文分享 2025年12月24日
    000
  • 如何解决VSCode中折叠部分的代码复制问题?

    Vscode中折叠代码的复制方法 当Vscode中的代码过多时,可以将其折叠起来以方便查看和编辑。不过,有时用户可能会发现折叠后复制代码时只复制了显示的部分,而折叠部分没有被复制。以下是如何解决此问题的方法: 使用快捷键Ctrl+C直接复制 当代码折叠时,直接使用Ctrl+C快捷键复制即可复制所有代…

    2025年12月24日
    000
  • 如何复制折叠的代码?

    Visual Studio Code 中如何复制折叠的代码? Visual Studio Code (vscode) 中,当遇到过长的代码时,为了提高可读性和简洁性,开发人员会经常使用折叠功能将代码折叠起来。然而,在折叠代码后,直接按住 Ctrl + C 复制代码时,只会复制展开的部分,而折叠的部分…

    2025年12月24日
    000
  • 如何在 VSCode 复制折叠的代码?

    如何复制折叠的 VSCode 代码 使用 VSCode 时,代码过长可能会造成不便。在折叠代码后,发现无法正常复制折叠的部分,令人感到烦恼。本文将介绍一种解决方案,帮助你轻松复制折叠的 VSCode 代码。 问题:如何复制折叠起来的 VSCode 代码? 当你折叠代码后,直接选中复制只会复制未折叠的…

    2025年12月24日
    000
  • CSS 太棒了!

    我正在学习什么 css 赋予了页面活力。多年来,css 变得越来越强大,并且已经开始用于制作以前需要 javascript 的动画。本周我一直在研究它的一些更高级的属性。 媒体查询 媒体查询几乎已经成为新时代设备的必需品。随着智能手机的出现,通过手机消费媒体的人比任何其他设备都多。因此,网站必须在移…

    2025年12月24日
    000
  • 试验 Tailwind CSS:快速指南

    tailwind css 是一个实用性优先的 css 框架,因其灵活性和易用性而在 web 开发人员中广受欢迎。 tailwind css 在 npm 上的每周下载量超过 950 万次(2024 年 8 月 5 日),显然它是 web 开发社区的最爱。在这篇博文中,我们将探讨如何在不设置本地开发环境…

    2025年12月24日
    000
  • android 怎么用html5_安卓用WebView加载html5页面或开发混合应用【使用】

    Android中WebView集成需四步:一、声明权限与控件并加载HTML;二、启用JavaScript及HTML5特性;三、通过assets目录加载本地资源;四、用addJavascriptInterface实现JS与Java通信,并手动管理生命周期。 2、在布局文件(如 activity_mai…

    2025年12月23日
    000
  • 虎牙 html5怎么用_虎牙客户端设置选HTML5播放器开启无Flash观看【设置】

    虎牙直播可通过网页端、PC客户端、浏览器及移动端四步实现HTML5播放:网页端在设置中开启“优先使用HTML5”;PC端在播放设置中选择HTML5并勾选“始终使用”;浏览器需禁用Flash并启用HTML5优先实验选项;移动端访问m.huya.com自动启用HTML5。 如果您在使用虎牙直播时希望避免…

    2025年12月23日
    000
  • acfun 如何开启html5_AcFun开启HTML5播放器设置步骤【指南】

    AcFun用户需登录后进入个人中心“播放设置”,将“默认播放器类型”选为HTML5并保存;若未生效,可在视频URL后加?html5=1强制启用,或通过开发者工具清除站点数据。 如果您在使用AcFun观看视频时发现播放器为Flash版本,可能会影响播放流畅度和兼容性。以下是开启HTML5播放器的具体操…

    2025年12月23日
    000
  • VSCode如何使用HTML插件_高效开发环境配置【技巧】

    VSCode中HTML开发需配置五项功能:一、启用内置HTML语言支持;二、配置Emmet实现快捷展开;三、安装Live Server插件实现自动刷新预览;四、启用Auto Rename Tag同步修改成对标签;五、配置Prettier实现HTML格式自动化。 如果您在VSCode中编写HTML文件…

    2025年12月23日
    000
  • 手机中如何打开html_在手机浏览器打开HTML文件步骤【步骤】

    需通过文件管理器定位HTML文件并用浏览器打开,或输入file:///路径、使用第三方查看器、授予浏览器所有文件访问权限。 如果您在手机中保存了HTML文件,但无法直接查看其网页效果,则可能是由于缺少正确的打开方式或文件路径未被浏览器识别。以下是将本地HTML文件在手机浏览器中正确打开的具体步骤: …

    2025年12月23日
    000
  • 怎么在vscode中运行html_vscode运行html文件步骤【教程】

    使用Live Server插件可实现实时预览,安装后右键HTML文件选择Open with Live Server即可在浏览器中自动打开并实时刷新页面。 如果您在使用 VSCode 编辑 HTML 文件,但无法直接查看页面效果,可以通过多种方式快速预览和运行 HTML 文件。以下是具体的操作步骤: …

    2025年12月23日
    000
  • 怎么进入html5编辑_用VSCode/记事本打开.html文件即可进入HTML5编辑【进入】

    最直接编辑HTML5文件的方式是用文本编辑器打开.html文件:一、VSCode右键打开或拖拽加载;二、记事本右键打开并设UTF-8编码;三、VSCode命令面板快速搜索打开。 如果您希望对HTML5文件进行编辑,最直接的方式是使用文本编辑器打开已有的.html文件。以下是具体操作步骤: 一、使用V…

    2025年12月23日
    000
  • vscode设置html5环境_插件配置与代码片段设置【教程】

    若VS Code中HTML文件缺乏语法高亮、智能补全及HTML5结构快速生成,需安装Auto Close Tag、Auto Rename Tag、CSS class IntelliSense和HTML Boilerplate插件,启用Emmet并配置html关联与格式化设置。 如果您在 Visual…

    2025年12月23日
    000

发表回复

登录后才能评论
关注微信