In diesem Artikel erfahren Sie, VSCodeWie entwickelt man Android? Ich hoffe, es hilft den Bedürftigen!
VS-Code wird größtenteils von ts geschrieben. Die Benutzeroberfläche der oberen Ebene kann in Browsern verschiedener Systeme ausgeführt werden, aber vs-Code basiert auf dem Electron-Framework. Dieses Framework bietet Unterstützung für Node- und JS-Engines in einigen Browserkernen. Es gibt keine APIs wie E/A, einige Interaktionen mit dem Systemkernel usw. Der Code-Server löst das Problem der Trennung vom Elektron. Es gibt derzeit eine Software namens Aid Learning, die mit VS Code geliefert wird. Beim Betrachten ist das Prinzip nicht ähnlich webview, um eine Verbindung zu lokalen Diensten herzustellen, aber dieses Ding beansprucht zu viel Festplattenspeicher und der gesamte Download und die Installation werden 6 Gigabyte zerstören. [Empfohlenes Lernen: „vscode-Einführungs-Tutorialaid 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 一下，就行了。
所以整个流程大致分为两类。
启动 termux 环境
安装 node,python,libllvm,clang
下载 code-server arm64，解压
处理兼容，删除 node_modules ，重新 yarn install
执行 bin/code-server 启动服务
经过一些测试发现，这种模式有一些问题。
npm install"]Implementierungsmethodenanalyse
libllvm gcc nodejs enthält. Löschen Sie einfach die gesamten node_mudules und installieren Sie sie manuell.
Der gesamte Prozess lässt sich also grob in zwei Kategorien einteilen.
Code-Server herunterladen arm64, dekomprimieren
führen Sie bin/code-server aus, um den Dienst zu starten
Es gibt zu viele Download-Abhängigkeiten. Da sich die Quellen alle auf meinem persönlichen Server befinden, wird der Download lange dauern.
Die Festplattennutzung ist zu groß. Nach einer Weile des Betriebs sind 1,6 g Speicherplatz vollständig verschwunden, hauptsächlich npm install code> ruft viele Dinge ab und generiert eine Reihe von Caches, node_modules, die schwerer sind als ein Schwarzes Loch.
Code-Server arm64 herunterladen, entpacken
🎜Bin/Code-Server ausführen🎜🎜🎜🎜Aber es wird immer noch ein Fehler auftreten, dass der Editor den Code nicht durchsuchen kann, obwohl Knoten ist nur 20 m lang, es ist immer noch da. Persönlicher Server, Downlink-Bandbreite beträgt 5 MB, etwa 700 kb/s, emmm, wenn Sie es in APK integrieren möchten, müssen Sie Deb integrieren, dpkg zur Installation anpassen, aufgeben.整 Letzter Nutzungsplan: Komplettes Linux🎜🎜🎜🎜🎜 Starten Sie die Termux-Umgebung 🎜🎜🎜🎜 Komplettes Linux herunterladen und installieren (30 m) 🎜🎜🎜🎜 Code-Server ARM64 herunterladen (erstellt mit Knoten kann verwendet werden) Bin/Code ausführen Server zum Starten des Dienstes🎜🎜🎜🎜Am Ende habe ich mich für die vollständige Linux-Methode entschieden. Zusätzlich zur kleineren Installationsgröße bietet sie auch vollständige Quellunterstützung, die Vermeidung ungewöhnlicher Fehler usw. Da zum ersten Mal die 130 MB Speicher benötigt werden, die zum Starten des gesamten VS-Codes erforderlich sind, macht es wenig Sinn, diese Speicherbelegungen auf den Server zu legen, sie über die App zu starten und sie dann herunterzuladen alles als Ressourcendateien integriert. 🎜🎜🎜Spezifische Implementierung🎜🎜🎜🎜Starten Sie die Termux-Umgebung🎜🎜🎜Dieser Vorgang ist bereits abgeschlossen. Sie müssen lediglich einen Bootstrap gemäß dem Kompilierungsskript des Termux-Pakets kompilieren und ihn in die APK integrieren Zum Dekomprimieren und dann gemäß dem symbolischen Linkformat Führen Sie einfach die Wiederherstellung durch. Das Terminal ist 🎜termare_view🎜. 🎜🎜🎜bootstrap ist eine 🎜linux-ähnliche Umgebung mit minimalen Abhängigkeiten, einschließlich Bash, Apt usw. 🎜
具体实现代码
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
这个我从好几个方案进行了筛选，起初用的 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
}直接用 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 的过程了，如果觉得性能不好，你可以用局域网的电脑来进行连接。 看一下非首次的启动过程
首先去 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 干嘛要连安卓的？
正巧，买了一个平板，爱奇艺之余，也能作为程序员的一波生产力了。
选了一个一直在学习的项目，scrcpy，一堆 c 源码，最后很顺利的编译下来了。
移动端的网页调试一直都是问题，作为野路子前端的我也很无奈，一般会加一些 vconsole 的组件来获取调试日志。
之前个人项目速享适配移动端 web 就是这么干的
现在，我们可以本地开发，本地调试，有 node 整个前端大部分项目都能拉下来了，真实的移动端物理环境。
试试
本篇文章完全是在这个安卓版的 VS Code 中完成的，使用 hexo 本地调式
Schnell-Download-Adresse für persönliche Software
Spielen Sie, wie Sie möchten, hinterlassen Sie eine Nachricht im Kommentarbereich, wenn Sie haben Fragen, wenn Sie es gut finden Ein Stern, wenn der Artikel gut ist, geben Sie ihm bitte einen Daumen nach oben.
Das obige ist der detaillierte Inhalt vonWie entwickle ich Android mit VSCode? Praktischer Austausch des Code FA-Projekts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
vscode
So führen Sie Code mit vscode aus
So entsperren Sie Android-Berechtigungsbeschränkungen
Einführung in das von vscode verwendete Framework
Welche Sprache wird im Allgemeinen zum Schreiben von vscode verwendet?
In welcher Sprache kann vscode geschrieben werden?
vscode Chinesische Einstellungsmethode
Einführung in die Verwendung von vscode
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
