最近、小プログラムの webview に関連する要件をいくつか行いましたので、ここでまとめて記録します。
H5 とネイティブ小プログラムの比較#
web-viewタグは、基本ライブラリ 1.6.4 以上が必要です。
| H5 に埋め込む | WeChat 小プログラム | |
|---|---|---|
| オフライン機能 | 低 | 高 |
| ページ切り替えの体験 | 中 | 高 |
| 初回画面のレンダリング速度 | 低 | 高 |
| 操作の応答性 | 高 | 低 |
| 開発の柔軟性 | 高 | 低 |
| ネイティブ API のサポート | 低 | 高 |
一般的には、開発の柔軟性とネイティブ API のサポートを考慮して技術の選択を行います。それに対応するのは異なるインタラクションデザインです。
また、H5 を埋め込むことには以下の利点があります：
- 独自のアカウントシステムを作成し、小プログラムの openid / UnionID と関連付けてシングルサインオンを実現できます。
- H5 を埋め込んでリッチテキストを表示し、重複した開発を減らすことができます。
- H5 を埋め込んで簡単に更新でき、リリースの審査を減らすことができます。
webview の設定と初期化#
ドメインの設定#
- 小プログラムのバックエンドで、対応する H5 のビジネスドメイン（H5 内の埋め込まれた
iframeのドメインも含む）を設定する必要があります。 - サーバー側は、検証ファイルを設定したビジネスドメインのルートディレクトリに配置する必要があります。
初期化#
web-viewタグは、小プログラムの基本ライブラリ 1.6.4 以上が必要です。- H5 でWeChat JS-SDKをインポートします。
- 現在の環境が小プログラムの webview である場合、SDK ファイルを非同期で読み込み、
wx.configを初期化します。 - API 呼び出しキューを実装し、SDK の非同期読み込みプロセス中に行われた呼び出しをキャッシュし、SDK の初期化が完了した後に一括で実行します。
- 現在の環境が小プログラムの webview である場合、SDK ファイルを非同期で読み込み、
webview 通信#
postMessage#
小プログラムの基本ライブラリ 1.7.1 以上が必要です。
H5 からwx.miniProgram.postMessageを呼び出して、小プログラムに通知します。ユーザーが小プログラムをバックする、コンポーネントの破棄、共有などの特殊なイベントが発生した後、web-viewタグのbindmessageコールバックイベントを使用してデータを監視します（複数回のpostMessageのデータは配列になります）。
web-view タグの URL の設定#
web-viewタグのsrc属性を設定することで、パラメータをリンク経由で H5 に渡すことができます。たとえば、小プログラムのwebviewで開いた H5 は、小プログラムのログイン後にtokenをリンク経由で渡すことで、H5 内での二重ログインを回避します。- URL を更新すると、H5 ページが再度読み込まれます。
WebSocket#
公式で推奨されている上記の 2 つの方法以外にも、WebSocketを使用することもできます。webviewコンポーネント内と H5 が同じsocketに接続する必要があります。この方法は、小プログラム自体の制限を回避し、サーバーを介して完全に通信するため、柔軟性が高くなり、それに応じて開発およびメンテナンスのコストも高くなります。
webview のデバッグ#
- 小プログラム開発者ツールを使用して、カスタムの起動ページと起動パラメータを設定して、プレビューや実機デバッグを行います。本番環境では体験版の検証が必要です。
- H5 で
vConsoleプラグインをインポートしてデバッグします。
注意点#
web-viewは常にフルスクリーンで表示されます。- 小プログラムの webview の後に続く H5 リンクは、
encodeURIComponentでエスケープする必要があります。コンポーネント内では、decodeURIComponentを使用して解析します。 - H5 内で小プログラムの遷移パスを呼び出す場合、
/で始まる必要があり、app.jsonで定義する必要があります。 - 埋め込まれた
H5から小プログラムに遷移した後、元のページはキャッシュされたままになります。タイムスタンプを URL に追加することで解決できます。