Hybrid APP Development Summary

npm--registry https://registry.npm.taobao.orginfo underscore< /span>

Related question linkhttps://cnodejs.org/topic/ 4f9904f9407edba21468f31e

3. Project creation, installation and operation

After the environment is set up, we will create the project p>

1. Create a project p>

Use the command ioinc start yyt

After the command is completed, A yyt folder will be generated under the current path

2. Configure the platform

cd yyt to enter the project folder

Use the command ionic platform add android

If you want to configure ios, it’s ionic platform add ios

3.build

Use the command ionic build android

ionic build ios if it’s ios

span>

4. Run To mobile phone

Android mobile phone

After connecting your phone, use ionic run android

iPhone

After build, enter platfroms-->ios

Find xxx.xcodeproj in this path and open it with Xcode

Use Xcode point to run, you can run on your phone

4. Development tools p>

Here I use WebStorm to edit the code

http://bbs.phonegap100.com/thread-1567-1-1.html

5. Code structure

The code is written using the angularJs framework

The page display is based on index.html as the main page. The content of different pages is displayed in ion-nav-view, and the html of each page is placed under www/templates

Each html page has a corresponding controller.js, these js files are placed under www/js/controller< /p>

Defined in the app.js file Related modules and configuration state machine

config.js configures related global variables

The http request uses the $http service of angularJs, and the relevant code is under service.js

style.css is a custom style file, generally used to rewrite related ionic styles, Achieve custom style effects

VI. Development-related issues

1. Icon and startup page

ionic can use commands to automatically generate icons and startup pages, the method is as follows

(1) Under the resouces file under the project, put the picture icon.png and picture splash.png,< /p>

icon.png image requirements are 192*192px, splash.png requirements are 2208*2208px,

(2) Then switch to the project directory under cmd and enter the command

span>

ionic resources

After finishing, it will automatically Generate an Images of different sizes on the droid platform and ios platform will be automatically configured under the config.xml file

>

Related reference links

http://ionichina.com/ topic/54e455ab2be672f1111c01e2

The problem I encountered: After the image is generated, an error will be reported after executing ionic build android:

p>

Execution failed for task':mergeDebugResources'

libpng error : Read Error

Reason: There is a problem with some of the automatically generated pictures; Solution: Find the problematic picture, replace it with a normal picture, and build it again

2. Plug-in

When you need to call native functions, you need to use plug-ins, here you can use third-party plug-ins, or write your own plug-ins

(1) You can use ngCordova’s plug-ins when using third-party plug-ins. To use ngCordova, please refer to the following steps< /span>

①Install Git

Download ngCordova download link http://angular-js.in/ng-cordova/

③ Import the ng-cordova.js file

span>

Bring ng-cordova.js or ng-cordova.min.js into index.html and put it before cordova.js, AngularJS Ionic After the document (because ngCordova relies on AngularJS).

④ Introduce the dependency of ng-cordova

Introduce the dependency of ng-cordova in app.js, angular.module('myApp',['ngCordova']);

⑤Install plug-in documentation link http://ngcordova.com/docs/plugins/

The method of installing the plug-in is very simple. Switch to the project path under cmd and use the command cordova plugin add plugin url

command to delete plugin cordova plugin rm plugin id

To view the plug-in list of the current project cordova plugin list

The problem I have encountered:

< span style="font-size:16px">

< span style="font-size:16px"> Reason: The cordova-android version is too low, you can upgrade; use the command