Ionic cross-platform App development FAQ

FAQs about ionic cross-platform App development

Ionic is a framework used to quickly develop cross-platform applications. There are many highlights:

• Low learning cost

  For front-end developers, the learning cost is not very high. If angular is used, there will be almost no learning cost.

• Easy to use

  Powerful CLI, start-> platform-> serve-> build-> emulate-> run, complete the full set of service command lines, no need to write the configuration file, no need to F5

• Multiple and powerful components

  Provides many powerful ready-to-use components to easily implement popular interaction effects, such as pull-down refresher and ion-infinite-scroll) tabs (ion-tabs), sidebar menu (ion-side-menu), etc. you only need to write a little code to achieve these popular effects, which is much faster than native development.

• Support cordova plug-in

  Opening this door means that we can use a large number of native functions, such as calling the camera to take photos, responding to the return button, calling and sending text messages ...... Only a few lines of code are required.

• Fast update

  Is v1.1.0, and now () is v1.2.4. rapid updates mean maintenance and bug fixes can be quickly implemented.

Of course, there are also defects, otherwise this note will not be taken, as shown below:

• The new version is not fully backward compatible.

  It doesn't matter if it's not compatible. it's okay to give a detailed description. no

• Difficult to locate bugs

  Angular + cordova + ionic + javascript, after finding the problem, it is difficult to determine the problem.

• Difficult to optimize performance

  Slow animation, poor experience on low-end servers, and optimization measures are generally recommended to use less animation, less shadow, less gradient ...... However, you don't need to be too ugly, and the experience with native applications is too bad.

• Others

  The strange question cannot be answered, turning stackoverflow in the middle of the night ......

I. jsonp cross-domain, how to write php services

P.S. this is angular's problem. I did not take notes at the time, but I forgot to have encountered such a problem.

Angular $ http can send a jsonp request, which is similar to jQuery in the following usage:

// Request data $ http. jsonp (sUrl ). success (function (res ){//...}). error (function (err ){//...});

SUrl has special requirements and must contain the callback parameter. the parameter value can only be JSON_CALLBACK. angular documentation:

Relative or absolute URL specifying the destination of the request. The name of the callback shocould be the string JSON_CALLBACK.

For example:

var sUrl = http://www.ayqy.net/app/rsshelper/index.php?callback=JSON_CALLBACK

The question is: how to write the php service? Directly return the json data wrapped in JSON_CALLBACK?

No, because callback is in the actual request url! = JSON_CALLBACK, which is secretly replaced by angular (not described in the document). Therefore, the background must write as follows:

Of course, this is a get case, which is relatively simple. if it is post, callback needs to be obtained in other ways. The Complete example is as follows:

II. ion-content's damping and rebound effect is gone

Ionic v1.2 cancels the default damping and rebound effect of ion-content. the code clearly shows the same, that is, there is no rebound effect. later it was found that it was a version update pot. after turning it over for a long time, I found the answer in the comments on the official blog:

Great news, thank you! It seems that the "has-bouncing = 'true'" does not work with the native scroll, is it correct? I managed though to have it again by going to back go js scroll (overflow-scroll = "false ")

I only checked in the browser so if any one can confirm that with native scrolling removes bouncing that wocould be great.

I need this feature for a custom 'pull refresh 'method I had.

That is to say, to have a damping rebound effect after v1.2, we need to do this:

3. data sharing among multiple views

That is, data sharing between multiple controllers (generally different views correspond to different controllers). of course, the simplest method is to use global variables ($ rootScope), but this is not good, A more reasonable way is to write a service or factory by yourself, provide a data access interface, and inject dependencies as needed, such:

. Service ('dataserv', ['$ http', 'uiserv', function ($ http, UIServ ){//... // Dictionary var oDir = {// key: value}; function save (val) {var sKey = Date. now () + ''; oDir [sKey] = val; return sKey;} function get (sKey) {return oDir [sKey];} return {//... save: save, get: get };}]);

Then pass the sKey through the url to achieve data sharing, which is clean.

4. update the notification view

The data presentation has been written in the template, but if the data has not arrived after the page is opened, the template is parsed. because no blank pages are displayed, after a while the data arrives, the view is not updated, it is still blank, for example:

 
{{data}}
// jsapp.controller('MainCtrl', ['$scope', 'DataServ', function($scope, DataServ) {    // ...    setTimeout(function() {        // ...        $scope.data = 'data';    })}]);

Because the operation assigned to data is out of the controller scope, you need to manually notify the view to update, as shown below:

// ...$scope.data = 'data';$scope.$apply();

Of course, manual notification is generally not required, even the data returned asynchronously, because it is only related to the scope. In short, if you find that the view needs to be updated manually, simply add $ apply.

5. php native xml extension how to get the content in

In rss format Tag. the content cannot be obtained directly. a special method is required:

$ Content = (string) $ item-> children ("content", true); // $ encodedContent = $ content-> encoded; // $ content-> encoded returns the escaped html, for example, converting & into &, which is generally used
Direct display
    
Of course, this problem occurs only when the native xml extension ($ xml = simplexml_load_file ($ url);) is used to parse xml, for more information, see php-How to parse cdata html-content of XML using SimpleXML? -Stack Overflow
6. open an external page in a browser
You need to use a cordova plug-in, cd to enter the project folder, and then:
    
ionic plugin add cordova-plugin-inappbrowser
    
After the installation is complete, you can call it. you do not need to modify the configuration file or introduce other js files, as shown below:
    
// OpenInBrowserwindow. open ('http: // example.com ',' _ system'); Loads in the system browserwindow. open ('http: // example.com ',' _ blank '); Loads in the InAppBrowserwindow. open ('http: // example.com ',' _ blank ', 'location = no'); Loads in the InAppBrowser with no location barwindow. open ('http: // example.com ',' _ self '); Loads in the Cordova web view // testwindow. open (url, '_ system'); // Default Browser // window. open (url, '_ blank'); // ugly Android built-in browser // window. open (url, '_ self'); // same as above
    
The other two are too ugly. For more information, see Cordova InAppBrowser Plugin Example using ionic framework.
VII. splash screen black screen white screen
P.S. black screen white screen is actually the same problem, but this problem is quite difficult to solve. it took me one day to solve it.
    
Ionic is integrated with the splashscreen plug-in by default. this cordova plug-in is not very effective. the default configuration only displays the splash screen when the app is opened for the first time, but the actual effect is:
    
         
When the app starts the splash screen shows for a few seconds as expected, and then the screen goes black for @ 1 second and then white for @ 2 seconds and then the main app page appears.
     
Is there any way to prevent the black and white pages appearing? I read somewhere that a black page appears when there is no splash page but I do have a splash page and it appears fine.
    
    
The description of the problem found in stackoverflow is too relevant. However, the answer to the question below alone cannot solve the white screen problem. you also need to modify the configuration file.
    
It was first discovered that the black screen (replace white in the English description above with black), and later found the reason: the main view container ion-nav-view is empty, the background color is #000, so the solution is to add an ion-view to it:
    
  
      
       
   
  
    
Add css to change the background color of ion-nav-view to white. However, the problem has not been solved, and the black screen problem becomes a white screen problem, which makes the solution troublesome.
    
 
 
         
  
  
 
Downgrade the splashscreen plug-in to v2.0.0.
 
There is a bug in versions later than v2.0.0. The current version () is v3.0.0. First cd to the project folder, and then command line:
 
// Delete the existing version of cordova plugin rm cordova-plugin-inappbrowser // install v2.0.0cordova plugin add cordova-plugin-inappbrowser
 
     
  
  
 
Modify the configuration file MyApp/config. xml
 
    
    
    
    
    
    
    
 
Unhide automatically (changed to code control and hide), change the duration to a large value (10 seconds), and set the splash screen to be displayed each time an application is opened.
 
P.S. by default, only SplashScreen and SplashScreenDelay are available. you need to add other (SplashMaintainAspectRatio optional ).
 
     
  
  
 
Modify app. js
 
Manually hide the splash screen and add it to run.
 
.run(['$rootScope', function($rootScope) {        // init        // $rootScope.isLoading = false;        // hide splash immediately        if(navigator && navigator.splashscreen) {            navigator.splashscreen.hide();        }    });}])
 
In this case, do not call hide in time; otherwise, a white screen will still appear (some solutions require $ timeout 50 ms hide, and the white screen will still appear. do not do this)
 
    
 
 
    
The most resentful problem is over. it seems like a simple function, but it is difficult to have a perfect native experience, and it is difficult to solve the strange problem, the current feasible solution may not work after a while. you can check the White page showing after splash screen before app load.
8. release of Android signature
Various signature methods are outdated. currently () the following signature methods can be used:
    
 
 
         
  
  
 
Create a keystore in MyApp \ platforms \ android
 
For more information, see Ionic toturial for building a release.apk.
 
     
  
  
 
Creating a release-signing.properties file
 
For detailed steps, see: How to automatically sign your Android apk using Ionic framework and Crosswalk
 
     
  
  
 
Build
 
Cd to the project folder, and then run the command line ionic build -- release android. two items are generated after success. in MyApp \ platforms \ android \ build \ outputs \ apk, android-armv7-release.apkand android-x86-release.apk, generally, tablets and PCs use x86, and mobile phones use arm7. if google play is to be uploaded, both devices must be uploaded and automatically recognized during download.
 
    
 
 
    
As for crosswalk, the chrome kernel is provided to enable the low-end server to support high-end things, but it will make the apk much larger (3.5 M-> 23 M). after adding crosswalk, the feeling is... Well, it's changed, but in order to support low-end users, crosswork is generally added.
IX. Summary
Quick development is great, and the sequelae are quite bad.
    
The author started to work on release v1.0.0 at noon on January 1, as shown in the following figure:
    
              
Rsshelper
    
    
              
Rsshelper
    
    
It looks pretty good. non-sold products, don't give away ~