Ionic Development Hybrid App problem summary

Http://ionichina.com/topic/5641b891b903cba630e25f10

Http://www.cnblogs.com/parry/p/issues_about_build_hybrid_app_with_ionic.html

Parry
Source: http://www.cnblogs.com/parry/
This article is copyright to the author and the blog Park, Welcome to reprint, but without the consent of the author must retain this paragraph, and in the article page obvious location to the original link, otherwise reserves the right to pursue legal responsibility.

This article focuses on some of the most recent problems encountered during the development of the Hybrid App using Ionic, as well as the subsequent releases of IOS and Android versions.

Article Directory

2. Ionic Introduction and Project Requirements Introduction
4. Processing of the View cache
6. Support for different modes of the keyboard
8. Check the status of the device network
10. Batch generation of icons for IOS devices and Android devices and splash screen images
12. Drop-down Refresh
14. Feedback "Comments and suggestions" methods for invoking the mail client
16. Ways to score apps on different platforms
18. Integrated Aurora Push
20. Packaged IOS, Android platform issues
22. Project Open Source and download

1. Introduction to Ionic and project requirements

Currently Hybrid APP has a lot of perfect programs, such as Ionic, React native, and so on, recently because of a small demand, need to write a small App in real-time view of mobile phone, simple learning under the Ionic wrote a small program, simply on the shelves released.

First of all, the simple requirements of the project:

• Can monitor the online situation of the added website in real-time, detect the first time of the outage to carry out the APP push, can inform the technician the first time response processing;
• Can be added to the site to speed up, in the App at any time to see the speed of all sites;
• By the way, add a few major search engines to add the site collection, easy to grasp the basic SEO situation in a timely manner.

The main demand is the above, then in the selection of technical framework, found that Ionic learning is relatively simple, and later as long as the different platform under the separate packaging can be generated IOS and Android platform for the App.

To put it simply, Ionic is using HTML5 to create a development framework similar to the native application of the mobile platform, which is bound with AngularJS and Sass, the core of the compiler platform is PHONEGAP, and has integrated some existing UI framework, do not need to spend a lot of attention to the interface design.

Lu continued to develop out shelves, this article on some of the pits encountered, for everyone to develop the process of reference.

A few, handy to do a website: http://gugujiankong.com/

2. View Cache processing

Ionic default to the view to add a caching mechanism, but in this App, all the view needs to be immediately refreshed and the user added a new site after the page also needs to be refreshed, you need to disable the view cache.

Disabling the cache only needs to be disabled in View.

1. State (' Tab.websites ', {2     URLs: '/websites ', 3     cache:false, 4 views     : {5         ' tab-websites ': {6             Templ Ateurl: ' templates/tab-websites.html ', 7             controller: ' Websitesctrl ' 8         } 9     }10})

The cache is disabled globally by: $ionicConfigProvider. Views.maxcache (0);

3. Support for different modes of keyboard

In different user input scenarios, you need to display different keyboard modes to facilitate user input, such as when you enter a message, the keyboard displays the message mode, and so on.

In Ionic, you need to install the keyboard plugin to control the display of keyboard mode.

It can be called in $ionicplatform.ready after installation.

1 if (Window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {2     Cordova.plugins.Keyboard.disableScroll (True); 3     Cordova.plugins.Keyboard.hideKeyboardAccessoryBar (TRUE); 4}5 if (window. StatusBar) {6     //Org.apache.cordova.statusbar Required7     statusbar.stylelightcontent (); 8}

The corresponding input can be controlled only by adding the appropriate type, and all supported type is shown here.

<input type= "Email" placeholder= "email" ng-model= "Data.username" >

Use the effect as follows.

4. Checking the condition of the equipment network

Because the app always needs to be networked, check the network when the app is launched and prompt the user when the network is unavailable.

After installing the network check plugin, you can detect and prompt when the App is launched.

1 Document.addeventlistener ("Deviceready", function () {2     //Listen for Online event 3     $rootScope. $on (' $ Cordovanetwork:online ', function (event, networkstate) {4         var onlinestate = networkstate; 5         Console.log (" Device online ... "); 6     }) 7     //Listen for Offline event 8     $rootScope. $on (' $cordovaNetwork: Offline ', Function (event, Networkstate) {9         var offlinestate = networkstate;10         //Alerts the user of a network exception         $ionicLoading. Show ({             Template: ' Network exception, cannot connect to the server! ) () () () () () ()     ;

5. Icons for IOS devices and Android devices and batch generation of splash screen images

IOS devices and Android devices need to provide many different sizes of picture resources, including the different sizes of icon and splash, due to the screen size adaptation of different devices.

If each size to use PS export, the workload is great, fortunately there are auto-generated tools, only need to provide the largest size for generation.

IOS icon and splash Build: http://ios.hvims.com/

Android related resource generation: https://romannurik.github.io/AndroidAssetStudio/index.html

6. Drop-Down Refresh

The user drop-down refresh is a generic operation specification that Ionic has integrated into the View, which can be used in this way, with the method obtained in On-refresh.

<ion-refresher refreshing-icon= "ion-loading-c" refreshing-text= "Cloud get Data ..." pulling-text= "drop-down Refresh data ..." On-refresh = "Dorefresh ()" ></ion-refresher>

7. Feedback "Comments and suggestions" methods for invoking the mail client

Often need to add the "comments and suggestions" option in the menu, when the user clicks, calls the mail client, automatically fill in the recipient and the message title, the user just write the content click Send.

The cross-platform scenario is to install the Emailcomposer plug-in and invoke it in the event of a button.

$scope. Feedback = function () {    if (window.plugins && window.plugins.emailComposer) {        Window.plugins.emailComposer.showEmailComposerWithCallback (function (Result) {            },            "Advice for cuckoo monitoring",//Subject "            ",                      //Body            ["[Email protected]"],//to            null,                    //CC            NULL,                    //BCC            false,                   //ishtml            NULL,                    //Attachments            null);                   Attachment Data    }};

8. How to score different platforms for your App

In order to guide the user to the APP scoring, often in the menu to add options or pop-up window in the form of user scoring guide, in Ionic as long as the device platform to determine the corresponding jump to the store can be.

1 $scope. Rateus = function () {2     if ($ionicPlatform. Isios) {3         window.open (' itms-apps://itunes.apple.com/us/ App/domainsicle-domain-name-search/id511364723?ls=1&mt=8 '); or ITMS://4     } else if ($ionicPlatform. isandroid) {5         window.open (' market://details?id=<package_name> '); 6     }7};

9. Integrated Aurora Push

The main purpose of the development of the APP is to use the push function for the first time notification when the website is down, so that the technician can respond quickly, so the push function must be integrated.

Domestic has a very mature third-party push platform: Aurora push.

After registering to add plug-ins, that is, Jpush-phonegap-plugin.

The user is identified by an alias or group when the user logs on.

var arrayobj = new Array ("Tags" + Loginresult.userid); Window.plugins.jPushPlugin.setTags (arrayobj);

Ionic Development Hybrid App problem summary