Aiti Tribe ライブ クラスの第 4 回目: H5 Web サイトをアプリにすばやく変換する方法は?

H5 ウェブサイトをアプリに変換するのは、WebView シェルを配置するほど簡単ではありません。重要なのは、ネイティブバージョンの機能とエクスペリエンスを実現することです。 wap2app は、H5 ウェブサイトをアプリに変換するフロントエンド開発フレームワークです。最下層に HTML5PLUS エンジンをベースとし、数十万のネイティブ API を呼び出して、より強力なプッシュ、支払い、共有、ポジショニングなどの機能を実現し、API 不足によって発生する M Station の機能上の問題を解決します。では、M Station をアプリのフロントエンド開発フレームワークに素早く変換するにはどうすればよいでしょうか? DCloud の CTO である Cui Hongbao 氏を招いてライブ共有を行います。

導入

1. H5ウェブサイトをアプリに変換するための要件

2. ウェブアプリとネイティブアプリの体験のギャップ

3. wap2appフレームワークの紹介

4. Wap2app実装ソリューション

5. Wap2app開発方法

みなさんこんにちは。今日のトピックは「H5 ウェブサイトをネイティブ エクスペリエンス アプリに変換する」です。

1. H5ウェブサイトをアプリに変換するための要件

H5 ウェブサイトしかなく、アプリがない場合、アプリを生成するためのオプションは何ですか?現在のテクノロジーには、おおよそ 3 つのルートがあります。

1. Android/Object-cネイティブ言語を使用し、各プラットフォーム用に再開発します。これにより、H5、Android、iOS の並行開発が実現し、コストが最も高くなり、効率が最も低くなります。

2. React Native/weex/mui/Cordova などのクロスプラットフォーム テクノロジを使用することで、1 セットのコードで Android と iOS の両方のプラットフォームをカバーします。これには、H5 とクロスプラットフォーム アプリの 2 セットのコードを、中程度のコストと効率で維持することが必要です。

3. H5 ウェブサイトを再利用し、直接アプリに変換します。この方法では、H5 コードを 1 セットだけ維持すればよく、コストが低く、効率が高くなります。

3 番目のオプションは最もコストがかかりますが、うまく実行するのがもっとも困難です。単に WebView を使用してパッケージ化するだけでは、機能的なエクスペリエンスがネイティブ アプリに比べて大幅に劣り、エンド ユーザーは購入しなくなります。

H5 ウェブサイトをアプリに変換する鍵は、ネイティブ バージョンの機能とエクスペリエンスを実現することです。これは業界で長い間存在してきた変換の問題であり、多くの人が希望を失っています。

2. ウェブアプリとネイティブアプリの体験のギャップ

Web アプリとネイティブ アプリのエクスペリエンスのギャップは、主に次の点に反映されます。

ウィンドウアニメーション: モバイル ブラウザー上の H5 Web ページは、アニメーションなしで href を通じて現在のページにジャンプします。ただし、ネイティブ アプリはネイティブの View アニメーションを介して切り替わるため、より優れたエクスペリエンスが提供されます。

スクロール バーは一番上まで移動します。H5 Web ページのタイトル バーは通常、div モードでは一番上に固定され、ページのスクロール バーは一番上まで移動して、タイトル バーの右側を覆います。この効果は非常に不自然です。 div スクロールを使用するとスクロール バーが上部に到達する問題も解決できますが、div スクロールは Android では商業的に効率的ではありません。

プルダウンによる更新: H5 Web ページで DIV によってシミュレートされるプルダウンによる更新はスムーズではなく、多くの M サイトではプルダウンによる更新は行われません。しかし、これはアプリ内での一般的な重要なインタラクティブ操作です。

タブの切り替え: ネイティブ アプリがタブを切り替えると、タブ領域は変更されず、コンテンツ領域の表示のみが変更されます。しかし、Web アプリがタブを切り替えると、ページ全体が再読み込みされ、白い画面が表示されることがよくあります。

戻るボタンの処理: ユーザーの以前の操作によってポップアップ レイヤーの表示がトリガーされた場合 (アドレス選択など)、ユーザーが戻るキーを押すと、ネイティブ アプリはまずポップアップ レイヤーを閉じ、現在のページを直接閉じません。ただし、Web アプリは history.back() ロジックを直接実行し、ページ全体が戻ります。

レンダリング速度: H5 ウェブサイトは B/S 構造であり、レンダリングする前にダウンロードする必要があります。ネイティブ アプリは主に C/S 構造ですが、リソースはローカルに読み込まれ、一部の要素は待機せずにすぐにレンダリングできるため、白い画面の現象を回避できます。

システム機能: API の制限により、多くの端末機能は HTML5 では呼び出せません。その結果、プッシュ、コード スキャン、共有、支払いなど、多くの機能が欠落したり、ネイティブの機能よりも劣ったりします。

体系的に分析した結果、このような経験の違いが数多くあることがわかりました。長年の HTML5 開発経験と多数のプロジェクト実践に基づいて、上記の経験の違いを一つずつ解決し、最終的に wap2app 製品を磨き上げました。

3. wap2appフレームワークの紹介

wap2app は、既存の HTML5 ウェブサイトをアプリに素早く公開できる開発フレームワークです。 wap2app フレームワークを使用すると、簡単な構成と必要なプログラミングで M サイトのエクスペリエンスを強化できます。 iOS プラットフォーム用の ipa と Android プラットフォーム用の apk にパッケージ化でき、主要なアプリケーション マーケットでリリースできます。変換されたアプリはネイティブ アプリに匹敵します。

オリジナルと同じくらい良いとは思わないですか?ビデオを見る: https://v.qq.com/x/page/x05025vurui.html

ビデオの説明:

- 環境: 同じモバイルデバイス (Xiaomi 6、同じ MIUI バージョン)、同じネットワーク、使用前にメモリを消去し、ネイティブ アプリケーションは最新バージョンを使用しました。

- 結論: 新しい wap2app ページのレンダリング速度はネイティブ ページのレンダリング速度に匹敵します。アニメーションは300ミリ秒以内にレンダリングでき、アニメーションはスムーズです。

wap2app フレームワークには次の機能があります。

1. ネイティブレンダリング機能を提供し、インターフェイスのレンダリング速度とアニメーション効果によりネイティブエクスペリエンスを実現します。

2. ネイティブ機能を実現するために、豊富なシステムネイティブ機能（ポジショニング、共有、支払い、プッシュなど）を提供する

3. 少ない作業量と低い学習コストで、ページルールを設定し、JSONを介してルールを強化する

4. Mステーションはわずかな変更のみを必要とし、変換コストは低い

5. 以前のMステーションの分離を強化します。 M ステーションがビジネス ロジックをアップグレードすると、生成されたアプリには更新されたビジネス ロジックが自動的に含まれるようになります。

4. Wap2app実装ソリューション

wap2app の基礎となる実装は非常に複雑で、多くのネイティブおよび HTML5 の最適化が関係します。経験の違いの問題ごとに、次のような対応する最適化ソリューションがあります。

ウィンドウアニメーション: wap2app は最下層でページジャンプをインターセプトし、新しい Web ビューを使用して新しいページを読み込み、ビューのネイティブアニメーション (右スライドインやポップインなど) を使用して切り替えます。

スクロール バーは一番上まで移動します。Web ビューと一緒に作成された HTML5 タイトル バーの代わりにネイティブ タイトル バーを使用します。ページ タイトルの自動読み取りをサポートし、スクロール バーが最上部まで移動してしまう問題を解決し、ページが完全に白くなる問題を回避します。

タブの切り替え: タブ領域とコンテンツ領域を 2 つの個別の Web ビューに分割します。タブを切り替えると、タブ領域の Web ビューのみがハイライト状態に切り替わり、コンテンツ領域の Web ビューに新しいページを読み込むように通知して、全体的に画面が白くなる現象を回避します。

次に、機能拡張とレンダリング高速化という 2 つの側面に焦点を当てます。

1. 能力拡張

HTML5 ではネイティブ アプリに比べて利用できる API がはるかに少なく、システム デバイスに関連する多くの機能が実現できません。 wap2app は、最下層の HTML5 PLUS エンジンに基づいており、数十万のネイティブ API を呼び出して、より強力なプッシュ、共有、支払い、ポジショニングなどのシステム機能を実現し、ネイティブ アプリと同じ機能要件を実現できます。

wap2app で呼び出せる HTML5 PLUS API は 2 つの部分に分かれています。

1.1 よく使われるAPI – HTML5plus

QR コード、シェイク、音声入力、マップ、支払い、共有、ファイルシステム、アドレス帳などの共通 A​​PI を含め、クロスプラットフォームの HTML5plus 仕様にカプセル化されており、仕様は www.HTML5plus.org で公開されています。メーカー独自の API は作成しません。 HTML5中国産業連盟は現在、工業情報化部の下部組織となり、HTML5Plus仕様は業界標準となり、国家標準として制定されました。

1.2 その他のネイティブ API – Native.js

iOS と Android にはそれぞれ 400,000 を超えるネイティブ API があります。 iOS Game Center API など、一部の API は一般的に使用されておらず、クロスプラットフォーム機能がありません。 HTML5plus にあまり多くの API をカプセル化すると、ランタイムのサイズが大きくなりすぎますが、必要に応じてこれらの API を使用するのは面倒になります。

当社には、上記の問題を解決する画期的なテクノロジーがあります。それは、400,000 個のネイティブ API を JS API にマッピングするテクノロジーである Native.js です。

1.3 ネイティブ拡張の例 - 共有

HTML5 機能の制限により、H5 Web サイトは WAP モードでの共有のみをサポートしており、共有エクスペリエンスは低下します。以下は典型的な実装です (下のスクリーンショットを参照)。

- WeChatシェアをクリックするとQRコードが表示されます。ユーザーはWeChatを起動してQRコードをスキャンし、まずWeChatで記事を開いてから、WeChatの右上隅にあるメニューから共有する必要があります。共有パスが長すぎて操作が面倒です。

- 共有するにはWeiboをクリックします。共有する前に、Weibo wapサイトにログインして認証を完了する必要があります。

wap2app は HTML5 PLUS エンジンで実行されます。 HTML5 PLUS の共有モジュールを通じて、システムネイティブ共有を直接呼び出すことができます。同じシナリオで、少し変更を加えると、wap2app 環境でネイティブ共有を呼び出すことで、エクスペリエンスが大幅に向上します。以下はネイティブ共有を呼び出した後のスクリーンショットです。

明らかに、wap2app がネイティブ共有を有効にすると、共有パスが短くなり、エクスペリエンスが向上し、コンテンツの共有と普及がより促進されます。

2. 次にレンダリングの高速化についてお話しします

Web ページの読み込みとレンダリングの速度はネイティブ アプリよりもはるかに遅く、モバイル デバイスでのビジネス エクスペリエンスに重大な影響を及ぼします。こうした経験ギャップの理由は、おおよそ次のとおりです。

-- レンダリングのタイミング: Web アプリは、レンダリング作業を開始する前にサーバーがドキュメントのダウンロードを完了するのを待つ必要があり、事前にさまざまな領域をレンダリングすることはできません。一方、ネイティブ アプリは、C/S 構造アプリケーションとして、サーバーからビジネス データのみを要求し、その他のレイアウトとスタイルはほとんどがローカルです。したがって、ユーザーが新しいウィンドウを開くようにトリガーすると、新しいウィンドウの一部の領域のレイアウトがすぐにレンダリングされ、サーバーがデータに応答した後に対応する領域の内容が更新されます。

--画像リソースを要求するタイミング: Web アプリはまずドキュメントをダウンロードし、次にドキュメント内の <img> タグの src 属性に従って画像リソースを非同期的に読み込む必要があります。そのため、Web アプリでは、最初にテキストが表示され、その後徐々に画像が表示されます。ただし、ネイティブ アプリはタスクを待つ必要がなく、画像リソースを直接読み込むことができます。そのため、ネイティブアプリの画像表示はWebアプリよりも早くなります。

--ビジネスデータ要求のタイミング: Web アプリがフロントエンドとバックエンドを分離して実装されている場合、最初にビジネスロジックをカプセル化する js ファイルをダウンロードする必要があります。ダウンロードが完了すると、js は ajax リクエストを開始します。ネイティブ アプリの場合、ビジネス ロジックのほとんどはローカルにカプセル化されます。 js ファイルのダウンロードを待つ必要がなくなり、HTTP ビジネス リクエストをより早く開始できるようになります。

Googleが主導するAMP技術や、中国のBaiduが展開するMIP技術など、多くの企業がWebページのレンダリング速度の向上に取り組んでいます。これらのテクノロジは主に Web ページの読み取りを高速化するために使用され、複雑な JS インタラクションを含むシナリオには適していないため、適用範囲は限られています。

DCloud は、Webview に基づいて、あらゆる Web ページのレンダリング エクスペリエンスを向上できる、より一般的なソリューションである subNView テクノロジーを提案しました。

2.1 subNView の紹介

subNView は文字通りサブネイティブビューを意味し、次の 2 つの主要なポイントがあります。

- ネイティブ: subNView はネイティブに描画されるビューであり、HTML5 DOM とは関係ありません。

- sub: subNView は Webview の一部であり、完全な Webview を置き換えるものではありません。属する Web ビューと同じライフ サイクルを維持し、Web ビューの閉じる、非表示、および zindex の変更に応じて変化します。

subNView は Webview のサブコントロールです。 WebView には複数のサブ NView を含めることができます。 subNView には複数の画像 (画像カルーセルを含む)、テキスト、領域、ボタンなどを描画できます。

SubNView は HTML5 の利点を保持し、ネイティブ View を使用してネイティブ レンダリングを活用します。ユーザーがウィンドウの切り替えをトリガーすると、WebView は引き続きドキュメントを読み込み、元のロジックに従ってページをレンダリングします。ただし、ドキュメントが読み込まれるまで待つ必要はありません。次のタスクはネイティブ ビューで事前に完了できます。

- ドキュメントがダウンロードされるのを待たずに、固定コンテンツ領域、または固定アドレス画像、ショッピングカートボタンなど、前のページからデータを取得できる領域を描画し、画像の読み込みを要求します。

- ビジネス データに対する Ajax リクエストを直接開始し、ビジネスによってカプセル化された JS がダウンロードされるのを待たずに、Ajax 応答後にネイティブ ビューにデータを直接描画します。

以下は、subNView で強化された製品詳細ページの例です。

上の図からわかるように、

* Webview はドキュメントを読み込み、元のロジックに従ってページをレンダリングします。コンテンツが最初に読み込まれていない場合、画面はまだ白のままです（中央に空白の領域があります）

* WebviewはWebviewのサブコントロールとして2つのsubNViewも作成します

* subNView 1 は、Ajax を通じて動的に取得された製品の詳細と製品価格のカルーセルを表示します。カルーセル画像はスライドやクリックによるプレビューの拡大をサポートしており、ユーザーは事前に商品の詳細を確認できます。

* subNView 2はショッピングカート関連の機能を表示します。これは固定表示コンテンツであり、直接レンダリングできます。

* ショッピング カート ボタンがクリックされると、イベントは Webview のショッピング カート ボタンに渡され、HTML ページのすべてのロジックが再利用されます。 subNView は単にアニメーションのレンダリング プロセスに侵入し、ビジネス ロジックの書き換えを引き起こしません。

以下は、subNView アクセラレーションを使用した後のページ切り替えプロセスの比較です。

2.2 subNViewの使い方

開発者は、複雑な JSON オブジェクトを渡す必要がある Webview の subNViews プロパティを通じて、subNview コントロールを作成または変更できます。開発を簡素化するために、DCloud は NView テンプレート テクノロジを提供します。

NView テンプレートは、Vue の単一ファイル コンポーネントに似ています。 HBuilder で新しい NView テンプレート ファイルを作成します。デフォルトのコードは次のとおりです。

NView テンプレートには、テンプレート タグ、属性、スタイル定義、データ バインディングなどの概念が含まれます。詳細については、wap2app の公式 Web サイトをご覧ください。

5. Wap2app開発方法

wap2app は、主に json ファイルの簡単な構成に基づいて開発が簡単で、ルールがシンプルで、学習コストが低く、作業負荷も少ないです。中規模のMサイトであれば、フロントエンドエンジニアが4日程度で変換できます。 wap2app は、より複雑な需要開発を実現できる Javascript の高度なプログラミングもサポートしています。

具体的な開発プロセスでは、wap2appは

1. wap2app ローカル側の作業: フレームワークが提供するサイトマップ ファイルを通じてページの関係とアニメーション強化スキームを記述し、ネイティブのウィンドウ切り替え効果を実現します。 sitemap.json 構成が複雑な要件を満たせない場合は、app.js プログラミングを使用して強化できます。

2. H5 ウェブサイトの変換: アプリの実行環境 (異なる UA) に応じて、アプリに表示すべきでない一部のページ要素 (下部の PC バージョン リンクなど) を削除する、ネイティブ ナビゲーション バーを有効にした後で元の HTML5 DIV ナビゲーション バーを非表示にするなど、適切な変更を加えます。

3. これまでMステーションでは利用できなかったWeChat共有、プッシュ、ネイティブ決済などのDCloudのHTML5+拡張機能を呼び出す必要がある場合は、必要なプログラミングと開発を行う必要があります。この作業は、ローカルまたは H5 Web サイト (wap2app オペレーティング環境として区別する必要があります) で実行できます。

さらに、wap2app は完全に無料です!

詳細については、wap2app の公式 Web サイトをご覧ください: http://dcloud.io/wap2app.html

以下の質問は 51CTO 開発者コミュニティからのものです。

Q: web_何_南冲: wap2app 変換後にストリーミング アプリケーションを直接起動できますか?

A: DCloud-Cui先生: はい。

Q: 問題ありません。NView テンプレートはいつ mui フレームワークで利用できるようになりますか?

A: DCloud-Teacher Cui: 一般的には、C/S 構造に基づいたアプリ開発であり、HTML ページはローカルで、レンダリング速度はまだ許容範囲内であり、NView テンプレートはあまり意味がありません。

Q: Yiben Wuyan: hbuilder で開発されたアプリをすぐに WAP に戻すことはできますか?

A: DCloud-Teacher Cui: DCloud は開発者に 2 つの開発モードを提供します。

1. 最初から開発し、mui フレームワークを使用して、一度開発すると、アプリと WAP サイトの両方が作成されます。

2. すでに WAP サイトをお持ちの場合は、wap2app フレームワークを使用して WAP サイトをアプリに拡張します。

Q: Yiben Wuyan: これは、WAP がまだ存在せず、当社の開発ツールを使用して開発され、その後すぐにアプリ プロジェクトに変換できるシナリオに適用されます。すでにWAPプロジェクトが開発されている場合は適用できないのでしょうか？それとも、適用可能であれば膨大な作業量になるのでしょうか?

A: DCloud-Teacher Cui: WAB やアプリはありません。 muiを使用して一度開発し、複数の端末で公開することをお勧めします

すでに WAP はあるがアプリがない場合は、wap2app を使用してすぐにアプリに公開することをお勧めします。

Q: Yiben Wuyan: mui と wap2app のどちらの方が効果とスムーズさが優れていますか?

A: DCloud-Cui 先生: 現在の段階によって異なります。適切に最適化すれば、良い体験が得られます。 http://liuyingyong.cn/ からダウンロードできます。

ストリーミング アプリケーション マネージャーをダウンロードします。 Vipshop、Dianping、JD Mobile はすべて wap2app に基づいています。滑らかさを体感できます。

Q: Yiben Wuyan: 問題は、mui + h5+ を使用してアプリを開発し、それを wap に変換したのですが、wap の h5+ コンテンツがサポートされていないことです。

A: DCloud-Teacher Cui: 5 以上のコードを呼び出す場合は、プラットフォームを区別する必要があります。 5 以上の環境であると判断した場合は、呼び出します。ブラウザモードでは、機能をダウングレードまたは非表示にします。

Q: php-Internet+-Shanghai: こんにちは、Cui さん。質問が 2 つあります。

質問1:

Cui 先生は上でこう言っています。「ウィンドウ アニメーション: wap2app の下部レイヤーがページ ジャンプをインターセプトし、新しいページが新しい Webview を使用して読み込まれます。」

タグのすべての href ジャンプが自動的にインターセプトされることを意味しますか、それとも特別な設定が必要ですか?

質問2:

パッケージ化された APK を解凍すると、html/css/js などのフロントエンド ファイルがすべて表示されますが、これらは漏洩または盗難される可能性が非常に高くなります。以降のアップグレードで予防策を検討しましたか?

A: DCloud-Teacher Cui: wap2app の基盤となるレイヤーは、a タグのクリック ジャンプであっても、js のジャンプであっても、location.href ジャンプをインターセプトします。現在、パッケージ化時に暗号化オプションがあります。

Q1: web_何_南冲: Web アプリ、ストリーミング アプリケーション、WeChat パブリック アカウント ページ、Android、IOS をカバーする新しいモバイル システムを作成したい場合、つまり、1 回の開発で 5 回リリースする場合、どのようなテクノロジを使用すればよいですか。

Q2: 開発-sanbor: wap2app はストリーミング アプリケーションでのみ使用できますか?

A: DCloud-Teacher Cui: 現在、wap2app プロジェクトをネイティブ インストール パッケージ (iOS プラットフォームの場合は ipa インストール パッケージ、Android プラットフォームの場合は apk インストール パッケージ) にパッケージ化することがサポートされており、ストリーミング アプリケーション プラットフォームへの公開もサポートされています。

Q: Chen Yongsong-Xinyang: ログイン後に異なる権限を決定して、異なる下部タブを表示したいです。出来ますか？

A: DCloud-Teacher Cui: この要件の正確な説明は、セカンダリ ページのタブの最適化であり、将来サポートされる予定です。

Q: 広州 - フロントエンド - Huang Xiaowen: mui は WAP サイトとして使用できますか?アプリを作ってないんですか？

A: DCloud-Teacher Cui: mui はマルチターミナル公開をサポートしており、ツールを構築することでさまざまなプラットフォームに公開できます。

Q: 広州 - フロントエンド - Huang Xiaowen: MUI マルチターミナルリリースは iOS と Android を指すのではないですか? WAP サイトでもできますか? mui は WAP を実行する M ステーションをサポートしていますか?

A: DCloud-Cui 先生: モバイル ブラウザーまたは WeChat からアクセスできます: http://dcloud.io/hellomui/

このコードは、実際には iOS および Android の hello mui コードと同じです。

Q: Big Data-ta-Beijing: wap2app アプリケーションを実行するには、プラグインをインストールする必要があります。知らないユーザーは、フィッシングサイトにアクセスしたと思うかもしれません。これは良くない。

A: DCloud-Teacher Cui: どのプラグインをインストールすればよいですか?現在、多くのインターネット企業のストリーミング アプリケーションは wap2app に基づいて実装されているため、これを体験するにはストリーミング アプリケーション マネージャーをインストールする必要があります。しかし、多くの起業家は wap2app プロジェクトを独自に実装し、それを apk/ipa にパッケージ化して、プラグインをインストールせずに携帯電話に直接インストールして実行できるようにしています。

Q: php-Internet+-Shanghai: 基礎レベルで mui に対する特別なサポートはありますか? Bootstrap などの他のフロントエンド フレームワークを使用したり、独自のネイティブ エフェクトを作成したりする場合、mui レンダリングを使用する場合ほど高速にならないということですか?

A: DCloud-Teacher Cui: 現在、プライベートサポートはありません。 muiの特徴は、軽量、ネイティブUI、マルチ端末対応です。開発者は他の UI ライブラリを使用することもできます。

Q: PHP-Yang-Xiamen: vue、angular などのフロントエンド フレームワークで作成された単一ページまたは非単一ページを wap2app を使用して変換できますか?

A: DCloud-Teacher Cui: wap2app は現在 MPA を主に最適化しており、SPA モードの効果は明ら​​かではないため、推奨されません。

Q: ネットワークを開く - Li 氏: 既存の WAP サイトには複数のヘッダーがありますが、wap2app は複数のスタイルのネイティブ ヘッダーをサポートしていますか?ネイティブ ヘッダーには「ショッピング カート」ボタンがあります。ショッピングカートに商品が入っている場合は赤い点が表示されます。これは今可能でしょうか?

A: DCloud-Teacher Cui: ナビゲーション バーをカスタマイズし、plus.webview.WebviewObject.getTitleNView を通じてナビゲーション ビューを取得し、自分で描画することができます。

Q: php-inspiration-Suqian: タレントネットワークなどのチャットエリアでは、Webページの会社IDを取得できますか?こうすればチャットできます。 MPA とは何ですか? SPAとは何ですか?

A: DCloud-Teacher Cui: SPA: シングルページアプリケーション

Q1: ソフトで安いエンジニア: 実は、これについてはずっと疑問に思っていました。一部の WAP ウェブサイトでは、jstl、vue、jfinal の enjoy などのフロントエンド テンプレートが使用されています。 dcloud の wap2app も変換できますか?

Q2: フロントエンド - 広州: 1. ゼロから開発し、mui フレームワークを使用し、一度開発すれば、アプリと WAP サイトの両方が利用可能になります。これはどうやってやるのですか?

A: DCloud-Teacher Cui: http://dcloud.io/mui.html まず、mui の基本を理解することをお勧めします。たとえば、mui.openWindow() はアプリで新しい Web ビューを開き、ブラウザは location.href ジャンプを実行するようにダウングレードします。

Q: フロントエンド - 広州: すでに mui を使用してアプリを作成しましたが、サードパーティのアプリに埋め込むためにアプリを wap に変換したいと考えています。これを実現するには、mui をどのように使用すればよいでしょうか?サードパーティ アプリがどのフレームワークを使用するかは不明です。アプリページのオープンはネイティブの基盤レイヤーを使用して実装されているのではないですか?

A1: DCloud-Teacher Cui: 開発したアプリ コードをサーバーに直接デプロイし、ブラウザーを使用してアクセスして互換性の問題がないか確認します。問題がなければそのままご使用いただけます。

たとえば、mui.openWindow() はアプリで新しい Web ビューを開き、ブラウザは location.href ジャンプを実行するようにダウングレードします。

A2: モバイル - Light Rain - 北京: 通常のブラウザは 5+ ランタイムをサポートしていないため、plus 関連 API を使用する部分を処理する必要があります。以前にも似たようなことをやったことがありますが、もっと簡単でした。例えば、mui.openWindow を使用してジャンプする場合は、処理する必要はありません。ネイティブバージョンを共有用に使用する場合は、異なる環境と互換性を持たせるために、h5 バージョンを自分で登録する必要があります。

Q: Beijing-unicorn-data: HBuilder と wap2app を商用利用するには料金がかかりますか? GraphQL との統合の使用例はありますか?

A: DCloud-Cui先生: 無料です。私の知る限り、併存するケースはありません。

Q: php-Zongheng-Qinhuangdao: hb*** の問題は、HTML と CSS の難読化が行われておらず、ネイティブ コードが直接漏洩していることだと思います。

A: DCloud-Teacher Cui: 現在は js 暗号化のみがサポートされており、html と css 暗号化はサポートされていませんが、ビジネス ロジックも抽出して js で記述する必要があります。

[51CTO オリジナル記事、パートナーサイトに転載する場合は、元の著者とソースを 51CTO.com として明記してください]