Shulou(Shulou.com)06/01 Report--

This article introduces you how to develop Android with VSCode. The content is very detailed. Interested friends can use it for reference. I hope it will be helpful to you.

Vs code is mostly written by ts, and the upper UI can be run in browsers of each system, but vs code is based on the electron framework, which provides support for node, which is not available in some js engines in the browser kernel, such as api, some interactions in the system kernel, and so on. On the other hand, code-server solves the problem of breaking away from electron. At present, there is a software called aid learing on Android, which comes with VS Code. The principle is similar. It is not VS Code opened by linux graphical interface, but also opened by webview to connect to local services, but this thing takes up too much disk memory. After downloading and installing, it kills 6 g.

Client framework

The client is developed in Flutter, and this framework is not selected for cross-end, but only for quick testing, as well as the use of basic capabilities.

Analysis of implementation method

Code-server has arm64 architecture in the version released by github. After the whole download, the terminal decompression execution is dead. Although this is arm64 and has a node of arm64, it is prepared for the complete linux. In other words, these paths such as / usr / lib are hard-coded in node, and there are a large number of paths to linux-specific nodes in the accompanying node_modules, which are not available on Android. Later, when I think about it, the environment that comes with termux also has libllvm gcc nodejs. Delete the entire node_mudules and then manually install it. So the whole process is roughly divided into two categories.

Initial attempt: incomplete Linux

Start the termux environment

Install node,python,libllvm,clang

Download code-server arm64 and extract it

Handle compatibility, delete node_modules, re-yarn install

Execute the bin/code-server startup service

After some tests, it is found that there are some problems with this model.

Download depends too much, because the source is on my personal server, it will be down for a long time.

Compiling takes too long, yarn install calls gcc compilation, the whole process is very time-consuming.

The launched vs code does not use the search code (this feature can be supported normally)

The disk takes up too much, after a while of operation, 1.6 g of disk space is directly dried up, mainly because npm install pulled a lot of things, but also generated a bunch of cache, node_modules, something heavier than a black hole.

However, after following the above process, node_modules in code-server is already an available module for Android arm64. If you package code-server twice, the process can be simplified as follows

Start the termux environment

Install node

Download code-server arm64 and extract it

Execute bin/code-server

However, there will still be bug,node where the editor cannot search for code, although it is only 20m, but it is still on the personal server, downlink bandwidth 5mb, about 700kb/s, emmm. If you want to integrate into apk, you have to integrate deb, transfer dpkg to install, and abandon.

Final use plan: complete Linux

Start the termux environment

Download and install the full Linux (30m)

Download code-server arm64 (bring your own node to work)

Execute the bin/code-server startup service

In the end, the way of complete Linux is chosen, in addition to the smaller size required for installation, there is also full source support, exception bug avoidance and so on. Since the entire VS Code startup needs 130mb memory for the first time, it is not meaningful to put these memory on the server, which is started and downloaded by app. In the end, all of them are integrated into the apk as resource files.

Specific implementation to start the termux environment

There are ready-made wheels before this process, you just need to compile a bootstrap according to termux-package 's compilation script, integrate it into apk,app startup, decompress it, and then restore it according to the symbolic link format. The terminal is termare_view.

Bootstrap is a linux-like environment with minimal dependencies, such as bash,apt.

Specific implementation code

Function initApp () {cd ${RuntimeEnvir.usrPath} / echo prepares symbolic links. 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 is / data/data/$package/files/usr/bin

Install full Linux and code-server

I screened this from several solutions, initially using atlio as an open source, the whole open source relies on python, and there is a requirement.txt that needs to execute python-r requirement.txt, which is a lot of dependencies, and then changed to proot-distro, pure shell, so it only needs to be integrated directly into apk.

1. Install ubuntu

Install_ubuntu () {cd ~ colorEcho-install 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}

two。 Install code-server

Install_vs_code () {if [!-d "$ubuntuPath/home/code-server-$version-linux-arm64"]; then cd $ubuntuPath/home colorEcho-decompress Vs Code Arm64 tar zxvf ~ / code-server-$version-linux-arm64.tar.gz > / dev/null cd code-server-$version-linux-arm64 fi} start code-server

Just start it with proot-distro, which is very convenient.

-- termux-home parameter: open the home of app sandboxie and mount it to / root of ubuntu, so that ubuntu can use the folder in app.

Start_vs_code () {install_vs_code mkdir-p $ubuntuPath/root/.config/code-server 2 > / dev/null echo 'bind-addr: 0.0.0.0 dev/null echo 8080 auth: none password: none cert: false' > $ubuntuPath/root/.config/code-server/config.yaml echo-e "\ x1b [31m-booting.\ x1b [0m" proot-distro login ubuntu-/ home/code-server-$version-linux-arm64/bin/code-server}

In fact, the whole implementation is not difficult, all are some shell scripts, but also benefit from the previous Termare series support, interested can take a look at this organization. Then there is the process of opening webview. If you feel that the performance is not good, you can use a computer in the local area network to connect. Take a look at the non-first startup process.

WebView implementation scheme

First of all, I went to pub to take a look at the plug-in of webview. Webview, which is currently being maintained officially, has this hint.

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

In other words, after turning on hybird, there are performance restrictions under Android 10, while using a virtual display, there will be a lot of keyboard problems.

When actually trying, the keyboard connected to OTG is basically impossible to use.

After analyzing the scene, we finally use the native WebView, and there are some pits here.

The item WebSettings mWebSettings = mWebView.getSettings (); / / allows the use of JS mWebSettings.setJavaScriptEnabled (true); mWebSettings.setJavaScriptCanOpenWindowsAutomatically (true); mWebSettings.setUseWideViewPort (true); mWebSettings.setAllowFileAccess (true); / / the following line must not be mWebSettings.setDomStorageEnabled (true); mWebSettings.setDatabaseEnabled (true); mWebSettings.setAppCacheEnabled (true); mWebSettings.setLoadWithOverviewMode (true) MWebSettings.setDefaultTextEncodingName ("utf-8"); mWebSettings.setLoadsImagesAutomatically (true); mWebSettings.setSupportMultipleWindows (true); Route redirection

In some scenarios, VS Code will open a new window, for example, when you click file-> new window, webview will call up the browser of the system without processing.

/ / the system opens the web page through the mobile browser by default. In order to display the web page directly through WebView, you must set mWebView.setWebViewClient (new WebViewClient () {@ Override public boolean shouldOverrideUrlLoading (WebView view, String url) {/ / use WebView to load and display url view.loadUrl (url); / / return true return true }}); browser jumps normally

For example, the terminal outputs xxx.xxx,ctrl + mouse clicks, which is expected to open the browser.

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 and getWebView two methods resultMsg.sendToTarget (); return true;}}; feasibility exploration

What can I do with this? The Android screen is so small that the computer can use VsCode locally. Why connect to Android?

There is a vs code plus a complete linux environment, can cover some scenarios of development, except Android development and so on.

Students who develop programs to the arm board also have to build a bunch of cross-compilation tool chains on PC, and each compilation and debugging process is also very tedious, and now they can write local compilation locally.

Coincidentally, bought a tablet, iqiyi, but also as a wave of productivity of programmers.

Compile C language

I chose a project that I have been learning, scrcpy, a pile of c source code, and finally compiled it smoothly.

Web development

Mobile web debugging has always been a problem, as a wild road front-end I am also very helpless, generally add some vconsole components to get debugging logs.

This is what web used to do in the previous personal project Fast adaptation Mobile.

Now, we can develop locally, debug locally, have node front end, most of the projects can be pulled down, the real mobile physical environment. Try it.

Write background, interface test

Write a simple background, such as python's fastapi,flask, and test the interface through rest client

So much for sharing about how to develop Android in VSCode. I hope the above content can be helpful to you and learn more. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.