native-webview

Introduction

A non-layered webview component that serves as a container for web pages.

Property Description

Property Name	Type	Required	Default Value	Description	Minimum Version
src	string	Yes		The link to the web page targeted by the webview.	5.2.0
max-content-length	number	No		The maximum download size limit. If this value is exceeded, it will not call for download, unit KB.	5.2.0
bindonpagestarted	eventhandler	No		Event triggered when the webpage starts loading. e.detail = { pageUrl: "xxx" }	5.2.0
bindonprogresschanged	eventhandler	No		Event triggered when the loading progress changes. e.detail = { type: "onProgressChanged", newProgress: xxx }
bindonpagefinished	eventhandler	No		Event triggered when the loading is complete. e.detail = { type: "onPageFinished", pageUrl: xxx }
bindonreceivederror	eventhandler	No		Event triggered when the web page fails to load. e.detail = { type: "onReceivedError", isForMainFrame: true/false, pageUrl: "xxx", errorCode: "xxx", isRedirect: true/false, description: "xxx" }	5.2.0
bindonreceivedhttperror	eventhandler	No		Event triggered when there is an HTTP error while loading the webpage. e.detail = { type: "onReceivedHttpError", isForMainFrame: true/false, pageUrl: "xxx", errorCode: "xxx", isRedirect: true/false, errorReasonPhrase: "xxx" }	5.2.0
bindonreceivedtitle	eventhandler	No		Event triggered when a title is received during webpage loading. e.detail = { title: xxx }	5.2.0
bindonreceivedicon	eventhandler	No		Event triggered when an icon is received during webpage loading. e.detail = { favicon: xxx }	5.2.0
bindsyncpagestack	eventhandler	No		Event triggered when navigating forward or backward within the webview. e.detail = { canGoBack, canGoForward }
bindonreceivedschemeurl	eventhandler	No		Event triggered when the Webview intercepts a scheme redirection event. e.detail = { schemeUrl }	5.2.0

Usage Example

<native-webview 
  id="myWebview"
  :src="src"
  :max-content-length="maxContentLength"
  bind:bindonpagestarted="bindonpagestarted"
  bind:bindonprogresschanged="bindonprogresschanged"
  bind:bindonpagefinished="bindonpagefinished"
  bind:bindonreceivederror="bindonreceivederror"
  bind:bindonreceivedhttperror="bindonreceivedhttperror"
  bind:bindonreceivedtitle="bindonreceivedtitle"
  bind:bindonreceivedicon="bindonreceivedicon"
  bind:bindsyncpagestack="bindsyncpagestack"    
  bind:bindonreceivedschemeurl="bindonreceivedschemeurl"
>
</native-webview>

Page({
  data: {
    src: "https://open.dlight-app.com/miniapp/docs/api/VideoContext/",
    maxContentLength: 102400
  },
  onReady() {
    this.webviewContext = dlt.createWebviewContext("myWebview");
  },
  bindonpagestarted(e) {
    console.log("bindonpagestarted", e);
  },
  bindonprogresschanged(e) {
    console.log("bindonprogresschanged", e);
  },
  bindonpagefinished(e) {
    console.log("bindonpagefinished", e);
  },
  bindonreceivederror(e) {
    console.log("bindonreceivederror", e);
  },
  bindonreceivedhttperror(e) {
    console.log("bindonreceivedhttperror", e);
  },
  bindonreceivedtitle(e) {
    // Web page title
    console.log("bindonreceivedtitle", e.detail.title);
  },
  bindonreceivedicon(e) {
   // Web page icon
    console.log("bindonreceivedtitle", e.detail.favicon);
  },
  handleReload() {
    this.webviewContext && this.webviewContext.reload();
  },
  handlegoBack() {
    this.webviewContext && this.webviewContext.goBack();
  },
  handlegoForward() {
    this.webviewContext && this.webviewContext.goForward();
  },
  loadUrl() {
    this.webviewContext &&
      this.webviewContext
        .loadUrl("https://open.dlight-app.com/miniapp/docs/components/media/video")
        .then((res) => console.log(res));
  },
  bindsyncpagestack(){
    console.log("===bindsyncpagestack==", e)
  },
  bindonreceivedschemeurl(e){
    console.log('===bindonreceiveschemeurl===', e.detail.schemeUrl);
  }
});