Hbuilder (H5+) plus.webview 预加载
plus.webview.create 经常会用到 webview 来显示 Web网页，但是有时候 会出现白屏， 而且有些低端机器 时间还挺长。这个时候就需要用到预加载。
应为 我们要用的 plus.webview 创建完毕， 关闭不同 close(), 改用 hide(). 以此 提升效率，
在hide() 之前 为了 解决 下次打开 不残留上次页面 还要把 当前页面 置为空白
webview.loadData('<html><style="background-color: rgb(0, 0, 0);"></body></html>')
这里有几个 核心函数 贴出来
预加载 进入应用的时候 就创建
function webviewInit() {if (window.plus) {let view = plus.webview.getWebviewById('h5View');if (!view) {createWebView()}}}
我的代码里面包含两个按钮不用的可以去掉
实现方法
function createWebView() {///创建 webViewlet 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('<html><style="background-color: rgb(0, 0, 0);"></body></html>')plus.webview.getWebviewById('h5View').hide()viewClose.hide()}.bind(this));//外部打开按钮let bitmap_menuOpen = new plus.nativeObj.Bitmap("openmenu");bitmap_menuOpen.loadBase64Data("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFIAAAA+CAYAAAC4Gky6AAABS2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxMzggNzkuMTU5ODI0LCAyMDE2LzA5LzE0LTAxOjA5OjAxICAgICAgICAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+IEmuOgAAB/FJREFUeJztnGtMVOkZx39n5oDLVSqi4IqurhQqEMkufNDEDDalWbUmYA1GxWZQIlBZ0HRraiLJujUmrkljlJiBAlUh6NgaQwJp06ByUVfFKjGKRRRjBRXXgo44InPrh8PYWWR0gHMOzsrv01yf559/3ve891dwOBwoiAhMAYKBACAQmAT4AFolE6uNqEBMf+BjIAyYDAgK5HjvkMtIAYgAZgM/cf2itraWlpYW2traaGtr4+HDh/T29tLX1ydT6veDsRopADOBT5FKIgCHDx+msrKS+vp6rFbrGFN4B2MxMgSIRaq+NDQ0YDQaKS4uxm63yyLOmxiNkVogBpgFCBcvXsRgMHDo0CFZhXkbIzUyAPgMCAIoLi4mJydHdlHeyEiMDAU+B8Smpiby8/NpaWlRSJb34amREcACQFNVVUVmZiYDAwMKyvI+NB78JgJIADRlZWWsW7duwsRheJeRoUglUSgpKSErK0sFSd7J24wMQHomasrKysjOzlZJkvcxd+7cj9wZqUVqncWqqqqJkvgOwsPDfd0ZGQMENTU1kZmZqaYmryQgIEAczsgpSGNm8vLyJhoWDwgMDNQONVJAGvZhMBi4du2a+qq8EF9fX81QI2cyWKVzc3PHQ5NX4uPj84MSKSDN4lBeXj4+irwUURQFVyMjAP/6+nqvmoDIycmZbTKZitvb278aLw1Dq/YnAEajcXzUjJKMjIxFQUFBM+fNm7eku7v726ioKD+1NQiC8LpEBgIhra2tGAwGtXWMif7+/n7n62nTpsVevXq1KCsra6aaGlyr9gyAs2fPqplfFhwOxw9mkQMCAsJLSkoO7tu37zO1NGi12tdVeyrAsWPH1MotG8PNxguCoC0oKPjjyZMnf6mGBq1WK2iQlkYnAzQ1NamRV1Z6enpM7r5LTU0taG5uVnxoJoqiICKt+gm1tbVesVDl7++v2bx585wlS5b8LDw8fPqsWbNi3/b7xMTEVTdu3AiMjY09oJQmQRAEEWnx/r2e7V60aFFwbm5uQnJy8pLQ0NBP/fz8Qkfy//nz53/R1dUVFhUV9bXZbFZkZU5Emi6jra1NifhjQq/Xf1xQULA0Pj7+C61WO6ZuzYwZMz5/8ODBgezs7G+MRmO3XBqdvDayvb1d7tijZvr06T51dXUb4+LifoWMOzUmT578SWVlZVFcXNzXhYWFN+SKC9LE7kcA9+/flzPuqNm+fftPOzo6/hwXF7cCBba7iKLov2PHjm+rqqqS5YrpfEaKAM+fP5cr7qgxGo0/T09P/50audasWfN7Pz8/37S0tH+ONZazQy4CmExuexGqcOLEiRS1THSSkpKSLlcsT1YRFaewsDBm5cqVW9TOe/z48TK5YmkAK0BwcLBcMUdMYWHhTjXzWa1W865du7Zt2LDhO7liikhGikFBQeNSvS9duvQbHx+fQLXyvXz5sic9PX1rTU3NEznjaoB+gMjISDnjekRMTIxfUlLSarXyPXny5KZOp/ut3CZarVaHBngBEBUVJWdsjygqKvpipP+x2+0Ddrt9xGPZjo6OxrCwsK+am5tl7544HA6HyKCR0dHRcsd/J4mJib9412/MZvP3t2/fPl9dXX321q1bTzs6OvomTZqkmTNnTmBCQsK0VatW/ToiIiLhbTEuX778t6SkpL/Ip/xNRMAEkJDwVi2yExkZ6RscHOx2AtbhcDgaGxsPL1u27MRw4+MzZ848BTpDQkIC1q9f71Z8dXX1gdTU1H/IJNstGqAXcCxfvhxRVGJv/vBs3bp1/uCA4A3MZvPjLVu2fJmcnPzXd00yRERETHH3ncFg2KmGiSAZaQGeAeh0OjVyApCQkDBvuM+fPXt2b/HixV/u37//7mhjWyyW59u2bcvPzc29NHqFnuNwOBzODvn3ABkZGWrkBSAsLGzq0M9evXrVGx0dXXDlyhWPjzxotVof1/dPnz69s3Tp0ty9e/fekUOnJzhbbYAuAL1ej+aNPQPKIIqiz9DP8vLy/tDd3W0ZSRyLxfJ6T01nZ+fFqVOnFpw6dapXDo2eYrPZXhtpRnpWsmnTJlWS2+12m+v7mpqaotLS0s6Rxtm5c2f99evXaxsbG49ERkZ+Y7PZFD3KNhw2m83uWvzuAaxerU7/2HUZ1WQy/WfFihV/H02c8+fPm+Lj4w/qdLpxW5B3rdoADwFzcnIyer1e8eQ9PT3/db7evXv3nxRPqCCujQ2AA7gD6lTvmzdv3gepcdizZ8/7Mz0/CgYGBuxDW5ZOwLRw4ULFd1ycO3euC6CiouKQoolUYGjVBqlUXgcc2dnZLFiwQLHkXV1d/ffu3fsuPz//imJJVMJisdgEN+e1Y4HZDQ0NpKSkYLGMqEfywZGWlhbmrtP4b6BPp9N51Ra/8aKvr8/mzkgb8C/AunbtWkpLS1WU5X28ePHC+rZhzAskM+0bN26kuLhYJVnex6NHjwbcPSNdcR6hE8rKyibO3LjBEyNhyKFOvV4/0QANwdMZiofAZQafmXV1dYp2jbwRT0ukE+f5xECYOPjuykiNhCFXMVy4cIGDBw9SUVEhuzhvYjRGOgkB4hjcX3n69GmOHj1KeXn5B3k5yFiMBGm3WCQwj8FdbSBdV3PkyBEaGxu9YhewHIzVSCcapJMRkQy5QKmmpobm5mZaW1u5e/cujx8//lFeoCSXka44r/SahlTtP4grvZQw0hUf/n/JXBDgx4/0krn/AR6XtWUO9nCVAAAAAElFTkSuQmCC")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 = urlplus.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");}}
