ionic4 calls internal App of mobile phone

Posted by Jbert2 on Tue, 31 Dec 2019 08:16:45 +0100

ionic4 calls internal App of mobile phone

There are many significant changes in the upgrading of ionic3 to ionic4. As ionic4 is still in the bate version, there are many areas that have not been improved. Now let's talk about how to call the APP inside the mobile phone in the ionic4 bate version.

1, Install plug-ins that can detect whether the APP is installed

npm install –save @ionic-native/app-availability
ionic cordova plugin add cordova-plugin-appavailability –save

Note: the version of @ ionic native / APP availability must be version 5.0.0-beta.15 (you can manually change the version to "5.0.0-beta.15" in package.json, because we want the installed app availability to include the ngx folder)

2, Install the plug-in that can be called to open the internal APP of the mobile phone

cordova plugin add https://github.com/lampaa/com.lampa.startapp.git

3, Import to app.module.ts

import { AppAvailability } from '@ionic-native/app-availability/ngx';
···
providers: [
    ...AppAvailability
]

4, Take home.ts for example

import { Platform } from '@ionic/angular';
import { AppAvailability } from '@ionic-native/appavailability/ngx';

@Component({
    selector: 'app-Home',
    templateUrl: 'Home.page.html',
})

export class Home {
    scheme = [];
    plat:  any;
    constructor(
        private appAvailability: AppAvailability, 
        private platform: Platform
    ) { }

    checkApp() {
        if (this.platform.is('ios')) {
            /* Scheme URL of goldmap */
            this.scheme  = 'iosamap://';
            this.plat = 'ios';      
        } else if (this.platform.is('android')) {
            /* Android package name of goldmaps */
            this.scheme = 'com.autonavi.minimap'; 
             this.plat = 'and';    
        }
         const uri = this.plat === 'ios' ? ('iosamap://navi?sourceApplication=&lat=116.279153&lon=39.998946&dev=0&style=2'): ('amapuri://Route / plan /? Dlat116.279153 & dlon = 39.998946 & dName = Haidian District, Beijing & Dev = 0 & T = 0 ');

        /* Check whether the Gaud map is installed on the mobile phone */
        this.appAvailability.check(this.scheme)    
        .then(
            (yes: boolean) => {
                 /* Installed, open Gaud map */ 
                 const sApp = startApp.set({
                  'action': 'ACTION_VIEW',
                  'category': 'CATEGORY_DEFAULT',
                  'type': 'text/css',
                  'package': this.scheme,
                  'uri': uri,
                  'flags': ['FLAG_ACTIVITY_CLEAR_TOP', 'FLAG_ACTIVITY_CLEAR_TASK'],
                  'intentstart': 'startActivity'
                });
            },
            (no: boolean) => {
                /* Not installed, please write prompt code or jump to download */
            }
        );
    }
}

Topics: Mobile iOS Android npm