VSCode で Android を開発するにはどうすればよいですか?コードFAプロジェクトの実践共有-VSCode-php.cn

この記事は、VSCodeAndroid の開発方法を理解するのに役立ちます。困っている人たちの役に立てば幸いです!

VSCode で Android を開発するにはどうすればよいですか?コードFAプロジェクトの実践共有

vs コードの大部分は ts によって書かれており、上位層の UI は各システムのブラウザで実行できますが、vs コードは Electron フレームワークに基づいています。ノードへのアクセスを提供します。I/O、システムカーネルとの一部の対話など、ブラウザカーネルの js エンジンにはないいくつかの API をサポートします。 そしてコードサーバーは電子からの脱却の問題を解決します。 現在、Android には aid learning というソフトウェアがあり、これには VS Code が付属しています。見てみると原理は似ています。Linux では開きません。グラフィカルインターフェイス VS Code、webview も開きますローカルサービスに接続しますが、これはディスクメモリを大量に占有し、ダウンロードとインストール全体で 6 GB が消費されます。 [推奨学習: "vscode 入門チュートリアル "]

クライアント側フレームワーク

クライアントは Flutter を使用して開発されており、このフレームワークの選択内容これはクロスエンド向けではなく、簡単な試用と基本機能の使用のみを目的としています。

実装方法分析

code-serverはgithubで公開されているバージョンではarm64アーキテクチャとなっており、ダウンロード完了後、解凍して実行するためにターミナルを開くとハングアップしてしまいます。これは arm64 であり、arm64 ノードが付属していますが、フル Linux 用に用意されています。つまり、/usr /lib などのパスはノードにハードコーディングされており、含まれるノードモジュールには、Android では使用できない Linux 固有のノードへのパスも多数含まれています。後で考えたら、termux に付属の環境にも libllvm gcc nodejs があるので、node_mudules を丸ごと削除して手動でインストールするだけです。したがって、プロセス全体は大きく 2 つのカテゴリに分類できます。

最初の試み: 不完全な Linux

termux 環境を開始します
ノードをインストールします。 python 、libllvm、clang
コードサーバー arm64 をダウンロードし、互換性を処理するために解凍
、node_modules を削除し、インストールを再実行します
bin/code-server を実行してサービスを開始します

テストを行った結果、このモードにはいくつかの問題があることが判明しました。

ダウンロードには依存関係が多すぎます。ソースはすべて私の個人サーバー上にあるため、ダウンロードに時間がかかります。
コンパイルに時間がかかりすぎます。gcc のコンパイルは、yarn のインストール中に呼び出されます。プロセス全体が非常に時間がかかります。
開始された vs コードは検索コードを使用できません(通常の環境ではこの機能はサポートされます)
ディスク使用量が多すぎるため、しばらく操作すると、 1.6g のディスク領域が使用されますが、主に npm install が多くのことをプルし、ブラックホールよりも重い大量のキャッシュ (node_modules) を生成したため、これ以上は使用されません。

ただし、上記のプロセスを実行した後、code-server の node_modules はすでに Android arm64 で利用可能なモジュールになっています。code-server を 2 回目にパッケージ化する場合、プロセスは次のように簡略化できます

termux 環境を開始します
node をインストールします
code-server arm64 をダウンロードして解凍します
bin/code-server を実行します

しかし、まだバグが存在しますエディタはコードを検索できません。ノードはわずか20mですが、まだそこにあります個人サーバー、ダウンリンク帯域幅は5mb、約700kb/s、うーん、apkに統合したい場合は、debを統合し、dpkgを調整してインストールする必要がありますが、あきらめます。

最終使用計画: Linux の完了

termux 環境の開始
ダウンロードとインストールの完了Linux (30m)
code-server arm64 をダウンロード (ノードに付属しており、使用できます)
bin/code-server を実行して、サービスを開始

最終的に、インストールサイズが小さいことに加えて、完全なソースサポート、異常なバグの回避なども備えた、完全な Linux 方式を選択しました。 VS Code 全体を初めて起動するには 130MB のメモリが必要となるため、これらのメモリ占有をサーバーに配置し、アプリから起動してダウンロードすることはあまり意味がありません。すべてリソースファイルとして統合されています。apk。

具体的な実装

termux 環境を開始します

このプロセスの前に既製のホイールがあります。必要なのは次のことだけです。 termux-package に従いますコンパイルスクリプトはブートストラップをコンパイルし、それを APK に統合します。アプリは解凍を開始し、シンボリックリンク形式に従って復元されます。端末は termare_view です。

bootstrap は、bash、apt などの依存関係が最小限の linux 環境です。

具体实现代码

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;
        }
    };

ログイン後にコピー