Mobile Platform as a Service:web-view

<web-view /> コンポーネントは HTML5 ページを保持し、ミニプログラムページ全体を自動的に塗りつぶします。各ページには、1 つの <web-view /> しか含めることができません。複数の <web-view /> コンポーネントをレンダリングしないでください。ページ全体が自動的に塗りつぶされ、他のコンポーネントが覆われてしまいます。

コードサンプル

<!-- axml -->
<! -- Alipay ホームページを指す web-view -->
<web-view src="https://ds.alipay.com/" onMessage="test"></web-view>

関連 API

<web-view /> HTML5 ページでは、https://appx/web-view.min.js を手動で導入できます（このリンクには mPaaS クライアントからのみアクセスできます）。ミニプログラムページに戻るための関連 API が提供されています。以下の API がサポートされています。

コードサンプル

• <web-view /> HTML5 ページ:

   <!-- html -->
    <script type="text/javascript" src="https://appx/web-view.min.js"></script>
    // HTML5 ページを mPaaS 以外のクライアントで同時に使用する必要がある場合は、リクエストの 404 エラーを回避するために、次のコード記述方法を参照してください。
    // HTML head で次のスクリプトを実行します。
    <script>
      if (navigator.userAgent.indexOf('AlipayClient') > -1 || navigator.userAgent.indexOf('mPaaSClient') > -1) {
        document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
      }
  
    // javascript
    my.navigateTo({url: '../get-user-info/get-user-info'});
  
    // Web ページは postMessage を使用してミニプログラムにメッセージを送信します。
    my.postMessage({name:"test web-view"});
  
    // ミニプログラムからメッセージを受信します。
    my.onMessage = function(e) {
      console.log(e); //{'sendToWebView': '1'}
    }
  
    // ミニプログラム環境で実行されているかどうかを判断します。
    my.getEnv(function(res) {
      console.log(res.miniprogram) // true
    });
  
    my.startShare();
  
    </script>

• my.postMessage を使用してメッセージが送信されると、ミニプログラムページは onMessage によって構成されたメソッドを実行します。

   // ミニプログラムページに対応する page.js は、test メソッドを宣言します。
    // page.axml の web-view コンポーネントには、onMessage="test" が構成されています。
    // したがって、Web ページが my.postMessage を実行すると、test メソッドが実行されます。
    Page({
      onLoad(e){
        this.webViewContext = my.createWebViewContext('web-view-1');    
      },
      test(e){
        my.alert({
          content:JSON.stringify(e.detail),
        });  
        this.webViewContext.postMessage({'sendToWebView': '1'});
      },
    )};

• my.getEnv コードサンプル:

   // ミニプログラム環境で実行されているかどうかを判断します。
    my.getEnv(function(res){
        console.log(res.miniprogram); //true
    });

  現在の <web-view /> を共有するときに、その URL を取得できます。つまり、onShareAppMessage コールバック中に webViewUrl パラメーターが返されます。

   Page({
      onShareAppMessage(options) {
        console.log(options.webViewUrl)
      }
    });

よくある質問

HTML5 ページはどのようにミニプログラムに情報を渡しますか?

HTML5 ページは、my.postMessage インターフェースを使用してデータを送信します。コードサンプルは次のとおりです。

my.postMessage({key1:"value1",key2:"value2"});

ミニプログラムはどのように HTML5 ページに情報を渡しますか?

<web-view /> は双方向通信機能をサポートしています。詳細については、「Web-view コンポーネントコントロール」をご参照ください。

web-view コンポーネントでミニプログラムに戻るにはどうすればよいですか?

<web-view /> HTML5 ページでは、https://appx/web-view.min.js を手動で導入できます（このリンクには mPaaS クライアントからのみアクセスできます）。次に、my.navigateTo インターフェースを使用します。

ミニプログラムの chooseImage インターフェースを使用する場合、HTML5 ページで画像をアップロードするにはどうすればよいですか?

取得した画像のパスは、my.postMessage() を使用して関連データがミニプログラムに送信された後にアップロードできます。