The document contains the following contents:
L Environment building
L Create demo and debug it
L packaging APK
L Added support for hot updates
L Optimize the slow start problem
L Common Commands
1. Environment construction
The following software and plug-ins need to be installed (Android) :
L Install nodeJS (built-in NPM)
L Configure CNPM (use Taobao image instead of NPM)
L install cordova and ionic2
L Install the JAVA JDK
L Install Android SDK(it will be used when the project is packaged with Android APP, but not temporarily used in the early test development of browser environment)
1. Install Node.js
Visit node.js official website nodejs.org/en/download… Note that the Node version of ionic2 is larger than that of v6. Generally, download the latest version. After the installation is complete, check whether Node is successfully configured. Open the command prompt: Press Win+R -> enter “CMD” -> enter the command Node -v. If the version number is displayed, the installation is successful. Enter NPM -v to check whether the NPM installation is successful and the version number. The Node environment is automatically configured after the installation is complete.
2. Install the CNPM and configure the NPM domestic image
Install CNPM through Taobao image:
npm install -g cnpm –registry=https://registry.npm.taobao.org
Note that CNPM does not support publish.
Configure the NPM domestic mirror:
Due to the domestic network environment, when downloading and installing various packages using NPM, there are often problems of normal downloading. So we need to point NPM to taobao mirror. Enter the following in CMD step by step:
1, registered module mirror: NPM set registry at https://registry.npm.taobao.org/
2, compile, rely on the node of the source image: NPM set distury https://npm.taobao.org/dist
3, clear the cache: NPM cache clean
Finally check to see if the NPM configuration list already points to the Taobao image: NPM config List
3. Use CNPM to install Cordova and Ionic2
Install Cordova: CNPM
Install – g cordova @ 6
(Install version 6. X, I used version 7. X to add Android platform to the project will report an error, I do not know if it is an individual case, I did not do other tests). After the installation, enter cordova
-v Check the version number and whether the installation is successful. (If you use cordova for the first time, you will be asked if you want to report it. Choose Y or N.
Ionic2: CNPM install -g ionic@2 (install version 2.x, now officially upgraded to 3.x) All packages Installed… With the words. Type ionic -v to check the version number and whether the installation is successful.
4. Install JAVA JDK (no configuration environment required)
Download the latest JDK from the official website:
www.oracle.com/technetwork…
After the installation is complete, enter Java -version to check whether the installation is successful and the version number.
5. Install the Android SDK and configure the environment
Download SDK from official website (download link, can be copied to Xunlei direct download) :
Dl.google.com/android/ins…
When installing, copy the installation path, and then configure the environment variables to use, or you can customize the path, my installation in C:\Android\SDK do not have Chinese directory, and then all the way to the next step.
Finally, click Finish to open the Android SDK Manager, which is used to download the relevant tools. You can also directly open the SDK Manager in the SDK directory installed just now. If you cannot open it, please use the administrator to run it.
Now select the tools you need to download:
Since Google server cannot be accessed in China, you also need to configure a domestic image:
Select Tools-options to open the Settings screen
Fill in the mirrors.neusoft.edu.cn port 80 as shown below and check “Forcehttps://… Sources to be touchusinghttp ://… Click Close to Close
Then click Packages — > Reload to Reload:
The next step is to choose the download kit: here must pay attention to only check the need, if all will download more than 20 GIGABytes of things… Ionic2.3.0 requires API25, so select Android 7.1.1 (API25) as the SDK Platform shown here.
Remove all the boxes first, and then follow the steps such as subscript red
Wait until the installation is complete……
Additional: Project integration Crosswalk needs to check Android Support Repository and Google Repository under Extras otherwise an error will be reported
After installation, start to configure android environment variables:
My computer -> Right-click Properties -> Advanced System Settings -> Environment Variables
Create a variable name: ANDROID_HOME
Variable value: C:\Android\SDK (the SDK path you just copied)
Then add the semicolon to the path
; %ANDROID_HOME%\platform-tools; %ANDROID_HOME%\tools
Win10 is divided into two new, do not need a semicolon.
Click OK after the configuration is complete.
Finally, enter android -h in CMD. If the android command is displayed normally, it indicates that the configuration is successful
2. Create demo and debug it
To create the IONic2 project:
Open CMD, first CD to the directory you need to store the project, due to the wall problem, here we still need to execute step by step, otherwise it will be stuck in the download place or error will be reported
Then execute the command to create the app directory:
ionic start yourAppName tutorial –v2 –skip-npm
Here yourAppName is your project name; In the tutorial, ionic predefined a template for the slide out list, another template for tabs (the default), a template for tabs at the bottom of the page, and a blank template. –v2 is ionic2. The default value is ionic1. — Skip-npm: skip the NPM installation. The procedure will give you the option to create an account to share and test the project, select n and press Enter.
Then CD to your app directory and execute CNPM install
Seeing All Packages Installed indicates that the project has been created.
Run ionic serve. Compile the code into a WWW directory and open index in that directory with a browser.
Find yourAppName on your hard drive
SRC is our main working directory. Open this folder with vscode or webstorm to start your project. Note: This code is compiled by the compiler server to generate front-end code in the WWW directory (uncompressed). Ionic will automatically compress the relevant files in the WWW directory and package them into the platform app when you perform packaging.
For more about SRC, please go to:
Yanxiaodi. Gitbooks. IO/ionic2 – guid…
Or the official documentation for ionic
3. Packaging APK
CD to your project directory, the first thing to do is to add the project to the corresponding packaging platform (Android or IOS) :
ionic platform add android
After adding platforms, there will be a folder named Platforms under your project directory
You can run the cordova platform ls command to view the installed platforms and the platforms that can be installed
Note that if the project adds Android platform, you need to delete the Android platform before packaging it as Apple platform, and run the command in the project directory:
Cordova Platform RM Android or Ionic Platform RM Android
Beneath the high-energy high-energy alert: due to the domestic network environment, need to do some processing before packaging command, packaging need gradle plug-in, directly follow packaging orders bigger chance will not download or super slow download or all kinds of error, so we need to download the plugin, do some configuration, and then follow packaging orders.
Gradle download links: services.gradle.org/distributio…
Ionic2 project seems to require 2.14.1 version, download 2.14.1 (recommended to copy to Xunlei) :
Download complete without decompressing, directly copy to the following path of your project:
. \ yourAppName/platforms/android/gradle (no gradle folder for the new project, need to create a new, do not wrong name)
Then modify the configuration: in the directory.. Find the following file under \yourAppName\platforms\ Android \cordova\lib\builders and open it with your code editor:
Find line 189 and put it
https\\://services.gradle.org/distributions/gradle-2.14.1-all.zip
Modified to
. / gradle – 2.14.1 -all. Zip
To:
Save and close, go back to CMD and run ionic Build Android in the project directory
No signature file is set, so the package is unsigned. Debugging can be packaged this way. The first time you pack, you’ll download a bunch of stuff, and it’ll take about an hour or two (if you’re lucky the Internet will work faster), so be patient and try not to shut it down and start again.
After packaging, you can find a packaged APK in the project \platforms\ Android \build\outputs\ APk path. At this point the files in the WWW directory have also been compressed
The packaging of IOS platform is similar, but it needs to be packaged with Xcode under the Apple system, and it needs to be installed on the iPhone and apply for a signature, which is a little more difficult.
Generate signature and add signature to app:
Two tools are needed to generate signatures: keytool and Jarsigner, which are installed in C: Program Files\Java\jdk1.8.0_131\jre\bin and jarsigner respectively
C:\Program Files\Java\jdk1.8.0_131\bin
After adding the directories of the last two programs to the environment variable path, open CMD and type CD to the directory where you want to save the keys:
keytool -genkey -alias demo.keystore -keyalg RSA -validity 40000 -keystore demo.keystore
-genkey generates the key
-alias demo.keystore Set the alias to demo.keystore (change it according to your own situation)
-keyalg RSA Encrypts signatures using the RSA algorithm
-validity 40000 The validity period is 4000 days
-keystore demo.keystore Sets the signature file name to demo.keystore (change it based on your own situation)
After executing the command will ask you to input a bunch of things, according to their own situation input, pay attention to two points: 1, input password password is invisible, just write, write on the press enter, but remember the password, the back to use; 2. Finally, type “yes” when asked to confirm information. Check to see if there is a signature file in the corresponding directory. Then copy this file to your platforms/ Android directory, and create a new file, relex-signing.properties. Open with Notepad and write the following:
Description:
StoreFile = Include path of signature file (use relative path here)
Key.store. password= Password of the signature file
Key. alias= Alias of the signature file
Key.alias. password= Alias password
Writing your password in a file makes it easy, but it gives away your password! Formal development try not to write two passwords in the file!
When you’re done, you can pack the officially signed Android APK:
Run ionic Build Android — — prod — release in the project directory
— ProD provides a package for ionic to speed up app startup. — Release is the package signature
4. Added support for hot updates
Install the hot update plug-in first:
cnpm install -g cordova-hot-code-push-cli
CD to project directory to add plugins to project:
ionic plugin add cordova-hot-code-push-plugin
Perform:
cordova-hcp server
Json files are generated in the WWW folder: chcp.json and chcp.manifest. The chcp.json file is the configuration information of the plug-in, and the chcp.manifest file is the hash reference table of each file in the WWW directory.
Create a file cordova-hcp.json under the App root directory. The content is as follows:
{
“autogenerated”: true,
“content_url”: “http://www.yourserver.com/hotcodepush/www”,
“update”: “start”
}
Note: the http://www.yourserver.com… All refer to your store hot update file server address!
Change the. Chcpenv file in the WWW directory to your server:
{
“content_url”: “http://www.yoursever.com/hotcodepush/www”,
“config_url”: “http://www.yourserve.com/hotcodepush/www/chcp.json”
}
Add the following to the config.xml file tag:
Pack the APK here and install it on your phone.
Check whether hot updates are implemented:
Modify the content in SRC and recompile it. Compile and package apK or execute ionic
Run Android compress the WWW code and run cordova-hcp
Build, then copy the WWW directory to your server, exit APK and open it again to see if any changes made in the background have changed in APK. You can also modify the contents of the WWW file directly, mainly modify the contents of main.js and run cordova-hcp
Build and copy the WWW to the server.
5. Optimize slow startup
Manually control splashScreen shutdown time
Add the following to the config.xml file:
Add content to app.component.ts:
platform.ready().then(() => {
(window).navigator.splashscreen.hide();
}
Note: Execute after platform.ready()
6. Common commands
NPM install – g CNPM – registry=https://registry.npm.taobao.org (NPM image source to taobao)
CNPM install -g cordova@6 ionic@2 (install Cordova 6.x and ionic 2.x)
CNPM install -g Cordova Ionic
CNPM update – G Cordova Ionic
Ionic -help (See help)
Ionic -V (View version)
Cordova -v (View version)
Ionic Start yourAppName tutorial –v2 –skip-npm (Create project and skip NPM installation using CNPM Installation Step 1)
CNPM install (create project and skip NPM install and use CNPM install step 2)
Ionic Start myApp Blank — -v2
Ionic Start myApp Tabs – -v2
Ionic Start myApp Tutorial — v2
Ionic Platform Add Android
Ionic Platform RM Android
Cordova Platform ls (View the installed platforms of the project)
Ionic Build Android
Ionic build Android –prod — release (compile project APK with –prod and sign it)
Ionic Emulate Android (Running projects on APK phones connected on phones running emulators connected on emulators)
Ionic Run Android (build + Emulate)
Ionic Serve (Enable service debugging)