Базовая настройка приложения Ionic 4
ionic start open-social-media blank
Приведенная выше команда создает проект с «open-social-media».
Что мы можем ожидать от этой сессии?
Мы создадим набор кнопок с иконками социальных сетей. Когда пользователь щелкает значок определенной социальной сети (Facebook, Instagram, YouTube и Twitter), он проверяет, установлено ли соответствующее родное приложение или нет.
Если он установлен, он будет переходить на страницу или профиль пользователя соответствующего собственного приложения, в противном случае он будет переходить на страницу или профиль пользователя браузера.
Шаг 1:
Создание значков социальных сетей HTML с событием и методом клика (который будет определен на шаге 4)
<ion-header>
<ion-toolbar color="primary">
<div class="ion-text-center">
<ion-title>
Open Social Media
</ion-title>
</div>
</ion-toolbar>
</ion-header>
<ion-content padding>
<div>
<div class="horizontal">
<p class="font-size-16">Like, Follow and Share</p>
</div>
<div class="horizontal">
<div class="social-icons" (click)="socialMedia('FACEBOOK')">
<ion-icon name="logo-facebook"></ion-icon>
</div>
<div class="social-icons" (click)="socialMedia('INSTAGRAM')">
<ion-icon name="logo-instagram"></ion-icon>
</div>
<div class="social-icons" (click)="socialMedia('TWITTER')">
<ion-icon name="logo-twitter"></ion-icon>
</div>
<div class="social-icons" (click)="socialMedia('YOUTUBE')">
<ion-icon name="logo-youtube"></ion-icon>
</div>
</div>
</div>
</ion-content>
Шаг 2
Добавление необходимого CSS для компонента
.social-icons {
font-size: 30px;
}
.horizontal {
display: flex;
justify-content: space-evenly;
}
.font-size-16 {
font-size: 16px;
}
Шаг 3
Добавьте необходимые зависимости или плагины
Плагин доступности приложений
ionic cordova plugin add cordova-plugin-appavailability npm install @ionic-native/app-availability
В плагине браузера приложений
ionic cordova plugin add cordova-plugin-inappbrowser npm install @ionic-native/in-app-browser
Шаг 4
Добавляем нашу логику TypeScript в component.ts
import { Platform } from '@ionic/angular';
import { Component } from '@angular/core';
import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';
import { AppAvailability } from '@ionic-native/app-availability/ngx';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
providers: [InAppBrowser, AppAvailability]
})
export class HomePage {
constructor(
private platform: Platform,
private inAppBrowser: InAppBrowser,
private appAvailability: AppAvailability
) { }
socialMedia(type) {
switch (type) {
case 'FACEBOOK': {
this.openFacebook('saichoclate', 'https://www.facebook.com/saichoclate/');
break;
}
case 'INSTAGRAM': {
this.openInstagram('sai_kumar_korthivada_skk')
break;
}
case 'TWITTER': {
this.openTwitter('korthivadasai');
break;
}
}
}
openTwitter(name) {
let app;
if (this.platform.is('ios')) {
app = 'twitter://';
} else if (this.platform.is('android')) {
app = 'com.twitter.android';
} else {
this.openInApp('https://twitter.com/' + name);
return;
}
this.appAvailability.check(app)
.then((res) => {
const data = 'twitter://user?screen_name=' + name;
this.openInApp(data);
}
).catch(err => {
this.openInApp('https://twitter.com/' + name);
});
}
openFacebook(name, url) {
let app;
if (this.platform.is('ios')) {
app = 'fb://';
} else if (this.platform.is('android')) {
app = 'com.facebook.katana';
} else {
this.openInApp('https://www.facebook.com/' + name);
return;
}
this.appAvailability.check(app)
.then(res => {
const fbUrl = 'fb://facewebmodal/f?href=' + url;
this.openInApp(fbUrl);
}
).catch(() => {
this.openInApp('https://www.facebook.com/' + name);
});
}
openInApp(url) {
this.inAppBrowser.create(url, '_system')
}
openInstagram(name) {
let app;
if (this.platform.is('ios')) {
app = 'instagram://';
} else if (this.platform.is('android')) {
app = 'com.instagram.android';
} else {
this.openInApp('https://www.instagram.com/' + name);
return;
}
this.appAvailability.check(app)
.then((res) => {
this.openInApp('instagram://user?username=' + name);
}
).catch(err => {
this.openInApp('https://www.instagram.com/' + name);
});
}
}
Давайте разберем приведенный выше фрагмент машинописного кода
- Импортируйте встроенный в браузер плагин доступности приложения в свой компонент.
- Добавьте импортированные классы провайдеров в массив провайдеров компонента.
- Добавьте 3 провайдера в конструктор (Platform, InAppBrowser и AppAvailability).
- Служба платформы используется для определения используемой платформы, т. е. Android, IOS или веб-браузера.
- InAppBrowser используется для открытия предоставленного URL-адреса в нашем телефоне или в браузере на основе URL-адреса.
- AppAvailability используется для проверки доступности соответствующего приложения.
Методы и использование
socialMedia(type): этот метод получает свойство «type», когда пользователь нажимает на иконки в HTML. Этот метод решает, какой метод должен быть выполнен на основе действий пользователя.
openFacebook, openTwitter, openInstagram эти методы будут проверять следующее:
- Независимо от того, является ли платформа Android или IOS.
- Существует ли соответствующее приложение в их родном телефоне или нет. Если соответствующее приложение существует, оно открывает приложение, если нет, оно переходит во встроенный веб-браузер.
Пример демо ниже
Примечание
Здесь каждое приложение для социальных сетей имеет разные имена пакетов на разных платформах. У них разное формирование URL и разные шаблоны открытия страницы или профиля пользователя. Статическое содержимое, определенное выше, даст вам хорошее представление о том, как его нужно настроить.
Мобильное приложение Facebook против Интернета
- Когда мы используем имя страницы Facebook для доступа в мобильном приложении Facebook, оно всегда открывает определенный модуль, такой как «Главная», «Обзоры», «Фотографии», но не открывает обзор конкретной страницы. Чтобы открыть обзорную страницу, мы должны открыть ссылку в нашем родном браузере телефона.
Наблюдение. Правая часть изображения – это мобильный браузер (показывает главный модуль всей страницы), тогда как левая часть изображения – мобильное приложение Facebook. Оба представления разные, но оба указывают на одно и то же. Страница и URL.
использованная литература
Чтобы узнать больше о браузере In App, нажмите здесь.
Чтобы узнать больше о доступности приложений, нажмите здесь.
