VSCode如何進行安卓開發

這篇文章給大家介紹VSCode如何進行安卓開發，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

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

• 啟動 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 有這樣的提示

• 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如何進行安卓開發就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。