Как создать простое веб-представление, используя ionic для моего сайта

Я пытаюсь сделать простое приложение для моего веб-сайта, используя ionic.
Что я сделал

npm установить -g кордова

версия-> 9.0.0

npm install -g ionic

версия->5.0.3

ионный запуск MyApp пустым

cd myApp

Ионные Cordova Плагин добавить Cordova-плагин-Ionic-Webview

npm install @ ionic-native / ionic-webview

Теперь, где я должен редактировать файлы. Я хочу разместить только ссылку на свой сайт, больше никаких дополнительных функций. Я не могу найти хорошее руководство, чтобы сделать приложение для веб-просмотра. Нужно ли использовать in-app-browser вместо веб-просмотра? Я пропускаю какие-либо шаги?

https://github.com/ionic-team/cordova-plugin-ionic-webview говорит искать <preference name="Hostname" value="app" />Я не могу найти этот код в config.xml в корневой директории приложения. Где находится этот код?

Также предложите, какая платформа лучше всего подходит для кроссплатформенного веб-приложения.

1 ответ

Решение

Я полагаю, вы просто хотите отобразить существующий веб-сайт? Webview не предназначен для этого, вы можете просто использовать, например, iframes

<ion-content>
    <iframe src="https://www.example.com"  style="width:100%;height:100%" scrolling="yes" ></iframe>
</ion-content>

или если вы хотите открыть его во внешнем браузере, таком как safari, используйте плагин inAppBrowser

Найти рабочий пример здесь

Конкретно для вашего вопроса

  1. Установите этот плагин в свой документ приложения Ionic

     $ ionic cordova plugin add cordova-plugin-inappbrowser
     $ npm install @ionic-native/in-app-browser 
    
  2. Импортируйте в свой файл app.module.ts, не забудьте ввести массив провайдера

  3. В желаемом файле home.ts привяжите с помощью кнопки или позвоните напрямую

     public openWebView(): void {
        this.iab.create("https://www.example.com", "_blank");
     }
    

Оцените красоту вида:-)

Другие вопросы по тегам