Preface: Cordova uses front-end technology to develop apps, which can save costs and release quickly. No need to understand native app development
The way to load the web is compatible with generating projects on various platforms such as Android, ios, and browsers.
Cordova encapsulates the corresponding API and displays html files in WebView. At the same time, it supports rich plug-ins, communicates with native components, interfaces and binds to standard device APIs.
It enables developers to call native codes, cameras, contacts, and third-party apps through JS.
1. Pre-development environment
1. Install Jdk, configure corresponding environment variables, install Java Development Kit (JDK) 8 or download from file->project Structure->Sdk Location->Gradle Setting in AS 2. Download gradle plugin:
https://gradle.org/ releases/ (you can wait for compilation, download the corresponding gradle, pressurize and add the bin environment variable)
3. Install Android studio, download the specified android sdk, add the tools of the Android SDK, tools/bin and platform-tools environment variable path
4. Download and Install node.js, https://nodejs.org/en/download/ (download network error, switch network)
5. Install the git client, install cordova on the git command line. ( npm install -g cordova ) (may require Configure domestic mirror), view the current cordova version (cordova -v)
2. Create an application, run and compile it (can be operated by cmd command line)
1. Create an application
Cordova create order com.demo replica assistant
Format: cordova create app project name domain name logo at the end start with com, app name
2. Add app running platform
cd order 进入项目
$ cordova platform add browser //添加浏览器平台
$ cordova platform add android //添加android平台
$ cordova platform add ios（在MAC中添加）
$ cordova platform add wp8
$ cordova platform add windows
$ cordova platform add amazon-fireos
$ cordova platform add android
$ cordova platform add blackberry10
$ cordova platform add firefoxos
List current cordova running platforms
$ cordova platforms ls
Delete the current running platform:
cordova platform rm android
Check to see if the platform build requirements are met
$ cordova requirements
Requirements check results for android:
Java JDK: installed .
Android SDK: installed
Android target: installed android-19,android-21,android-22,android-23,Google Inc.:Google APIs:19,Google Inc.:Google APIs (x86 System Image):19,Google Inc.:Google APIs:23
Gradle: installed
Requirements check results for ios:
Apple OS X: not installed
Cordova tooling for iOS requires Apple OS X
Error: Some of requirements check failed
Compile the current platform, it will compile debug.apk
cordova build android (equivalent to cordova prepare android cordova compile android two instructions)
(compilation error could not resolve com.android.tools.build:gradle:3.0.1
try to solve 1.gradle /gradle.properties proxy note (no such file)
2. Download the corresponding plug-in 3.0.1 corresponding to gradle 4.1 (invalid, report directly to unknownhost))
3. Run the app and run it on each platform (you must add the platform first)
$cordova run browser // Run the MyApp program in the browser, and the browser will automatically access http://localhost:8000/
$cordova run android //On the android platform Run, connect to the emulator or Android real machine, after each modification, you can run it directly like this
3. Add corresponding web pages, such as Baidu Website Assistant
1. Load a specified web page, and directly replace the address in config.xml (index.html is the URL under the local www folder of our project) with the address on the server. For example, if you change it to , you can directly open the Baidu web page.
(The activity inherits the CordivaActivity class, and then uses loadUrl(launchUrl))
2. In order to prevent cordova from jumping to the browser that comes with it, you need to add it to the config.xml file
3. Add icon and startup page
a. Specify icon and startup image directory, as follows www/img/,
b. After cordova5.0 version, add startup page needs to install cordova-plugin-splashscreen plug-in.
cordova plugin add cordova-plugin-splashscreen
or cordova plugin add https://github.com/apache/cordova-plugin-splashscreen.git
c.config.xml add icon path, add startup page effect
<platform name="android">
<icon density="xxxhdpi" src="www/img/logo.png">
<splash density="port-xhdpi" src="www/img/splash.png"></platform>
自动隐藏启动页面AutoHideSplashScreen（默认为：true）
<preference name="AutoHideSplashScreen" value="true" />
Android启动模式配置
<preference name="AndroidLaunchMode" singtask/>
4. Remove the plugin, add the plugin
cordova plugin rm cordova-plugin-whitelist
cordova plugin add cordova-plugin-whitelist
4. Signature
1. Manual signature
Generate key file test.keystore, alias YYY, valid for 4000 days
keytool -genkey -v -keystore test.keystore -alias YYY -keyalg RSA -validity 4000
(After executing the command, you will be prompted to enter a password, set some Company name and the like, remember the password, others are optional)
View the certificate at any time keytool -list -v -keystore test.keystore
Enter keystore password: //Enter the password, press Enter
to officially sign
jarsigner -verbose -keystore E:\decompile \test.keystore -signedjar shop111.apk E:\decompilation\shop-release\dist\shop-release.apk testalias
format: jarsigner -verbose -keystore signature-signedjar The file name after the signature file needs the alias alias in the signature file certificate
enter password
Example: Generate order-release.apk
jarsigner -verbose -keystore /d/nodejs/order/jlc_keystore -signedjar order-release.apk /d/nodejs/order/platforms/android/app/build/outputs/apk/release in the current directory /app-release-unsigned.apk Shenzhen Jiali Chuang
signature packaging reference: https://blog.csdn.net/ly_xiamu/article/details/126676446
2. Automatically sign,
and then create a build.json file in the root directory of the project and write in it, the signature information, that is, the password corresponding to your keystore and other related information, which is in json format
{
"android": {
"release": {
"keystore": "test_keystore(项目根目录keystore文件)",
"alias": "别名呀",
"storePassword": "android123456",
"password": "android123456"
}
}
}
Five, package apk
1. Compile the unsigned apk package
cordova build android --release
In the new version of Cordova, aab is supported. The Debug version generates apk by default, and the Release version generates aab by default, but you can also specify to generate apk
cordova build android --release --prod – --packageType=apk
6. Add plug-ins, customize plug-ins to realize some functions
cordova plugin add cordova-plugin-file-transfer
Cordova provides a fileTransfer plugin, through which we can easily implement file transfer operations (upload, download).
Cordova-plugin-file-opener2
Cordova opens the use of the file system plugin:
com.cordova.plugins.cookiemaster 1.0.0 "CookieMaster"
webview on Android and iOS platforms does not support regular use of documents. This plugin allows you to get and set cookie values from your WebView through a simple interface.
cordova-plugin-splashscreen 5.0.3 "Splashscreen"
welcome page added
cordova-plugin-GetIntentData 1.0.0 "GetIntentData-plugin"
custom jump activity plug-in, receive other application jumps and parse Intent data
phonegap-plugin-barcodescanner 8.1.0 "BarcodeScanner"
adds QR code scanning and automatically applies for permissions dynamically
com.jlc.customtoast 1.0.0 "MyToast"
custom Toast plug-in, native x-toast is dynamically applied for permission pop-up box, custom use
cordova-plugin-android-permissions 1.1.4 "Permissions"
check and apply for permissions Use
the latest version of the android system, it can only check permissions, not dynamically apply for permissions
cordova-plugin-dialogs 2.0.2 "Notification"
alert pop-up window,
normal prompt box, one button navigator.notification.alert(message, alertCallback, [title], [buttonName])
navigator.notification.confirm selection prompt box with input The prompt box prompt, let the phone make a sound beep
https://www.jianshu.com/p/7d1e1872eb42
cordova-plugin-inappbrowser 3.2.0 "InAppBrowser"
app's built-in browser opens a URL, you can set the loading url to add parameters, monitor loading stop and errors, and the loaded method monitors
https://www.npmjs.com/package/ cordova-plugin-inappbrowser
cordova-plugin-device 2.0.3 "Device"
uses the properties of the global device object to obtain device information, simply obtain device information
console.info print information
device.model //device.model returns the model or product name of the device. This value is set by the device manufacturer and may be different in different versions of the same product.
device.uuid //Get the universally unique identifier uuid of the device, for example: '78ca1fe2c1d3b584'
device.platform //Get the name of the operating system, for example: 'Android'
cordova-plugin-app-version 0.1.9 "AppVersion"
This plugin is used to obtain the version number of the development software
cordova-plugin-networkinterface 2.0.0 "NetworkInterface"
get wifi ip address
cordova-plugin-wechat 3.0.0 "Wechat" Login with WeChat
Access WeChat login
cordova-plugin-cache-clear 1.3.7 "Cordova Cache Clear" No use for clearing
Clear cache stored in android application using cordova webview, To use this plugin, just call window.CacheClear(success,error)
cordova-plugin-network-information 2.0.2 "Network Information" Useless cleanup
Listening for network type changes
cordova-plugin-wkwebview-engine 1.2.2 "Cordova WKWebView Engine" is currently useless to clean up
This plugin enables Cordova to use the WKWebView component instead of the default UIWebView component, and can only be installed on systems with iOS9.0SDK.
In iOS9, Apple has fixed the problem in iOS8, that is, you cannot use file:/// to load locale files, you must use a local web server. However, if CORS is not enabled on the server, you still cannot use XHR from the file:// protocol
cordova-plugin-statusbar 2.4.3 "StatusBar" No use for cleaning up
to realize the operation of the status bar of the mobile phone. The official document provides the operation of changing color, transparency, display and hiding, etc., which may be related to ios
cordova-plugin-x-toast 2.7.2 "Toast"
local prompt floating box, intermittently invalid, will dynamically apply for permission pop-up box to interrupt useless cleaning
Later: Use cases of cordova plug-ins-Toast official plug-ins and custom plug-ins
Create value, happy to share!
Reference document:
Cordova+vue scan QR code and barcode
Cordova - barcodeScanner code scanning plug-in use detailed explanation of
cordova development environment construction detailed explanation