JSON は、Web サイトをモバイル アプリケーションに変える 7 行のコードを実現します

この記事では、Jasonette を使用して Web ビューとネイティブ コンポーネントを統合し、Web サイトをモバイル アプリケーションに変える真の「ハイブリッド」アプリケーションを構築する方法を紹介します。困っている友人は参考にしていただければ幸いです。

Web サイトをモバイル アプリケーションに変えるために必要なのは、上記の 7 行のオレンジ色の JSON コードだけであると言ったら、あなたは信じますか?モバイル アプリと同じ動作を実現するために、フレームワーク API を使用して Web サイトを書き直す必要はまったくありません。すでに既存の Web サイトがある場合は、URL を参照するだけで、それをネイティブ アプリとして「パッケージ化」できます。

これに基づいて、JSON コードの内容をわずかに調整するだけで、すべてのネイティブ API、ネイティブ UI コンポーネント、およびネイティブ ビュー遷移 (ビュー遷移) に直接アクセスできます。

最も単純化された効果の例を以下に示します。

これからわか​​るように、GitHub.com を埋め込みました。 Web ページですが、インターフェイス上の残りのレイアウトは、ナビゲーション バーや下部のタブ バーなどのネイティブ UI コンポーネントです。また、Web サイトを書き換えるために API を使用する必要はなく、ネイティブの切り替え効果を自動的に得ることができます。

具体的な方法を紹介する前に、「見た目はクールですが、ネイティブ アプリケーション フレームワーク内で Web ページを表示する以外に、このテクノロジの重要性は何ですか?

Ask Great!これがこの記事のポイントです。Web ビューとアプリケーションの間にシームレスな双方向通信を作成するだけで、親アプリケーションが Web ビュー内で JavaScript 関数をトリガーできるようになり、Web ビューが JavaScript 関数を呼び出すことができるようになります。ネイティブ API。

例:

## このビューには次のものが含まれることに注意してください:

#ネイティブナビゲーション バー、および組み込みの切り替え機能

• #QR コードを生成できる Web アプリケーションを埋め込む Web ビュー

• #ネイティブを含める下部のテキスト入力コンポーネント

• 上記のすべては、JSON コードのプロパティをわずかに調整することで実現できます。

最後に、「別のコンテンツを入力」を使用することに注意してください。テキスト入力領域に入力すると、それに応じて QR コードが変更されます。入力されたテキストにより、QR コード ジェネレーター Web アプリケーション内の JavaScript 関数がトリガーされ、QR コード画像が再生成されます。開発フレームワークは、「Web ビューとネイティブ アプリケーションをシームレスに統合する」という問題を根本的に解決しようと試みてきました。これらのフレームワークは完全にネイティブ、つまり完全に HTML5 のアプローチに焦点を当てているためです。

モバイルの将来について議論するとき、誰かの意見を聞くたびにアプリの場合、「HTML5 とネイティブのアプローチのどちらが勝つのでしょうか?」というようなことを聞​​くでしょう。 「そのような発言です。

ネイティブと HTML が共存できるとは誰も考えていないようで、両者のコラボレーションと最終的な実現は簡単ではないようです。

この記事では、あなた:

Web エンジンとネイティブ コンポーネントの統合がより良いアプローチであることが多い理由

##HTML とネイティブのシームレスな統合が有効な理由難しいのは、その実装方法です。

• ## さらに重要なのは、このようなテクノロジを使用して独自のアプリケーションを迅速に構築する方法です。

  ## ネイティブ アプリケーションで HTML を使用する理由は何でしょうか。
• ##先に進む前に、まず、この方法が良いか悪いか、また、この方法の使用が適切な場合を考えてみましょう。

1. Web ネイティブ関数の使用

• アプリケーション アプローチでコンテンツの一部を実装するには、Web エンジンを使用する方が適切な場合があります。たとえば、WebSocket はネイティブ Web 関数です。この場合、WebSocket を「エミュレート」するサードパーティ ライブラリをインストールする代わりに、組み込みの Web エンジン (iOS の WKWebView および Android の WebView) を使用する方が適しています。
##追加のコードをインストールする必要はありません。無料のツールを使用する方が良いのではないでしょうか?これは次の理由にもつながります。大きすぎるバイナリ ファイルを避ける

#一部の関数では、巨大なサードパーティ ライブラリの使用が必要になる場合があり、そのような関数をすぐに使用する必要がある場合があります。たとえば、QR コード画像ジェネレーターをネイティブに組み込むためです。場合によっては、バイナリ ファイルのサイズが大きくなるサードパーティ ライブラリのインストールが必要になる場合がありますが、Web ビュー エンジンを使用し、単純な

• Bootstrap リスト グループ コンポーネントの詳細な分析
• JavaScript関数のカリー化の詳細説明
• JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)
• Angularjs は WeChat UI (weui) を統合します
• JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル