VSCode如何進行安卓開發？ Code FA計畫實戰分享-VSCode-PHP中文網

本篇文章帶大家來了解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 用不了搜尋代碼(正常情況能支援這個功能)
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 &#39;$source&#39; > $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 &#39;
  bind-addr: 0.0.0.0:8080
  auth: none
  password: none
  cert: false
  &#39; > $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&#39;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;
        }
    };

登入後複製