百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 热门文章 > 正文

把 VS Code 带到安卓 - Code FA

bigegpt 2025-03-12 12:23 14 浏览

注意,本篇讨论的是不基于pc的 这个是9月份初弄出来的,自己一直在使用,一直没来得及分享,前段时间在b站看到了一个差不多的方案。

背景

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。

客户端框架

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

实现方法分析

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

初始尝试方案:非完整Linux

  1. 启动 termux 环境
  2. 安装 node,python,libllvm,clang
  3. 下载 code-server arm64,解压
  4. 处理兼容,删除 node_modules ,重新 yarn install
  5. 执行 bin/code-server 启动服务

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

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

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

  1. 启动 termux 环境
  2. 安装 node
  3. 下载 code-server arm64,解压
  4. 执行 bin/code-server

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

最后使用方案:完整Linux

  1. 启动 termux 环境
  2. 下载并安装完整 Linux(30m)
  3. 下载 code-server arm64(自带node能用了)
  4. 执行 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 有这样的提示

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 上还得弄一堆交叉编译工具链,并且每次编译调试过程也很繁琐,现在就能本地写本地编译。

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

编译 C 语言

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

Web 开发

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

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

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

写博客

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

写文档

写后台,接口测试

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

最后

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

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

Code FA 酷安下载地址

Code FA 个人服务器下载地址

个人软件快捷下载地址

开源地址

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

其实还想尝试下 Flutter for web 的,折腾了半天还是失败了,能写代码,能有提示,编译会引发 dart runtime 的 crash。

相关推荐

最全的MySQL总结,助你向阿里“开炮”(面试题+笔记+思维图)

前言作为一名编程人员,对MySQL一定不会陌生,尤其是互联网行业,对MySQL的使用是比较多的。对于求职者来说,MySQL又是面试中一定会问到的重点,很多人拥有大厂梦,却因为MySQL败下阵来。实际上...

Redis数据库从入门到精通(redis数据库设计)

目录一、常见的非关系型数据库NOSQL分类二、了解Redis三、Redis的单节点安装教程四、Redis的常用命令1、Help帮助命令2、SET命令3、过期命令4、查找键命令5、操作键命令6、GET命...

netcore 急速接入第三方登录,不看后悔

新年新气象,趁着新年的喜庆,肝了十来天,终于发了第一版,希望大家喜欢。如果有不喜欢看文字的童鞋,可以直接看下面的地址体验一下:https://oauthlogin.net/前言此次带来得这个小项目是...

精选 30 个 C++ 面试题(含解析)(c++面试题和答案汇总)

大家好,我是柠檬哥,专注编程知识分享。欢迎关注@程序员柠檬橙,编程路上不迷路,私信发送以下关键字获取编程资源:发送1024打包下载10个G编程资源学习资料发送001获取阿里大神LeetCode...

Oracle 12c系列(一)|多租户容器数据库

作者杨禹航出品沃趣技术Oracle12.1发布至今已有多年,但国内Oracle12C的用户并不多,随着12.2在去年的发布,选择安装Oracle12c的客户量明显增加,在接下来的几年中,Or...

flutter系列之:UI layout简介(flutter-ui-nice)

简介对于一个前端框架来说,除了各个组件之外,最重要的就是将这些组件进行连接的布局了。布局的英文名叫做layout,就是用来描述如何将组件进行摆放的一个约束。在flutter中,基本上所有的对象都是wi...

Flutter 分页功能表格控件(flutter 列表)

老孟导读:前2天有读者问到是否有带分页功能的表格控件,今天分页功能的表格控件详细解析来来。PaginatedDataTablePaginatedDataTable是一个带分页功能的DataTable,...

Flutter | 使用BottomNavigationBar快速构建底部导航

平时我们在使用app时经常会看到底部导航栏,而在flutter中它的实现也较为简单.需要用到的组件:BottomNavigationBar导航栏的主体BottomNavigationBarI...

Android中的数据库和本地存储在Flutter中是怎样实现的

如何使用SharedPreferences?在Android中,你可以使用SharedPreferencesAPI来存储少量的键值对。在Flutter中,使用Shared_Pref...

Flet,一个Flutter应用的实用Python库!

▼Flet:用Python轻松构建跨平台应用!在纷繁复杂的Python框架中,Flet宛如一缕清风,为开发者带来极致的跨平台应用开发体验。它用最简单的Python代码,帮你实现移动端、桌面端...

flutter系列之:做一个图像滤镜(flutter photo)

简介很多时候,我们需要一些特效功能,比如给图片做个滤镜什么的,如果是h5页面,那么我们可以很容易的通过css滤镜来实现这个功能。那么如果在flutter中,如果要实现这样的滤镜功能应该怎么处理呢?一起...

flutter软件开发笔记20-flutter web开发

flutterweb开发优势比较多,采用统一的语言,就能开发不同类型的软件,在web开发中,特别是后台式软件中,相比传统的html5开发,更高效,有点像c++编程的方式,把web设计出来了。一...

Flutter实战-请求封装(五)之设置抓包Proxy

用了两年的flutter,有了一些心得,不虚头巴脑,只求实战有用,以供学习或使用flutter的小伙伴参考,学习尚浅,如有不正确的地方还望各路大神指正,以免误人子弟,在此拜谢~(原创不易,转发请标注来...

为什么不在 Flutter 中使用全局变量来管理状态

我相信没有人用全局变量来管理Flutter应用程序的状态。毫无疑问,我们的Flutter应用程序需要状态管理包或Flutter的基本小部件(例如InheritedWidget或St...

Flutter 攻略(Dart基本数据类型,变量 整理 2)

代码运行从main方法开始voidmain(){print("hellodart");}变量与常量var声明变量未初始化变量为nullvarc;//未初始化print(c)...