1. Cordova environment construction
2. Compile the cordova project
3. The project compiled by Cordova is introduced into AndroidStudio
4. Page Nesting
5. The h5 page jumps to the native page
Skip the android development environment settings and go directly to the topic.
1. Cordova environment construction
a) Install nodejs (download address: https://nodejs.org/) and go all the way to next.
b) Install Cordova command: npm install -g cordova (the latest version of cordova is installed by default). This process depends on the internet speed and may take a little longer.
c) Create a Cordova project: cordova create Demo com.jewell.ery
Demo: project name
com.jewell.ery: package name
d) cd into the root directory and add the android development platform: cordova platform add android
Ok so far, our corodva development android project environment is completed, the system will automatically add an android folder under the development platform, and our project files are in this folder.
2. Compile the cordova project:
a)cordova build
(normal please ignore) error message:
Two solutions:
Method 1:
1. Backup the files under tools.
2. Download the tools zip package and unzip it to the tools directory.
(Download link: https://dl.google.com/android/repository/tools_r25.2.3-windows.zip)
3. Re-cordova build.
After waiting for a few minutes, it normally shows that the compilation is successful BUILD SUCCESSFUL. At this time, we view the just packaged apk file under android/build/output
The application package can be installed on the phone to run normally.
Method 2:
1. Specify the Cordova version to install (there is a solution on stackoverflow, which is valid for personal testing)
Note :The firstbuildwill automatically download the corresponding version ofgradle, which is not only slow, but may also report a network connection error after waiting for more than ten minutes, so this step can terminate the automatic download and decisively downloadgradle.
Manually copy the link address. After the download is complete, copy the compressed package to the corresponding version folder of gradle : (C:\Users\Administrator\.gradle\wrapper\dists\gradle-2.14.1-all\4cj8p00t3e345df8iofg8ghvk7) , and then execute cordova build .
3. The project compiled by Cordova is introduced into AndroidStudio
As a powerful tool for developing android apps , AndroidStudio has long been famous all over the world, and Eclipse+ADT is already a thing of the past. Without further ado, let’s get to the point:
a) Open Androidstudio: File----new----import project, select the build.gradle file when Cordova was packaged to import, wait a few minutes after the gradle build is completed, connect to the phone, and it runs normally.
4. Page nesting ------ Embed the cordovawebview into the layout file
( Official website information: http://cordova.apache.org/docs/en/latest/guide/platforms/android/webview.html )
a) Create a new xml layout file, introduce SystemWebView as a child View, and add 3 buttons at the bottom of the page to use when switching pages
b) Introduce layout in MainActivity and override two methods
i. Introduce layout
ii. Overriding methods
c) Bind the listener on the bottom Button to achieve page switching.
5. There are two ways to jump from the h5 page to the native page
: way 1: implementing the intent jump through the method of the cordova plug-in, which is also a recommended way;
way 2: javascript calling java, the conventional way.
Next, we implement this function in the second way:
1. Add the interface and method called by js on the MainActivity page
2. Add button and js code to index.html page to trigger jump Native
Through the above two steps , js can call the method jump2NativeActivity() marked in MainActivity , so as to achieve the purpose of jumping the page. This is a traditional method, and the other is to implement this function by introducing a plug-in, which is also the characteristic of Cordova . , more recommended, if you are interested, you can try to implement it. (over)