Web Packaging Android App process

Build the environmental process:

1. Install the JDK.

See http://www.cnblogs.com/Li-Cheng/p/4334985.html.

Note: Essentially download the JDK installation package to the URL and add an environment variable after installation:

Java_home, the value is: C:\Program files\java\jdk1.8.0_73 (because the installation path is different, copy from the path), and then add one in the PATH variable:

%java_home%\bin;

Be sure to remember that all the paths you add in path are separated, otherwise it may affect the system's operation.

2. Install the Android SDK

Direct:

Http://dl.google.com/android/android-sdk_r24.4.1-windows.zip

Page:

http://www.android-studio.org/

After the download is done, unzip it and place it under a non-Chinese path.

Then start building environment variables:

Android_home=e:\selfuse\geapp\androidsdk

In Path, add:

%android_home%\tools; %android_home%\platform-tools;

After the addition is done, it is not finished, and the following are the more critical:

Open SDK Manager.exe, if the connection to Google failed, only a few of the downloaded directory, you need to tools in the toolbar options, add a domestic mirror download point:

mirrors.neusoft.edu.cn, Port 80. Tick the option see. Clicking Close will refresh the content we need to download.

The main things to download are: All the items under the Tools option (actually just download any one of the API19 above, but given that to be compatible with Android 6.0, we can download the newer version. Recommended all download down), all the files under Android 6.0 (other version can not be down), extra all the files (recommended all, in fact, only need to figure three, and other HAXM is used for computer-side simulation of Android).

3. Use the Nodejs and NPM packages.

https://nodejs.org/en/download/download one of the two below, put it under one path, and add a path in path such as: E:\selfuse\nodejs, then go to download a NPM package (after extracting the following path), The two bags are small and I put them all together directly.

Test whether it is global, open cmd, enter node–v, test NPM with Npm–v.

4. Install NPM package Cordova

CMD command running NPM install-g Cordova

At this point, we have a global command. Subsequent command operations are all performed in CMD

5. Create an App

Use CD e:\test\ in cmd

Then e:

This allows us to enter a new path for creating an app. Run under this path

Cordova Create Hello Com.example.hello HelloWorld

Create after the three can be casually written, where the first is to create a folder name, cannot be Chinese, the second is a link to the application, can not be Chinese, the third is we want to install after the display of the app name, can be Chinese.

After the successful execution of this command, we created the app with the CD command

Cd Hello

Into the E:\test\hello.

All of the following commands are executed under this path.

Add an Android app:

Cordova Platform Add Android

Add the plugins we need:

Cordova Plugin Add Phonegap-plugin-barcodescanner

The following example uses the

Cordova Plugin Add Cordova-plugin-camera

Cordova Plugin Add cordova-plugin-geolocation

Cordova Plugin Add Cordova-plugin-dialogs

Cordova Plugin Add Cordova-plugin-splashscreen

Cordova Plugin Add Cordova-plugin-device

This back plug-in can be viewed on the official website or copied from the text in the attachment.

http://cordova.apache.org/plugins/

After adding the completion plug-in, we can see a path:

Where platforms saved the Android app, the contents can be later edited in other software.

WWW is used to store the pages we build, using the build command will automatically copy the relevant files in Andriod, do not directly modify the page under Platforms\android\assets\www, After using the build command, the files under Android are overwritten and the modifications are not valid.

Place all the files in the Web page under the WWW folder, and then modify the. config file.

Its file code is as follows:

<?xml version= ' 1.0 ' encoding= ' utf-8 '?>

<widget id= "My.app.camera" version= "0.0.1" xmlns= "http://www.w3.org/ns/widgets" xmlns:cdv= "/HTTP/ cordova.apache.org/ns/1.0 ">

<name> Camera Examples </name>

<description>

Only available in the Play Store

</description>

<author email= "[email protected]" href= "http://kingview.com" >

Author information

</author>

<content src= "index.html"/>

<plugin name= "Cordova-plugin-whitelist" spec= "1"/>

<preference name= "loglevel" value= "ERROR"/>

<preference name= "android-maxsdkversion" value= "/>"

<preference name= "android-minsdkversion" value= "/>"

<preference name= "android-targetsdkversion" value= "/>"

<access origin= "*"/>

<allow-intent href= "http://*/*"/>

<allow-intent href= "https://*/*"/>

<allow-intent href= "tel:*"/>

<allow-intent href= "sms:*"/>

<allow-intent href= "mailto:*"/>

<allow-intent href= "geo:*"/>

<platform name= "Android" >

<icon src= "Res/fire.png"/>

<allow-intent href= "market:*"/>

</platform>

<platform name= "ios" >

<allow-intent href= "itms:*"/>

<allow-intent href= "itms-apps:*"/>

</platform>

</widget>

The yellow body part of the file needs to be modified. The name tag represents the app name we've created, description is the app description, it's displayed in the Play store, author is the author's information, and it's only displayed in the store, and content means that we open the first page of the app jump and can make changes. Icon represents the icons that our app displays. The path in this is the project folder path, in order to add a picture can be set up a folder res, put the desired picture (I lazy, using an icon). Icons can be selected depending on the screen density, and the way they are set is changed to:

<icon src= "Res/android/ldpi.png" density= "ldpi"/>

<icon src= "Res/android/mdpi.png" density= "mdpi"/>

<icon src= "Res/android/hdpi.png" density= "hdpi"/>

<icon src= "Res/android/xhdpi.png" density= "xhdpi"/>

<icon src= "Res/android/xxhdpi.png" density= "xxhdpi"/>

<icon src= "Res/android/xxxhdpi.png" density= "xxxhdpi"/>

The log level, Minimum SDK version, Maximum SDK version, and the specified SDK version are defined in the Preference tab. 14 for Android 4.0, 23 for Android 6.0, this part does not set will have a default value, can not be added.

7. The following is the use of plug-ins and application construction

Plug-in using the two-dimensional code for example, because Bacodescanner is more special, need to introduce a separate JS file, so we first copy the barcodescanner.js to our WWW folder.

Under the path to remove the plugin JS file placed under our WWW folder.

Two files are referenced in the built Web page:

<script type= "Text/javascript" src= "Cordova.js" ></script>

<script type= "Text/javascript" src= "Barcodescanner.js" ></script>

and add it inside the body.

<button id= "btn" onclick= "Inputscan ();" style= "margin-top:20px;margin-left:20px;width:80px;height:80px;" > Sweep Codes </button>

Call the QR Code control:

function Inputscan () {

Cordova.plugins.barcodeScanner.scan (

function (Result) {

Alert ("We got a barcode\n" +

"Result:" + result.text + "\ n" +

"Format:" + Result.format + "\ n" +

"Cancelled:" + result.cancelled);

},

Function (Error) {

Alert ("Scanning failed:" + error);

}

);

}

Another thing to note is: The sample generated in the file of the first meta to be removed, because it is forbidden to write JS in the Web page, we write this will be invalidated, if it is a separate JS file is not affected.

The final step is finally here:

Use the Cordova build Android--release command to generate the APK file. If there is no error, it will be

platforms\android\build\outputs\apk

Generates a file with a signature, with no signature. So we've created an apk file. It's basically done.

If it is the first time, NPM will automatically download the Gradle packaging tool, you can also download the configuration of the global variable, I am lazy, directly let it download. This download process is long and you have to wait patiently.

Note: If you do not have the-release command, the debug version is generated. The official version is required key, may use Ecsllape to generate a, in the project directory under the addition of a build.json, the contents are as follows:

{
"Android": {
"Debug": {
"KeyStore": "./mykey.keystore",
"Storepassword": "Www.dd.com",
"Alias": "Dd.com",
"Password": "Www.dd.com",
"Keystoretype": ""
},
"Release": {
"KeyStore": "./mykey.keystore",
"Storepassword": "Www.dd.com",
"Alias": "Dd.com",
"Password": "Www.dd.com",
"Keystoretype": ""
}
}
}

Two files are placed in the root directory of the project, and the command to generate the APK should be used:

Cordova Build--release--buildconfig=./build.json

Once used, the Build.json will be used to generate the apk automatically.

.

Another: After the packaging of this specific configuration can be found on the official website, not accustomed to use this generated words can be generated once the APK project can be imported into the esclipse for re-operation, there is experience can be in that inside operation.

About debugging with Chrome:

Http://jingyan.baidu.com/article/db55b609fde96d4ba30a2fa9.html

Learn more about Cordova into the following Web site:

Http://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html

Reference URL:

Http://www.4u4v.net/full-configuration-cordova-phonegap-ant-jdk-android-environment.html

Http://jingyan.baidu.com/article/22a299b53ea2b89e19376a8d.html

http://blog.csdn.net/jyy_12/article/details/46416161

http://blog.csdn.net/linyingzhi829/article/details/50589875

Web Packaging Android App process