ionic vue mobile template 08

Card Payment - Hybrid mobile template built with Ionic Vue using capacitor for native builds.

Vue

Ionic Vue Mobile Template 04

Netlify Status

vue-ionic (最新版) とネイティブアプリにビルドするための Capacitor フレームワークを使ったハイブリッドアプリのテンプレートです。 - これらのテンプレートは Instagram や Dribble のアプリデザインのインスピレーションページにあったものを実装しました。

このテンプレートはCaptec 銀行のアプリをもとに実装しました。Captec 銀行は南アフリカ最大級の銀行です。国内に 1000 以上の支店を持ち、個人向け銀行サービスを提供しています。このテンプレートでは、一般的な外観に焦点を当てています。

デモページ

環境を構築する

npm install

開発環境でブラウザ上で起動する

npm run serve

デザイン

alt text

ネイティブアプリについて

ネイティブアプリをビルドするために Capacitor を使用しました。

ネイティブアプリにビルドするための準備

iOS でのテスト、ディストリビューション

最新版の Xcode をダウンロードしてください。
npm run build
npx cap add ios
npx cap copy
npx cap open ios Xcode がファイルのインデックスを作成するのに数分かかります。XCode の画面上部の進捗状況に注目してください。

[任意] 正常に動作するかを確認するために、画面上部の左側にある実行ボタンをクリックしてください。もしシミュレーター上でアプリが起動します。もし何も問題なければ、ログインしてクリックできるようになるはずです。そうでなければ、issue を作成してください🤷。確認します。

アイコンとスプラッシュ画面 - Xcode (v11.5) では、config.xml 上のアイコンをマッピングできまないので、手動で行う必要があります😞。ルートディレクトリ上で、Resources を探し、Images.xcassets を選択します。パネルが表示され、アイコンを追加する場合はアプリアイコンを、スプラッシュ画面を追加したい場合にLaunchImages を選択できます。

Android でのテスト、ディストリビューション

最新版の Android Studio をダウンロードします。
npm run build
npx cap add android
npx cap copy
npx cap open android Android Studio がファイルのインデックスの作成に数分かかります。画面下部の進捗状況に注目してください。
Testing -インデックス作成完了後、緑の実行ボタンを探してください。そのボタンをクリックすると、エミュレーター上、あるいは、もし USB 接続されているなら、スマホでアプリが起動します。(エミュレーターのセットアップはこちら)

公式ドキュメント

お問い合わせ

@dlodeprojuicer on Twitter