1. Environment Construction
Before configuring the Cordova environment, you should first download and install Node.js, Chinese official website : http://nodejs.cn/.
Run the cmd command line tool as administrator:
1. Check whether Node.js has been installed successfully, the command is: node -v
2. To check if npm is installed, the command is: npm -v
3. Cordova installation, the command is: npm install -g cordova, C:\Users\Administrator\AppData\Roaming\npm will generate the corresponding .cmd file
If it is slow, you can modify the mirror and install it again.
npm config set registry http://registry.cnpmjs.org npm info underscore
npm install -g cordova
After the installation is successful, do the version check test, the command is: cordova -version
4. For ionic installation, the command is: npm install -g ionic, C:\Users\Administrator\AppData\Roaming\npm will generate the corresponding .cmd file
After the installation is successful, do the version check test, the command is: ionic -version
ios-sim installation, the command is: npm install -g ios-sim, C:\Users\Administrator\AppData\Roaming\npm will generate the corresponding .cmd file
After the installation is successful, do the version check test, the command is: ios-sim -version
5. To view the Java version information, the command is: java -version
Configure the JAVA_HOME system environment variable (already configured to skip directly): JAVA_HOME=C:\Program Files\Java\jdk1.8.0_101
6. View the ant version information, locate the Apache Ant decompression directory, ant -version (skip)
Official website address: http://ant.apache.org/
7. Configure Android environment variables
Path environment variable added: D:\Program Files\Android\Android\Sdk\android-sdk\platform-tools;D:\Program Files\Android\Android\Sdk\android-sdk\tools;
Add system variable: ANDROID_HOME=C:\Program Files (x86)\Android\android-sdk
Note: If you know the location of adb.exe clearly (android 2.3 and above are under the android-sdk\platform-tools directory, and 2.2 and below are under the android-sdk\tools directory), you can only add it in the path variable its directory.
8. View the adb version information, the command is: adb version
9. Restart the computer....
2. Environmental testing
1. Create a project
The content code of index.html is as follows:
<!DOCTYPE html> <!-- Licensed to the Apache Software Foundation (ASF) under one or more contributor license agreements. See the NOTICE file distributed with this work for additional information regarding copyright ownership. The ASF licenses this file to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> <html> <head> <!-- Customize this policy to fit your own app's needs. For more guidance, see: https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy Some notes: * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this: * Enable inline JS: add 'unsafe-inline' to default-src --> <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;"> <meta name="format-detection" content="telephone=no"> <meta name="msapplication-tap-highlight" content="no"> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> <link rel="stylesheet" type="text/css" href="css/index.css"> <title>Hello World</title> </head> <body> <div class="app"> <h1>Apache Cordova</h1> <div id="deviceready" class="blink"> <p class="event listening">Connecting to Device</p> <p class="event received">Device is Ready</p> </div> </div> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/index.js"></script> </body> </html>
2, compile, run
Note: The android emulator needs to download, install and configure the emulator for the first run, so it runs slowly. You can directly start the emulator by compiling and running again.
3. The directory where the installation package is located: platforms\android\build\outputs\apk
4. Run the simulator test, as shown below:
Three, pay attention to the problem
1. WebStorm compilation depends on gradle, which is automatically downloaded during the WebStorm compilation process, which takes a long time
2. The Android version is wrong. The Android version generated by the WebStorm creation project is high and needs to be downloaded in the Android SDK Manager.
3. The Android SDK version is unified, and the AndroidManifest.xml and project.properties files in the respective directories of platform/android/ and platform/android/CordovaLib are unified and consistent.
