How to load external web pages or server data using the MUI framework

Below I will share with you a brief discussion on the method of loading external web pages or server data in the MUI framework. It has a good reference value and I hope it will be helpful to everyone.

When many of our students implement the MUI framework, they often use the mui.openwindow method when opening a new page. However, when encountering a web page, it needs to be downloaded from the server or nested externally. When loading a web page, due to network speed issues, a white screen may appear during loading and the waiting time may be too long, resulting in a poor user experience.

Use plus.webview when loading the page. The create method solves this problem very well.

Without further ado, just paste the code

First we need to create a parent page ,The following is the JS of the parent page

// H5 plus事件处理 
function plusReady(){ 
var nwaiting = plus.nativeUI.showWaiting();//打开原生加载等待框 
ws=plus.webview.currentWebview();//创建一个新的页面 
embed=plus.webview.create(“createShow.html”,”“,{bottom:”0px”});//新的页面地址 
embed.onclose=embedClose; 
ws.append(embed);
} 
if(window.plus){ 
plusReady(); 
}else{ 
document.addEventListener(“plusready”,plusReady,false); 
} 
// 页面关闭事件回调函数 
function embedClose(e){ 
alert( “Closed!” ); 
}

Create a createShow.html sub-page, this is the name I gave myself,

mui.init({
      //示例打开百度,进行加载
      subpages:[{
        url:"https://www.baidu.com",
        id:"https://www.baidu.com",
        styles:{
        }
      }]
    })

mui.plusReady(function(){
var ws = plus.webview.currentWebview();//加载进外部网页,加载完成关闭等待框
ws.show('slide-in-right', 50);
plus.nativeUI.closeWaiting();
} )

The above is what I compiled for everyone, I hope it will be useful to everyone in the future helpful.

Related articles:

Using the image lazy loading plug-in in vue-lazyload

How to use highCharts to draw a 3d pie chart in Vue

How to use ueditor in vue

The above is the detailed content of How to load external web pages or server data using the MUI framework. For more information, please follow other related articles on the PHP Chinese website!