VSCode で Android を開発するにはどうすればよいですか?コードFAプロジェクトの実践共有
- 青灯夜游転載
- 2021-11-22 19:16:5913361ブラウズ
この記事は、VSCodeAndroid の開発方法を理解するのに役立ちます。困っている人たちの役に立てば幸いです!
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 '$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 本地调式
ドキュメントの作成
Code FA パーソナル サーバー ダウンロード アドレス
#オープンソースアドレス## 気軽にプレイしてください。質問がある場合はコメント欄にメッセージを残してください。良いと思われる場合はスターを付けてください。記事が良かったら「いいね！」をしてください
以上がVSCode で Android を開発するにはどうすればよいですか?コードFAプロジェクトの実践共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。