1. 適用可能なシナリオ
1. ネイティブ開発に慣れていない H5 開発者
2. WebView を使用して H5 ページを呼び出すネイティブ APP によって引き起こされるホワイト スクリーンの問題と同様のシナリオ
2. トラブルシューティング計画
トラブルシューティングのアイデア:
- 白い画面の問題が解決できるかどうかを確認する
- 原因となった白い画面の問題が H5 にネイティブに注入されているかどうかを確認します。
- シナリオ A: 問題は H5 にネイティブに挿入されます。エラー ログを確認して問題の具体的な原因を特定し、ネイティブ開発者が問題を解決できるように支援します。シナリオ B: 問題の原因は H5 ページ自体にあります。これは、フロントエンド H5 開発者がエラーや白い画面を報告せずにコードを実行するための解決策です。
3. 問題の解決策
白い画面の問題が解決できるかどうかを確認する: H5 ページが WebView 経由でネイティブに呼び出されるときに白い画面エラーが発生する理由は数多くあります。これらの問題のほとんどは、ネイティブ開発者と H5 開発者によって解決できます。その中で、より一般的なものは、解決できない問題は次のとおりです: Android システム ハードウェアは webView 通信テクノロジをサポートしていません:
- ナレッジ サプリメント拡張機能: ナレッジ サプリメント拡張機能: WebView は、Android 4.4 (API レベル 19) 以降では Chromium に基づいており、Android 4.3 (API レベル 18) 以下では WebKit に基づいています。WebView はシステム コンポーネントであり、そのバージョンは Android システムのバージョンに関連しています。WebViewのバージョンが低すぎると、一部の機能が正しく動作しない場合があります。(ここでの分析を読む必要はありません)。
- メインストリーム ブラウザを介して webView アドレスにアクセスします。WebView へのアクセス時にブラウザに白い画面が表示されない場合は、Android システム ハードウェアがそれをサポートしています。ブラウザが白い画面で WebView にアクセスする場合: シナリオ A、使用されている Android システムがバージョン 4.4 以下の場合は、システム設定、アプリケーションを通じて携帯電話の WebView システム コンポーネントが無効になっているかどうかを確認し、無効になっている場合は携帯電話の WebView システム コンポーネントを確認します。このモデルのメーカーはサポートしていません。シナリオ B、Android システムが 4.4 以降の場合、WebView システム コンポーネントは Android システム カーネルに書き込まれています。バックエンド開発者は、次のコードを使用して、ハードウェアが webView をサポートしているかどうかをテストする必要があります。
PackageManager pm = getPackageManager(); boolean isWebViewSupported = pm.hasSystemFeature(PackageManager.FEATURE_WEBVIEW);
白い画面の問題が H5 ページへのネイティブ インジェクションによって引き起こされているかどうかを判断します。WebViewを介して H5 ページをネイティブに呼び出すことによって白い画面が発生する理由は、H5 自体の構文の互換性がないこと、または H5 の内部エラーが原因である可能性があります。ネイティブ APP。H5 開発者として、優先順位を決定する必要があります。H5 ページの内部問題ですか?
- Google リモート デバッグを使用して、モバイル APP 環境の白い画面のある Web ビュー ページと、ブラウザ環境の白い画面のない Web ビュー ページを比較します。
- シナリオ A: APP 環境の Web ビュー ページに DOM 要素がなく、ブラウザ環境の Web ビュー ページに DOM 要素がある場合、白い画面の問題は、ネイティブ APP の内部エラーが原因で発生する可能性があります。 H5ページ。
- シナリオ B: APP 環境の Web ビュー ページにネイティブ DOM がある場合は、Google リモート デバッグを使用して、白い画面の原因となっている特定の互換性のない構文を見つけます。
注: Google リモート デバッグ テクノロジは Google サーバーへのアクセスを必要とするため、デバイスが科学的にインターネットにアクセスできる必要があります。具体的な使用方法については、 Chrome リモート デバッグ webview_chrome webview_Lu のブログ - CSDN ブログを参照してください。
問題をネイティブに特定するのに役立つアプリの内部エラー ログを取得します。環境変数を構成するための ADB Android デバッグ ツール (Baidu 製) をダウンロードし、デバイスをコンピュータに接続し、白い画面ページを再現してエラー ログを取得します。
- Android デバイスをコンピュータに接続し、USB デバッグ モードをオンにします。
コマンドを使用して、デバイスが正常に接続されているかどうかを確認します
adb devices- logcat コマンドを使用してエラー ログを表示し、特定のエラー原因を特定します。
adb logcat -s <package-name> // package-name为对应包名 adb logcat -s <package-name> *:E // E为日志输入级别为Error注:以前のバージョンの Androidでクロスドメインの問題が発生しました。
4. WebView ネイティブ呼び出し失敗に関する一般的な問題
H5 ページのリソースの読み込み失敗: H5 ページのリソース ファイル (CSS、JS、画像など) の読み込みに失敗し、ページが正常に表示されなくなる場合があります。Chrome ブラウザの開発者ツールや Fiddler などのツールを使用して、リソースの読み込みステータスを確認し、読み込みに失敗したリソース ファイルを見つけて修復できます。
H5 ページのコードの問題: H5 ページのコードに問題があり、ページが正しく表示されない可能性があります。たとえば、文法的エラーや論理的エラーなどが考えられます。Chrome ブラウザの開発者ツールまたはその他のデバッグ ツールを使用して、H5 ページのコードを表示し、問題を特定して修正できます。
セキュリティ ポリシーの問題: H5 ページにセキュリティ ポリシーの問題があり、ページが正しく表示されない可能性があります。たとえば、クロスドメイン アクセスの問題、HTTPS 証明書の問題などが考えられます。Chrome ブラウザ開発者ツールまたはその他のデバッグ ツールを使用して、セキュリティ ポリシーの問題を表示し、問題を特定して修正できます。
WebView 設定の問題: WebView の設定が正しくないため、ページが正しく表示されない可能性があります。たとえば、JavaScript を有効にしたり、キャッシュを有効にしたり、その他の設定を有効にする必要がある場合があります。WebView は次のコードで設定できます。
webView.getSettings().setJavaScriptEnabled(true); webView.getSettings().setCacheMode(WebSettings.LOAD_DEFAULT);