How to develop Android with VSCode? Code FA project practical sharing

This article will help you understand VSCodeHow to develop Android? Hope it helps those in need!

Most of vs code is written by ts. The upper-layer UI can run in the browser of each system, but vs code is based on the electron framework. This framework provides access to node. Supports some APIs that the js engine in the browser kernel does not have, such as I/O, some interactions with the system kernel, etc. And code-server solves the problem of breaking away from electron. Currently, there is a software called aid learning on Android, which comes with VS Code. After looking at it, the principle is similar. It is not opened by the linux graphical interface. VS Code, also opened webview Connect to local services, but this thing occupies too much disk memory, and the entire download and installation will kill 6 gigabytes. [Recommended learning: "vscode introductory tutorial"]

Client-side framework

The client is developed using Flutter, and this framework The selection is not for cross-end, but just for quick trial and the use of basic capabilities.

Implementation method analysis

code-server has an arm64 architecture in the version released by github. After the entire download, it hangs when opening the terminal to decompress and execute. Although this It is arm64 and comes with an arm64 node, but it is prepared for full linux. In other words, paths such as /usr /lib are hard-coded in node, and the included node_modules also contains a large number of paths to Linux-specific nodes, which are not available on Android. Later, when I thought about it, the environment that comes with termux also has libllvm gcc nodejs. Just delete the entire node_mudules and install it manually. So the whole process can be roughly divided into two categories.

Initial attempt: non-complete Linux

• Start the termux environment

• Install node, python ,libllvm,clang

• Download code-server arm64, unzip

• to handle compatibility, delete node_modules, and re-yarn install

• Execute bin/code-server to start the service

After some testing, it was found that this mode has some problems.

• The download has too many dependencies. Since the sources are all on my personal server, it will take a long time to download.
• It takes too long to compile. The compilation of gcc is called during yarn install. The whole process is very time-consuming.
• The started vs code cannot use the search code(This function can be supported under normal circumstances)
• The disk usage is too large. After a while of operation, 1.6g of disk space will be used. No more, mainly because npm install pulled a lot of things and generated a bunch of caches, node_modules, which is heavier than a black hole.

However, after following the above process, the node_modules in code-server are already available modules for Android arm64. When packaging code-server for the second time, the process can be simplified as follows

• Start the termux environment

• Install node

• Download code-server arm64 and unzip it

• Execute bin/code-server

But there will still be a bugthe editor cannot search the code. Although the node is only 20m, it is still there Personal server, downlink bandwidth is 5mb, about 700kb/s, emmm, if you want to integrate it into apk, you have to integrate deb, adjust dpkg to install, give up.

Final usage plan: complete Linux

• Start the termux environment

• Download and install complete Linux (30m)

• Download code-server arm64 (it comes with node and can be used)

• Execute bin/code-server to start the service

In the end, I chose the complete Linux method. In addition to the smaller installation size, it also has complete source support, avoidance of abnormal bugs, etc. Since the 130mb of memory required to start the entire VS Code is required for the first time, it does not make much sense to put these memory occupations on the server, start them from the app and then download them. In the end, they are all integrated as resource files. apk.

Specific implementation

Start the termux environment

There are ready-made wheels before this process, you only need to follow the termux-package The compilation script compiles a bootstrap and integrates it into the apk. The app is started to decompress, and then restored according to the symbolic link format. The terminal is termare_view.

bootstrap is a linux environment with minimal dependencies, including bash, apt, etc.

具体实现代码

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

写博客

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

Write documentation

Write backend, interface test

Write a simple backend, such as python's fastapi , flask, and conduct interface testing through rest client

Finally

In order to allow other users to use this app directly, I put it on the cool install.

I checked that the open source licenses of vscodium and code-server are both MIT. If there is any infringement, please remind me in the comment area.

Code FA Coolan download address

Code FA personal server download address

Personal software quick download address

Open source address

Feel free to play, leave a message in the comment area if you have any questions, give a star if you think it’s good, give a like if the article is good,

The above is the detailed content of How to develop Android with VSCode? Code FA project practical sharing. For more information, please follow other related articles on the PHP Chinese website!