native-webview

简介

非同层 webview 组件，承载网页的容器。

属性说明

属性名	类型	必填	默认值	说明	最低版本
src	string	是		webview 指向网页的链接。	5.2.0
max-content-length	number	否		最大下载长度限制，超过这个值时，不进行下载调用，单位 KB	5.2.0
bindonpagestarted	eventhandler	否		网页开始加载时触发此事件。e.detail = { pageUrl:"xxx"}	5.2.0
bindonprogresschanged	eventhandler	否		加载进度变化时触发此事件。e.detail = { type: "onProgressChanged", newProgress:xxx}
bindonpagefinished	eventhandler	否		加载完成时触发此事件。e.detail = { type: "onPageFinished", pageUrl:xxx}
bindonreceivederror	eventhandler	否		网页加载失败时触发此事件。 e.detail = { type: "onReceivedError" isForMainFrame: true/false, pageUrl: "xxx", errorCode: "xxx", isRedirect: true/false, description: "xxx" }	5.2.0
bindonreceivedhttperror	eventhandler	否		网页加载失败时触发此事件。 e.detail = { type: "onReceivedHttpError", isForMainFrame: true/false, pageUrl: "xxx", errorCode: "xxx", isRedirect: true/false, errorReasonPhrase: "xxx" }	5.2.0
bindonreceivedtitle	eventhandler	否		网页加载过程中获取到 title 时触发此事件。e.detail = {title: xxx}	5.2.0
bindonreceivedicon	eventhandler	否		网页加载过程中获取到 icon 时触发此事件。e.detail = {favicon:xxx}	5.2.0
bindsyncpagestack	eventhandler	否		webview内前进或者后退时触发此事件。e.detail = { canGoBack，canGoForward}
bindonreceivedschemeurl	eventhandler	否		Webivew 拦截到 scheme 跳转事件时触发.e.detail = { schemeUrl }	5.2.0

使用示例

<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) {
    // 网页标题
    console.log("bindonreceivedtitle", e.detail.title);
  },
  bindonreceivedicon(e) {
   // 网页 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);
  }
});