Use Ionic to package HTML5 projects cheer Android and iOS apps

Source: Internet
Author: User
Tags install node

Recently, because of the project needs, in the study of 2 days Ionic packaging applications, the entire process is now recorded.

Ionic is a HTML5 mobile application development framework, can be said to be ANGULARJS mobile solution, based on the PhoneGap of the compilation platform, can be compiled into various platform applications. One development, running everywhere.

1, installation Ionic

First, you need to install node. js, after the installation is successful, enter the following instructions on the command line to install Ionic and Cordova

npm install -g cordova ionic

You can test whether the installation was successful by looking at the version number, and if the version number is displayed, the installation succeeds.

Windows:

ionic -v

Mac:

ionic -version

2. Create Ionic Project

Once the installation is successful, you are ready to start creating the project

ionic start ionic-app tabs

Where tabs is the Ionic template, a total of 3 options, Tabs,sidemenu,blank.

After the project is created, the directory structure is as follows

WWW is the development of the project source code

Platforms below is the compiled project, the following should have 2 subdirectories Android and iOS, respectively, for different platforms

Resources is to put resource pictures, examples, start pictures, etc.

3. Package into app

Enter the project directory:

cd ionic-app

Add the corresponding frame:

ionic platform add ios
ionic platform add android

Compile:

ionic build ios
ionic build android

Run in Simulator:

ionic emulate ios
android

Build the APK (this is an unsigned apk):

cordova build -releaseandroid

Packaged iOS can only be done on Mac, and Xcode needs to be installed.

Packaged Android can be done on WINDOWS/MAC and requires pre-installation of the JDK and Android Studio.

This is the end of the most streamlined packaging process.

The next article will tidy up some of the problems encountered during the packaging process.

Use Ionic to package HTML5 projects cheer Android and iOS apps

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.