Comment développer Android avec VSCode ? Partage pratique du projet Code FA

Cet article vous aidera à comprendre VSCodeComment développer Android ? J'espère que cela aidera ceux qui en ont besoin !

Le code VS est principalement écrit par ts. L'interface utilisateur de la couche supérieure peut s'exécuter dans les navigateurs de divers systèmes, mais le code vs est basé sur le framework électronique qui prend en charge les moteurs node et js dans certains noyaux de navigateur. Il n'y a pas d'API, comme les E/S, certaines interactions avec le noyau système, etc. Le serveur de code résout le problème de la séparation de l'électron. Il existe actuellement un logiciel appelé aid learning sur Android, qui est livré avec VS Code. Après l'avoir regardé, le principe est similaire. Ce n'est pas du VS Code. , ouvre également <code>webview pour se connecter aux services locaux, mais cette chose prend trop de mémoire disque, et l'ensemble du téléchargement et de l'installation tuera 6 gigaoctets. [Apprentissage recommandé : "tutoriel d'introduction au vscodeaid 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 用不了搜索代码(正常情况能支持这个功能)
• 磁盘占用太大，一阵操作下来，直接1.6g磁盘空间给干没了，主要是 npm install"]

Framework côté client

Le client est développé à l'aide de Flutter, et ce framework n'est pas choisi à des fins inter-terminaux, mais uniquement pour des tentatives rapides et l'utilisation de fonctionnalités de base.

• Analyse de la méthode d'implémentation

• code-server a une architecture arm64 dans la version publiée par github Après avoir téléchargé le tout, il se bloque lors de l'ouverture du terminal pour décompresser et exécuter. Bien qu'il s'agisse d'arm64 et qu'il soit livré avec un nœud arm64, il est préparé pour Linux complet. En d'autres termes, les chemins tels que /usr /lib sont codés en dur dans le nœud, et les node_modules inclus contiennent également un grand nombre de chemins vers des nœuds spécifiques à Linux, qui ne sont pas disponibles sur Android. Ensuite, j'y ai pensé, l'environnement fourni avec termux inclut également libllvm gcc nodejs Supprimez simplement l'intégralité de node_mudules et installez-le manuellement. L’ensemble du processus peut donc être grossièrement divisé en deux catégories.

  Tentative initiale : Linux non terminé

Démarrer l'environnement termux
Installer node, python, libllvm, clang

Télécharger le serveur de code arm64, décompressez

pour gérer la compatibilité, supprimez node_modules, réinstallez yarn

• exécutez bin/code-server pour démarrer le service

• Après quelques tests, il a été constaté que ce mode présentait quelques problèmes .

• Il y a trop de dépendances de téléchargement Comme les sources sont toutes sur mon serveur personnel, le téléchargement prendra beaucoup de temps.

La compilation prend trop de temps. La compilation gcc est appelée lors de l'installation de Yarn. L'ensemble du processus prend beaucoup de temps.

• Le code démarré ne peut pas utiliser le code de recherche
(cette fonction peut être prise en charge dans des circonstances normales)

L'utilisation du disque est trop importante Après un certain temps de fonctionnement, 1,6 g d'espace disque ont complètement disparu, principalement npm install code> extrait beaucoup de choses et génère un tas de caches, node_modules, qui sont plus lourds qu'un trou noir. </code.></p> <h2 data-id="heading-5"><strong>Cependant, après avoir suivi le processus ci-dessus, les node_modules dans code-server sont déjà des modules disponibles pour Android arm64 lors du packaging de code-server pour la deuxième fois, le processus peut être simplifié comme suit</strong></h2> <h3 data-id="heading-6"><strong>Démarrez l'environnement termux. </strong></h3> <p> <a href="https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2FTermare%2Ftermare_view" target="_blank" rel="nofollow noopener noreferrer" title="https://github.com/Termare/termare_view" ref="nofollow noopener noreferrer">Installer le nœud</a></p> <blockquote> <p>Télécharger le serveur de code arm64, décompresser<strong></strong></p>🎜Exécuter bin/code-server🎜🎜🎜🎜Mais il y aura toujours un bug🎜que l'éditeur ne peut pas rechercher le code🎜, bien que le nœud n'est qu'à 20 m, il est toujours là Serveur personnel, bande passante de liaison descendante 5 Mo, environ 700 Ko/s, emmm, si vous voulez l'intégrer dans apk, vous devez intégrer deb, ajuster dpkg pour l'installer, abandonner.整 Dernier plan d'utilisation : Linux complet🎜🎜🎜🎜🎜 démarrer l'environnement Termux 🎜🎜🎜🎜 télécharger et installer Linux complet (30 min) 🎜🎜🎜🎜 télécharger le serveur de code ARM64 (construit avec un nœud peut être utilisé) Exécuter bin/code- serveur pour démarrer le service🎜🎜🎜🎜En fin de compte, j'ai choisi la méthode Linux complète En plus de la taille d'installation plus petite, elle offre également un support complet des sources, évite les bugs anormaux, etc. Étant donné que l'ensemble du démarrage de VS Code nécessite pour la première fois 130 Mo de mémoire, cela n'a pas beaucoup de sens de mettre cette utilisation de mémoire sur le serveur, de le démarrer à partir de l'application puis de le télécharger. En fin de compte, tout est intégré en tant que ressource. fichiers.apk. 🎜🎜🎜Implémentation spécifique🎜🎜🎜🎜Démarrez l'environnement termux🎜🎜🎜Ce processus est déjà terminé. Il vous suffit de compiler un bootstrap selon le script de compilation de termux-package et de l'intégrer dans l'apk. pour décompresser, puis selon le format du lien symbolique, faites simplement la récupération. Le terminal est 🎜termare_view🎜. 🎜🎜🎜bootstrap est un environnement de type 🎜linux avec des dépendances minimales, notamment bash, apt, etc. 🎜</blockquote> <p>具体实现代码</p><pre class="brush:js;toolbar:false;">function initApp(){ cd ${RuntimeEnvir.usrPath}/ echo 准备符号链接... for line in `cat SYMLINKS.txt` do OLD_IFS=&quot;\$IFS&quot; IFS=&quot;←&quot; arr=(\$line) IFS=&quot;\$OLD_IFS&quot; ln -s \${arr[0]} \${arr[3]} done rm -rf SYMLINKS.txt TMPDIR=/data/data/com.nightmare.termare/files/usr/tmp filename=bootstrap rm -rf &quot;\$TMPDIR/\$filename*&quot; rm -rf &quot;\$TMPDIR/*&quot; chmod -R 0777 ${RuntimeEnvir.binPath}/* chmod -R 0777 ${RuntimeEnvir.usrPath}/lib/* 2&gt;/dev/null chmod -R 0777 ${RuntimeEnvir.usrPath}/libexec/* 2&gt;/dev/null apt update rm -rf $lockFile export LD_PRELOAD=${RuntimeEnvir.usrPath}/lib/libtermux-exec.so install_vs_code start_vs_code bash }</pre><blockquote><p>RuntimeEnvir.usrPath 是 /data/data/$package/files/usr/bin</p></blockquote> <h3 data-id="heading-7"><strong>安装完整 Linux 和 code-server</strong></h3> <p>这个我从好几个方案进行了筛选，起初用的 atlio 这个开源，整个开源依赖 <code>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 本地调式

Écrire des documents

Écrire le backend, tester l'interface

Écrire un backend simple, tel que fastapi, flask de python, et effectuer des tests d'interface via le client rest

Enfin

Afin de permettre aux autres Les utilisateurs peuvent utiliser cette application directement et je l'ai mise sur Kuan.

J'ai vérifié que les licences open source de vscodium et de code-server sont toutes deux MIT. En cas d'infraction, veuillez me le rappeler dans la zone de commentaire.

Adresse de téléchargement cool Code FA

Adresse de téléchargement du serveur personnel Code FA

Adresse de téléchargement rapide du logiciel personnel

Adresse open source

jouez comme vous le souhaitez, laissez un message dans la zone de commentaire si vous avez des questions, si vous pensez que c'est bien. Une étoile, si l'article est bon, merci de lui donner un coup de pouce.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!