Basic tutorial for getting started with cordova

This article mainly introduces you to the basic introductory tutorial on cordova and some problems encountered in its use. The article introduces it step by step through sample code in very detail. It has certain reference learning value for everyone's study or work. It needs Friends, please follow the editor to learn together. Hope it helps everyone.

Preface

In order to save money and succeed in projects now, adapting to multi-platform cordova is not a good choice. Personally I think it may be a trend in the future! Many well-known APPs such as Alipay and Taobao have integrated a large number of HTML5 pages! For example, most of our company's current apps are h5 pages, and it feels like there is nothing much to do in the native version. One can imagine the importance of learning cordova!

Introduction

Cordova provides a set of device-related APIs. Through this set of APIs, mobile applications can access native device functions, such as cameras, microphones, etc., using JavaScript. Cordova also provides a unified set of JavaScript libraries, as well as device-specific native code backends for these libraries. Cordova supports the following mobile operating systems: iOS, Android, ubuntu phone os, Blackberry, Windows Phone, Palm WebOS, Bada and Symbian.

The first step to get started: Download the resource library and integrate it into the project

To download the source code of the cordova library, you can download it from github or from the official website. In fact, the code on the official website is also posted on github!

Official website: http://cordova.apache.org/

github resource download address: https://github.com/apache/cordova-ios

Use For CocoaPods management of third-party libraries, I used cordova3.8.0 before and updated it to 4.0.1 a few days ago. 4.0.1 only supports 8.0 and above. If you use CocoaPods to update below, an error will be prompted! Just pay attention!

platform :ios, '8.0'

pod 'Cordova', '~> 4.0.1'

Step 2 of getting started: How to integrate correctly in the project cordova4.0.1 library

1. Configuration Config.xml is very important

Config.xml is a global configuration file that controls many aspects of a cordova application's behavior. This platform-agnostic XML file is arranged based on the W3C'sPackaged Web Apps (Widgets) specification, and extended to specify core Cordova API features, plugins, and platform-specific settings. For projects created with the Cordova CLI (described in The Command-Line Interface), this file can be found in the top-level directory:

The general meaning is: config.xml is a global configuration file that controls many aspects of a cordova application behavior. This platform-agnostic XML file is based on the W3C's packaged web application settings (widgets) specification and extends to specify core Cordova API functionality, plugins, and platform-specific settings. Project created with Cordova CLI (described in the command line interface)

http://cordova.apache.org/docs/en/6.x/config_ref/index.html Official detailed explanation

2. Displaying html5 pages requires a container. Here, the CDVViewController class is used to display and control html5. Of course, you can also customize a container to inherit the CDVViewController class to do some customized functions.

How to use is as follows:

self.cordovaManageVC= [[CordovaManageVCalloc]init];

self.cordovaManageVC.startPage=@"http://www.baidu.com";

[self.navigationControllerpushViewController:self.cordovaManageVCanimated:YES];

3. Set the user agent

- (instancetype)init {

self= [superinit];

if(self!=nil) {

//设置用户代理 如不设置无法调用与H5定制的JavaScript方法进行交互

NSString* original = [CDVUserAgentUtiloriginalUserAgent];

NSString* userAgent = [originalstringByAppendingString:@"delegateUserName"];

self.baseUserAgent= userAgent;

}

returnself;

}

4. Custom plug-ins need to use the CDVPlugin class of cordova and use subclasses to integrate CDVPlugin

/**

*返回控件

*

*@param command

*/

- (void)back:(CDVInvokedUrlCommand*)command;

After the customization is completed, you need to configure it in confing.xml

The above is the most basic usage of cordova;

Some things encountered when using Cordova Problem

Problem one

Problem

[Error: Failed to find 'ANDROID_HOME' environment variable. Try setting setting it manually. Failed to find 'android' command in your 'PATH'. Try update your 'PATH' to inclde path to valid SDK directory.]
ERROR building one of the platforms: Error: cmd: Command failed with exit code

Solution

ANDROID_HOME=D:\apps\Android\sdk
PATH=%PATH%;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools

Problem two

Problem

Error: Could not find an installed version of Gradle either in Android Studio,
or on your system to install the gradle wrapper. Please include gradle
in your path, or install Android Studio

Solution

Download the latest gradle package from https://services.gradle.org/distributions/ and install it.

ANDROID_HOME=/home/kongxx/Android/Sdk
GRADLE_HOME=/apps/gradle-3.2.1
PATH=$PATH:$ANDROID_HOME/tools/:$ANDROID_HOME/platform-tools:$GRADLE_HOME/bin

Question 3

Question

When using "cordova build android" to package, an error is reported: Error: Could not find gradle wrapper within Android SDK.

$ cordova build android
CHCP plugin after prepare hook:
 config-file set to http://www.tjdr.info/EWT/chcp.json
ANDROID_HOME=/home/kongxx/Android/Sdk
JAVA_HOME=/opt/jdk8
Error: Could not find gradle wrapper within Android SDK. Might need to update your Android SDK.
Looked here: /home/kongxx/Android/Sdk/tools/templates/gradle/wrapper

Solution

Checked the /home/kongxx/Android/Sdk/tools/templates/gradle/wrapper directory. The directory did not exist, so I checked the android-studio environment and found that it can be found in plugins/android The /lib/templates directory contains the above content, so copy it decisively.

$ cp -rf android-studio/plugins/android/lib/templates /home/kongxx/Android/Sdk/tools/

Problem 4

Problem

Error when using Cordova packaging: Error: spawn EACCES

$ cordova build android
CHCP plugin after prepare hook:
 config-file set to http://www.tjdr.info/EWT/chcp.json
ANDROID_HOME=/home/kongxx/Android/Sdk
JAVA_HOME=/opt/jdk8
Subproject Path: CordovaLib
Error: spawn EACCES

Solution

sudo chmod -Rf 755 ~/Android

Problem 5

Problem

When using the browser test in cordova, the google-chrome browser is started by default, such as:

cordova run browser

Solution

You can use –target to specify the browser you want to use.

cordova run browser --target=opera
cordova run browser --target=firefox

Related recommendations:

How Cordova packages Vue projects

cordova basic commands

Detailed explanation of the method of packaging cordova into webapp

The above is the detailed content of Basic tutorial for getting started with cordova. For more information, please follow other related articles on the PHP Chinese website!