Capacitor packages h5 to Android application, uniapp https http net::ERR_CLEARTEXT_NOT_PERMITTED

capacitor official website: https://capacitorjs.com/docs/

The project needs to make an app, and this app is made with uniapp, which uses a library that relies on dom, so Uniapp cannot be used to directly generate the corresponding android application. I tried it, but it cannot be used and the experience is very poor.

Later I found that capacitor packaged h5 into Android application
After groping for a day and a half, I finally found this path. Share the process.

This article will introduce in detail how to install capacitor and how to debug web pages in Android through Chrome after successfully building an Android application.

In this article, I will tell it from a front-end cognitive level, because I don’t understand Android, so it will be easier for you as a front-end to understand.

1. Source materials required for using capacitor.

A built project dist final html file package, for example, a dist folder
a capacitor project
A functioning AndroidStudio
A way to access the external network (you will need to set proxy during the installation process to install gradle normally)

2. Project installation process

Official documentation: https://capacitorjs.com/docs/getting-started

Let’s briefly describe this process:

1. Create a new capacitor application

npm init @capacitor/app

It will ask you to fill in some project information, just follow the prompts.

2. Install project dependencies

The above operation has created an empty capacitor application. This application currently does not have npm installed, so it needs to be installed.
You can use yarn or npm

I like to use yarn and execute it directly

yarn

npm

View project files now

3. Initialize the capacitor project

npx cap init

4. Use a commonly used editor to open this project

I am used to using webstorm

You can see the project information you just configured:

5. Set webDir attribute

The webDir attribute indicates which directory to use as the project content when building the application. Here is the ./dist folder. We will use the previously built web The final dist folder of the project can be placed in the main directory of the capacitor project.
Of course, as long as the directory name matches, it doesn’t have to be called dist

After the addition is completed, the project directory will look like this

6. Install Android iOS dependency packages

npm i @capacitor/android @capacitor/ios

7. Building Android iOS app content

Here I am currently only using Android, so I will only look at Android first, and I will add more later when I use iOS.

npx cap add android

After the execution is completed, there will be an additional android folder in the project directory.

3. Run Android applications

Even if the entire project has been built above, now we need to run the project into AndroidStudio.

1. Add CAPACITOR_ANDROID_STUDIO_PATH environment variable

One more thing you need to do before this is to add an environment variable CAPACITOR_ANDROID_STUDIO_PATH to the system. The variable value is the path of your AndroidStudio.exe software. Because the next operation will use the exe pointed to by this path to start and run the Android application.

2. Run Android applications

Execute the following command, it will automatically start AndroidStudio and run the Android application of this project. The directory used by this Android application is the ./android directory as the project home directory.

npx cap open android

AndroidStudio will pop up a prompt, just click trust.

Then a window will pop up asking you to enter proxy. Enter your proxy configuration.

Then gradle will run and perform initial environment dependency processing on the program

That’s it after it’s done

At this point you only need to click Run in the upper right corner to see the running status of your program. Here you can choose to run it on your real machine or on the simulator.

4. Debugging

After the program opens normally, you may need to debug the internal web pages. Do this:

Close previously running programs
Click the debug button
When the program runs normally on your phone, open your Google Chrome browser and enter the following in the address bar.

chrome://inspect/

At this time, you can see the path of the corresponding page of the program displayed on your mobile phone, and then click [inspect] to debug the page on the mobile phone. This is exactly the same as debugging in the browser.

5. Network request issues

1. Network access

When I was using it, I found that I couldn’t access the network.
The program I packaged with uniapp cannot access the network using axios, but I can use the request method uni.request that comes with uniapp.

https

After being able to access it, I encountered a new problem. The interface address I requested was http, and you will be prompted for a cross-domain problem. Requesting http from https will indeed cause cross-domain issues. The solution is to unify the protocol.

If your local html service uses https, and your interface is http, you will find this problem.

So what needs to be solved now is to change the local file service method to http

Do you still remember the capacitor.config.json file in the capacitor project we saw before? There is a parameter in it which is the androidScheme pictured above. Just change it to http. , after modification, remember to re-open it with the command

npx cap open android

Error message `net::ERR_CLEARTEXT_NOT_PERMITTED`

After the above cross-domain problem was solved, this prompt appeared again.

Solution
In the AndroidManifest.xml file in the Android project folder, add the following content on the application node:

 android:usesCleartextTraffic="true"

This will allow it to run normally

6. Update project html local file

The above can already run the program normally.
But what do you do when you want to update the content of your project?

Locate your Android folder. For example, in the above example, the ./demo folder is the main directory of capacitor. Then the location of the html source file used by this Android application is ./demo/android. \app\src\main\assets\public this folder
So you only need to replace the contents of this folder and then execute the Android application to update

7. Change the application icon

Open ./android/app/src/main/res/ to see the image resource folder required in the app.
There are many resource folders corresponding to different sizes, and we only need to keep one.

Just replace the folder icon with your own. It’s best to follow it, including the transparent areas around the edges.

8. How to package into apk

Build – Generate Signed Bundle / APK in AndroidStudio

You need to generate a keystore yourself. The generation tutorial is here.

Instructions for generating .keystore: https://ask.dcloud.net.cn/article/35777

At this point click locate to open the generated APK directory