Introduction to the

The mainstream Hybrid App now has two options:

  • In order toPhoneGapRepresent, useHTMLThe page is builtApp
  • In order toTitaniumFor representative, adoptedNodeJSDrive to compileNativeLayer of code, thus generating approximations toNativeThe effect of

As for Titanium, I tried it in another article. Today I document the environment setup for PhoneGap development

Why do you do this?

There is often a debate about whether native or hybrid is better for development. Don’t argue, just say why choose Hybrid

  • Development speed is fast. Early toHybridRapid development, quick trial and error, and even adoptionABTestingVerify which design is better as the version gradually stabilizes fromHybridToo much toNativeArguably the best development mode right now
  • Fast release. If you don’t have a push update feature on Taobao or WeChat, consider using itHybridThe incremental update function, and even some active pages can be directly accessed online sites, improve the efficiency of the update, bypass somestoreAudit mechanism of
  • Large scale team work. Shard as modules, and finally merge without doing the wholebuildOptimized development efficiency

Hybrid is the best solution when there are few developers. Compared with AppCan in China, I choose PhoneGap without hesitation, because the latter has a long development time, complete documents and various auxiliary tools.

Howto (HOWTO do it)

PhoneGap claims to be free, but given its record of charging fees, it uses its open-source version of Cordova, which is developed under the Apache license.

The command-line Interface based on NodeJS is used in The development process

  1. The installationnodejs

  2. Install the Coordova module

    sudo npm install -g cordova

    This installation process takes a long time, and Taobao’s NPM mirror is recommended

  3. The installationandroidDevelop the environment and configure the environment variables inTerminalIn the inputandroidLet’s see if we canandroidThe version manager shows that the configuration has not been done, about how to configure the environment variable search,macRecommend to seeHere,
  4. The installationant.cordovausingantTo do continuous integration, configuration is requiredantEnvironment. Search for it.macThe watchHere,

  5. Create the HelloWorld execution command

    cordova create hello com.example.hello HelloWorld

    This process is extremely difficult, I hope you have a good network

  6. Configure the development platform, enter the hello directory, and execute

    cordova platform add android

  7. compile

    cordova build

  8. Install, don’t like virtual machine very much, so directly plug in Android to run

    cordova run android

    If you want to start the virtual machine

    cordova emulate android

    And then a silly, non-functional app comes on the phone

  9. For further development, use Android Studio to import the project, in the \hello\ WWW directory is the HTML development content, Hybrid development is done here

Changes to environment variables during this phase

export PATH="$PATH:/Users/xxx/android-sdk-macosx/platform-tools" export PATH="$PATH:/Users/xxx/android-sdk-macosx/tools" Export PATH="$PATH:/Users/ XXX /android-sdk-macosx" export PATH="$PATH:/Users/ XXX /apache-ant-1.9.4/bin" export PATH="$PATH:/Users/ XXX /apache-ant-1.9.4/bin" export PATH="$PATH:/Users/ XXX /apache-ant-1.9.4/bin JAVA_HOME=`/usr/libexec/java_home`

Supplement 1.

Mobile Web UI selection, enumerate some of the popular UI library as the target of selection

  • ionic
  • famo

Famo has been deeply integrated with AngularJS. However, considering the encapsulation of ionic cordova, ionic is prepared to be used

  1. Install the ionic cli

    $ npm install -g cordova ionic

  2. Create a project

    $ ionic start myApp tabs

    This step is very time consuming, network, network

    ➜ Project ionic start bee-app tabs Creating ionic app in folder /Users/ XXX /myApp based on tabs Project The directory /Users/xxx/myApp already exists. Would you like to overwrite the directory with this new project? (yes/no): yes Downloading: https://github.com/driftyco/ionic-app-base/archive/master.zip [= = = = = = = = = = = = = = = = = = = = = = = = = = = = =] 100% 0.0 s Downloading: https://github.com/driftyco/ionic-starter-tabs/archive/master.zip [= = = = = = = = = = = = = = = = = = = = = = = = = = = = =] 100% 0.0 s Update config.xml Initializing cordova project Fetching plugin "org.apache.cordova.device" via plugin registry Fetching plugin "org.apache.cordova.console" via plugin registry Fetching plugin "com.ionic.keyboard" via plugin registry Your Ionic project is ready to go! Some quick tips: * cd into your project: $ cd myApp * Setup this project to use Sass: ionic setup sass * Develop in the browser with live reload: ionic serve * Add a platform (ios or Android): ionic platform add ios [android] Note: iOS development requires OS X currently See the Android Platform Guide for full Android installation instructions: https://cordova.apache.org/docs/en/edge/guide_platforms_android_index.md.html * Build your app: ionic build <PLATFORM> * Simulate your app: ionic emulate <PLATFORM> * Run your app on a device: ionic run <PLATFORM> * Package an app using Ionic package service: ionic package <MODE> <PLATFORM> For more help use ionic --help or visit the Ionic docs: http://ionicframework.com/docs +---------------------------------------------------------+ + New Ionic Updates for February 2015 + + The View App just landed. Preview your apps on any device + http://view.ionic.io + + Add ngCordova to your project for easy device API access + bower install ngCordova + + Generate splash screens and icons with ionic resource + http://ionicframework.com/blog/automating-icons-and-splash-screens/ + +---------------------------------------------------------+ Create an ionic.io account to use the Ionic View app and other features? (Y/n): Y

  3. Registration of ionic

    Is it possible to Create an ionic. IO account to use the ionic View app and other features? , select Y to register the account

  4. Update project

    $ ionic login 
$ ionic upload

  5. Run the project

    $ cd myApp
$ ionic platform add android
$ ionic build android
$ ionic run android

Reference (s) :

  • Problems with setting the $JAVA_HOME environment variable in Mac OS X
  • For Mac OS X, download and install Ant
  • Cordova
  • The Command-Line Interface
  • Taobao NPM mirror image
  • Performance, UX, cross-platform: Mobile Web application UI framework competition