집 >개발 도구 >VSCode >VSCode로 Android를 개발하는 방법은 무엇입니까? Code FA 프로젝트 실무 공유

VSCode로 Android를 개발하는 방법은 무엇입니까? Code FA 프로젝트 실무 공유

青灯夜游앞으로: 2021-11-22 19:16:5913542검색

이 기사는 VSCodeAndroid를 개발하는 방법을 이해하는 데 도움이 될 것입니다. 도움이 필요한 분들에게 도움이 되기를 바랍니다!

VS 코드는 대부분 ts로 작성되었습니다. 상위 계층 UI는 다양한 시스템의 브라우저에서 실행될 수 있지만 vs 코드는 일부 브라우저 커널에서 노드 및 js 엔진을 지원합니다. I/O, 시스템 커널과의 일부 상호 작용 등과 같은 API가 없습니다. 코드서버는 전자와 분리되는 문제를 해결합니다. 현재 안드로이드에서는 aid learing 的软件，自带 VS Code ，看了一下原理差不多，并不是 linux 图形界面打开的 VS Code，也是打开的 webview라는 서비스가 있는데, 이게 디스크 메모리를 너무 많이 잡아먹고, 전체 다운로드와 설치에 6GB를 소모하게 됩니다. [추천 학습: "vscode 입문 튜토리얼"]

클라이언트 측 프레임워크

클라이언트는 Flutter를 사용하여 개발되었으며 이 프레임워크의 선택은 크로스 터미널 목적이 아니며 단지 빠른 시험 및 기본 기반을 위한 것입니다. 능력의 사용.

구현 방법 분석

code-server는 github에서 공개한 버전의 arm64 아키텍처를 가지고 있습니다. 전체 다운로드 후 터미널 압축 해제 실행이 중단됩니다. arm64이고 arm64 노드가 있지만 전체를 준비하고 있습니다. 리눅스. 즉, /usr /lib 등의 경로가 node에 하드코딩되어 있고, 포함된 node_modules에도 Android에서는 사용할 수 없는 Linux 전용 노드에 대한 경로가 많이 포함되어 있습니다. 그러다가 생각해보니 termux에도 자체 환경이 있습니다. 전체 node_mudules를 삭제하고 수동으로 설치하면 됩니다. 따라서 전체 프로세스는 대략 두 가지 범주로 나눌 수 있습니다. libllvm gcc nodejs

초기 시도: 불완전한 Linux

termux 환경 시작
노드 설치, python, libllvm, clang
코드 서버 arm64 다운로드, unzip
호환성 프로세스 , node_modules 삭제, 재실 설치
bin/code-server를 실행하여 서비스 시작

몇 가지 테스트를 거친 후 이 모드에 몇 가지 문제가 있는 것으로 확인되었습니다.

yarn 설치 중에 gcc 컴파일이 호출되는 데 시간이 너무 오래 걸립니다.
시작된 코드는 검색 코드를 사용할 수 없습니다(이 기능은 정상적인 상황에서 지원될 수 있습니다)
npm install

가 여전히 있습니다

. 20m에 불과하고 아직 개인 서버가 있고 다운링크 대역폭은 5mb, 약 700kb/s입니다. apk에 통합하려면 deb를 통합하고 dpkg를 조정하여 설치해야 하며 포기해야 합니다.整 최종 사용 계획: 완전한 Linux

Termux 환경 시작

전체 Linux(30m) 다운로드 및 설치
다운로드 코드 서버 ARM64(노드로 구축된 사용 가능) bin/code 실행 서버를 시작하여 서비스를 시작합니다
결국 저는 완전한 Linux 방식을 선택했습니다. 작은 설치 크기 외에도 완전한 소스 지원, 비정상적인 버그 방지 등도 있습니다. 전체 VS Code를 시작하는 데 필요한 130MB의 메모리가 처음으로 필요하기 때문에 이러한 메모리 점유를 서버에 넣고 앱에서 시작한 다음 다운로드하는 것은 별 의미가 없습니다. 모두 리소스 파일로 통합되었습니다.

이 프로세스는 이미 완료되었습니다. 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 &#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;
        }
    };