Hbuilder (H5+) plus.webview 预加载

                                       Hbuilder (H5+)  plus.webview 预加载

plus.webview.create   经常会用到  webview 来显示 Web网页，但是有时候 会出现白屏， 而且有些低端机器 时间还挺长。这个时候就需要用到预加载。

 

应为 我们要用的 plus.webview  创建完毕， 关闭不同 close(),  改用 hide(). 以此 提升效率，

在hide() 之前 为了 解决 下次打开  不残留上次页面 还要把 当前页面 置为空白

webview.loadData('')

这里有几个 核心函数 贴出来

 

1. 预加载 进入应用的时候 就创建

function webviewInit() {

  if (window.plus) {
    let view = plus.webview.getWebviewById('h5View');
    if (!view) {
      createWebView()
    }
  }
}

 

我的代码里面包含  两个按钮 不用的可以去掉

实现方法

function createWebView() {

  ///创建 webView
  let webview = plus.webview.create('', 'h5View', {
    contentAdjust: false
  }, null);
  webview.setStyle({
    'zindex': 30,
    'titleNView': false,
  })





  //关闭按钮
  let bitmap_menu = new plus.nativeObj.Bitmap("closedmenu");
  bitmap_menu.loadBase64Data(
    "data:image/png;base64,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"
  )
  let leftPos = (window.screen.width - 80) + 'px';
  let viewClose = new plus.nativeObj.View('webViewClose', {
    top: '5px',
    left: leftPos,
    width: "50px",
    height: "37px"
  });
  viewClose.drawBitmap(bitmap_menu, {
    top: "0",
    left: "0",
    width: "82px",
    height: "62px"
  })
  viewClose.interceptTouchEvent(true);
  viewClose.addEventListener("click", function(e) {
    //console.log('=====> webViewClose click')
    webview.onloaded = function() {}
    plus.webview.getWebviewById('h5View').loadData('')
    plus.webview.getWebviewById('h5View').hide()

    viewClose.hide()

  }.bind(this));


  //外部打开按钮
  let bitmap_menuOpen = new plus.nativeObj.Bitmap("openmenu");
  bitmap_menuOpen.loadBase64Data(
    "data:image/png;base64,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"
  )
  let pos = (window.screen.width - 80 - 50) + 'px';
  let viewOpen = new plus.nativeObj.View('webViewOpen', {
    top: '5px',
    left: pos,
    width: "50px",
    height: "37px"
  });
  viewOpen.drawBitmap(bitmap_menuOpen, {
    top: "0",
    left: "0",
    width: "82px",
    height: "62px"
  })
  viewOpen.interceptTouchEvent(true);
  viewOpen.addEventListener("click", function(e) {
    //console.log('=====> webViewOpen click')
    plus.runtime.openURL(webViewUrl)
    plus.webview.getWebviewById('h5View').hide()
    viewOpen.hide()
  }.bind(this));


}

 

调用接口

function openUrlPay(url, data) {
  webViewUrl = url
  plus.navigator.setFullscreen(true);
  plus.device.setWakelock(true)

  let webview = plus.webview.getWebviewById('h5View');
  if (!webview) {
    console.log("webview 预加载失败")
    webviewInit()
    return
  }


  webview.addEventListener("hide", function() {
    //console.log("======>hide")
    plus.nativeObj.View.getViewById('webViewClose').hide()
    plus.nativeObj.View.getViewById('webViewOpen').hide()
    plus.navigator.setFullscreen(false);
    plus.device.setWakelock(false)
  }, false);


  // webview.onloaded = function() {
  //   plus.nativeObj.View.getViewById('webViewClose').show()
  //   plus.nativeObj.View.getViewById('webViewOpen').show()
  //   //plus.webview.getWebviewById('h5View').show()
  //   //webview.show()
  // }
  // webview.onhide = function() {
  //   plus.nativeObj.View.getViewById('webViewClose').hide()
  //   plus.nativeObj.View.getViewById('webViewOpen').hide()
  //   plus.navigator.setFullscreen(false);
  //   plus.device.setWakelock(false)
  // }

  webview.loadURL(url)
  webview.show()
  plus.nativeObj.View.getViewById('webViewClose').show()
  plus.nativeObj.View.getViewById('webViewOpen').show()
  //webview.append(  plus.webview.open(url))


  webview.evalJS(
    "plus.key.addEventListener('backbutton',function () {});"
  );
  window.openGift = function() {
    plus.webview.getWebviewById('h5View').hide();
    router.push("/gift");
  }


}