VSCode如何进行安卓开发

本文介绍了如何用VSCode开发安卓系统。内容非常详细。感兴趣的朋友可以参考一下，希望对你有所帮助。

Vs代码大部分由ts编写，上层UI可以在各种系统的浏览器中运行。而vs代码基于电子框架，为node提供支持。浏览器内核中js引擎没有的一些API，比如I/O，系统内核的一些交互等等。目前，而 code-server 则是解决了脱离 electron 的问题。,有一款名为“安卓辅助学习”的软件，自带VS Code。看了一下，原理差不多。不是linux图形界面打开的VS Code，而是连接本地服务的webview。但是这个设备占用的磁盘内存太多，整个下载安装后会杀死6个G。

00-1010客户端是用Flutter开发的，选择这个框架不是为了跨端，只是为了快速试用和使用基本功能。

00-1010 code-server在github发布的版本中具有arm64架构。整个下载完成后，打开终端解压执行时会挂机。虽然这是带有arm64节点的arm64，但它是为完整的linux准备的。也就是说，像/usr /lib这样的路径在节点中是硬编码的，并且在附加的node_modules中有大量的路径指向linux特定的节点，这在Android中是没有的。

后来我想termux附带的环境也有libllvm gcc nodejs。只需删除整个node _ mudules并手动安装即可。

所以整个过程大致可以分为两类。

00-1010启动终端环境

安装节点，python，libllvm，clang

下载代码服务器arm64，解压。

兼容，删除node_modules并重新安装纱线安装。

执行bin/code-server启动服务。

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

下载依赖太多，因为源码全在我个人服务器，要花很长时间。

编译花了太长时间。纱线安装时调用gcc的编译，整个过程特别耗时。

启动的 vs code 用不了搜索代码(通常可以支持该功能)

磁盘占用太多，运行一段时间，1.6g磁盘空间直接枯竭，主要是npm install拉了很多东西，生成了一堆缓存，node_modules，比黑洞还重。

然而，在再次完成上述过程后，代码服务器中的node_modules已经是安卓arm64的可用模块。将代码服务器打包两次后，该过程可以简化如下

启动termux环境

安装节点

下载代码服务器arm64，解压。

执行bin/代码-服务器

但还是会有编辑器无法搜索代码的 bug.虽然节点只有20m，还是在个人服务器，下行带宽5mb，大概700kb/s，emmm。如果你想集成到apk，你必须集成deb，转移dpkg来安装，然后放弃。

00-1010启动终端环境

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

下载代码-服务器arm64(可以使用内置节点)

执行bin/code-server启动服务。

最终我们选择了完整Linux的方式，不仅对安装的尺寸要求更小，而且有完整源码的支持，避免了异常bug。

作为启动整个VS代码所需的130兆内存

是第一次打开需要的，所以将这些内存的占用放到服务器上，由 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 issues

• Hybrid 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 整个前端大部分项目都能拉下来了，真实的移动端物理环境。
试试

写后台，接口测试

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

关于VSCode如何进行安卓开发就分享到这里了，希望