Create the configuration of the first app and Cordova build environment using Cordova

Introduction

Through the previous article we have a certain understanding of the Hybrid App, and according to the actual business situation to choose Cordova to develop our App, if you do not know the words please review the previous article, then we will start the Cordova tour!

Installing the Cordova CLI

Since the Cordova command-line tool was released as a NPM package, it was so convenient for our front-end developers!

#全局安装Cordova$ npm install -g cordova

Note : For OS X and Linux, the NPM command is added to Sudo because Cordova needs to be installed in a directory where your current user does not have write permissions or other restricted directories such as/usr/local/share. If you use Write permissions like Nvm/nave or have the install directory, you can omit the sudo prefix.

Create an App

To create an app, simply execute:

$ cordova create hello com.example.hello HelloWorld

Let's dissect it together. Cordova CreateWhat the hell did you do? According to the official description of the command supports four parameters:

1. path: The directory name of the project
2. ID: The ID of the project, in the widget for writing to config. xml, usually in the format Com.example.hello
3. Name: The display name of the application
4. options: Optional configuration item for the project
   • --template: Template files for executable projects
   • --copy-from specifying SRC
   • --link-to a front-end resource directory can be linked to the project's WWW directory instead of a copy

Through part of the Cordova CLI source we can roughly know how Cordova helped us create an initialization project

var paths = {};//gets the config. fr file from the Cordova-app-hello-world npm package paths.configxml = Path.join (Require (' Cordova-app-hello-world '). DirName, ' config: ');//Get the WWW directory from the Cordova-app-hello-world NPM package paths.www = Path.join ( Require (' Cordova-app-hello-world '). DirName, ' www ');//Get hooks directory from Cordova-app-hello-world npm package paths.hooks = Path.join (Require (' Cordova-app-hello-world '). DirName, ' hooks ');//Get Cordova-app-hello-world from Package.json NPM package File var diralreadyexisted = Fs.existssync (dir);//dir is the first parameter of Cordova create ptah//to determine if the current path exists without directly creating if (! diralreadyexisted) {fs.mkdirsync (dir);} try {//If--template is specified, copy the project from the template to the new item under if (cfg.lib.www.template) {copytemplatefiles (Import_from_path, dir, Issubdi R);    }//If--link is specified, create a link to the project if (Cfg.lib.www.link) {linkfromtemplate (Import_from_path, dir);}    If no--template or--link is not specified, then directly with Cordova-app-hello-world NPM package copyifnotexists (paths.www, Path.join (dir, ' www '));    Copyifnotexists (Paths.hooks, Path.join (dir, ' hooks ')); var configxmlexists = Projectconfig (dir); Moves config to root if in www if (paths.configxml &&!configxmlexists) {SHELL.CP (Paths.configxml, p    Ath.join (dir, ' config. * '));    }} catch (e) {if (!diralreadyexisted) {shell.rm ('-rf ', dir); } if (Process.platform.slice (0, 3) = = = ' Win ' && e.code = = ' Eperm ') {throw new Cordovaerror (' Symlinks o    n Windows require Administrator privileges '); } throw E; Get Package.json file var pkgjsonpath = Path.join (dir, ' Package.json ');//Update Package.json name and version fieldsif (fs.    Existssync (Pkgjsonpath)) {delete Require.cache[require.resolve (Pkgjsonpath)];    var Pkgjson = require (Pkgjsonpath);    Specify the project name, which is the third parameter of our Cordova create command if (cfg.name) {pkgjson.displayname = Cfg.name;    }//Specify the project ID, which is the second parameter of our Cordova create command if (cfg.id) {pkgjson.name = Cfg.id.toLowerCase ();    } else if (!cfg.id) {//Set the default ID to HelloWorld pkgjson.name = ' HelloWorld '; } PKGJson.version = ' 1.0.0 '; Fs.writefilesync (Pkgjsonpath, json.stringify (Pkgjson, NULL, 4), ' UTF8 ');} Create platforms (post-add Android and iOS platforms are placed in this folder) and plugins (plugins) folder if (!fs.existssync (Path.join (dir, ' platforms '))) { Shell.mkdir (Path.join (dir, ' platforms ')); }if (!fs.existssync (Path.join (dir, ' plugins ')) {Shell.mkdir (Path.join (dir, ' plugins '));} var = path.join (dir, ' config. Configpath ');//Only update config. A symlinkif (!fs.lstatsync (configpath). isSy    Mboliclink ()) {//Write out ID and name to config; set version to 1.0.0 (to match package.json default version)    var conf = new Configparser (Configpath);    if (cfg.id) conf.setpackagename (cfg.id);    if (cfg.name) conf.setname (cfg.name);    Conf.setversion (' 1.0.0 '); Conf.write ();}

After the project is successfully created, we will get the following directory structure

hello/|-- config.xml      #项目配置文件|-- hooks/          #存放Cordova 的钩子|-- node_modules/|-- res/            #存放一些各平台的icon或者首屏图等资源|-- www/            #静态网页资源|-- platforms/      #各平台存放目录|-- plugins/        #插件目录|-- package.json

Add Android platforms and plugins

Initialize the project with the next step is to add the platform we need to support, for example: Android, IOS, Android, for example

# 切换到项目目录下$ cd hello# 添加Android平台$ cordova platform add android --save# 添加摄像头插件$ cordova plugin add cordova-plugin-camera

Cordova platform Add, Cordova Plugin Add principle is similar to Cordova Create, the template folder of the Cordova CLI is as follows: Interested children shoes can dig into the next!

Cordova compiled packaged Android APP build apk Install package

After the analysis of the Cordova CLI, the Cordova CLI is just a command-line tool that does not have any environment capability, so to compile the Android apk file first we want to install the Android environment

Before installing the environment, let's say the pit I met! Quote official words: "Since [email protected], Cordova for Android project use Gradle build. "The Pit is Grable installed, even after the installation on the Cordova compile time will also be reported Grable installation Error!" The final successful installation concludes with the following: "Kill Cordova to download gradle from Google at compile time." Take the Linux system as an example install the Gradle steps as follows:

Download the Gradle installation package and install it (don't try to download it from the official website unless you have a ladder)

$ wget https://code.aliyun.com/shuoer/soft/raw/master/gradle-4.1-bin.zip#解压Gradle安装包到你指定的目录，我以${HOME}/.zs-tools/为例$ unzip gradle-4.1-bin.zip -d ${HOME}/.zs-tools/#添加Gradle的环境变量，让系统能识别Gradle命令echo ‘export PATH=${HOME}/.zs-tools/gradle-4.1/bin:${PATH}‘ >> ${HOME}/.bashrc#干掉cordova在编译时从google下载Gradle编译工具#如果没有这条命令，你休想cordova能编译成功，除非你有梯子echo ‘export CORDOVA_ANDROID_GRADLE_DISTRIBUTION_URL=https://code.aliyun.com/shuoer/soft/raw/master/gradle-4.1-all.zip‘ >> ${HOME}/.bashrc#使配置生效$ source ${HOME}/.bashrc

Installation of the Android environment

The installation of the Android environment depends on the Java environment, and the installation of the Java environment in fact Baidu can be found! There are no complicated steps, and the developers basically have, Java is not much nonsense!

For a front-end developer, I only need the Android SDK to do it, no need to install Android Studio, if you are engaged in Android development or you want to give Cordova to develop an Android plug-in when it is possible to use the Android Studio! So I chose to install only the Android SDK, taking the Linux system shell environment for bash as an example of the following steps:

#下载android sdk for linux 包$ wget https://code.aliyun.com/shuoer/soft/raw/master/android-sdk_r24.4.1-linux.tgz#解压 android-sdk 包到你指定的目录，我以${HOME}/.zs-tools/为例$ tar zxvf android-sdk_r24.4.1-linux.tgz -C ${HOME}/.zs-tools/#添加 ANDROID_HOME 的环境变量$ echo "export ANDROID_HOME=${HOME}/.zs-tools/android-sdk-linux" >> "${HOME}/.bashrc"#添加 android tools 和 platform-tools 的环境变量$  echo ‘export PATH=${ANDROID_HOME}/tools:${ANDROID_HOME}/platform-tools:${PATH}‘ >> "${HOME}/.bashrc"#使配置文件生效$ source ${HOME}/.bashrc#创建 repositories.cfg 如果有该文件可跳过该步，主要解决 Android SDK Manager无法升级$ touch ${HOME}/.android/repositories.cfg#升级 android 所需要的tools和api（该命令耗时较长务必耐心等待）# -a 表示升级所有 --no-ui 不要ui界面 --filter 只安装我指定的部分$ echo y | android update sdk -a --no-ui --filter tools,platform-tools,android-26,build-tools-26.0.2

Q: Why do you always like to use the ${home}/.zs-tools/folder to store all your environment files

A: In fact, it is very simple, because I "lazy"! Why do you say lazy? If you are currently logged on to the user is root, then you can put the environment installation files anywhere is not a problem, but for non-root users, placed in any directory other than the current user, such as:/opt,/usr/share, when you are downloading, extracting or performing Android command, you need to add sudo! before the command This is because the current user does not have write access to the target directory! So in order to avoid unnecessary permissions trouble, I choose to put the file in the user directory!

In addition in Linux systems with. The files or folders at the beginning of the point are hidden! As long as you manage it, it doesn't seem messy.

Compiling an android APK installation package

Although the Cordova official website shows that Cordova is compiling Android with the Grable, but the Cordova CLI to help us, compiling a debug version of the APK installation package only need to do the following:

#编译一个可调试的安装包(第一次编译用时较长务必耐心等待)$ cordova build android

Compiling a release version of the APK installation package

$ cordova build android --release

Description

If the above technology stack is described clearly need a small space, so I will split the article:

1. Hybrid APP Development Practice Summary-opening 2. Cordova environment configuration and creation of the first Android App (this article) 3. Server-side Docker installation, Nginx, Jenkins, git services 4. Server-side code-push-server, MySQL service 5. The introduction of client Code-push plug-in and the use of CODE-PUSH-CLI 7. How to use a pure shell to write a command-line tool to quickly build a developer's environment and Android to debug a real machine

Create the configuration of the first app and Cordova build environment using Cordova