浅谈MUI框架中加载外部网页或服务器数据的方法


Posted in Javascript onJanuary 31, 2018

我们很多同学在实施使用MUI框架的时候,在打开新的页面的时候常使用的方式是:mui.openwindow的方法,然而遇到网页需要从服务器或者是要嵌套外部的网页的时候,由于网速的问题会遇到加载时出现白屏,等待时间过长,导致用户体验不好.

页面加载的时候使用plus.webview.create方法就很好的解决了这个问题.

废话不多说直接贴代码

首先我们需要在创建一个父页面,以下是父页面的JS

// 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!” ); 
}

创建一个createShow.html子页面,这个是我自己取的名字 ,

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();

} )

以上这篇浅谈MUI框架中加载外部网页或服务器数据的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS控件的生命周期介绍
Oct 22 Javascript
JavaScript中获取鼠标位置相关属性总结
Oct 11 Javascript
如何处理JSON中的特殊字符
Nov 30 Javascript
用file标签实现多图文件上传预览
Feb 14 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
Jul 10 Javascript
使用store来优化React组件的方法
Oct 23 Javascript
Dropify.js图片宽高自适应的方法
Nov 27 Javascript
解决vue 路由变化页面数据不刷新的问题
Mar 13 Javascript
vue组件中使用props传递数据的实例详解
Apr 08 Javascript
Vue项目引发的「过滤器」使用教程
Mar 12 Javascript
vue数据初始化initState的实例详解
Apr 11 Javascript
Vue组件模板及组件互相引用代码实例
Mar 11 Javascript
js保留两位小数方法总结
Jan 31 #Javascript
微信小程序icon组件使用详解
Jan 31 #Javascript
详解Chai.js断言库API中文文档
Jan 31 #Javascript
微信小程序 如何引入外部字体库iconfont的图标
Jan 31 #Javascript
详解Vue单元测试Karma+Mocha学习笔记
Jan 31 #Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
Jan 31 #Javascript
Vue服务器渲染Nuxt学习笔记
Jan 31 #Javascript
You might like
解决phpmyadmin 乱码,支持gb2312和utf-8
2006/11/20 PHP
PHP 简单日历实现代码
2009/10/28 PHP
php Smarty初体验二 获取配置信息
2011/08/08 PHP
浅析php中三个等号(===)和两个等号(==)的区别
2013/08/06 PHP
php中\r \r\n \t的区别示例介绍
2014/02/08 PHP
ThinkPHP行为扩展Behavior应用实例详解
2014/07/22 PHP
php封装的图片(缩略图)处理类完整实例
2016/10/19 PHP
laravel使用Faker数据填充的实现方法
2019/04/12 PHP
七种PHP开发环境搭建工具
2020/06/28 PHP
Gambit vs ForZe BO3 第三场 2.13
2021/03/10 DOTA
动态刷新 dorado树的js代码
2009/06/12 Javascript
javascript EXCEL 操作类代码
2009/07/30 Javascript
jquery ready()的几种实现方法小结
2010/06/18 Javascript
js复制到剪切板的实例方法
2013/06/28 Javascript
JSF中confirm弹出框的用法示例介绍
2014/01/07 Javascript
JSON格式的键盘编码对照表
2015/01/29 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
2015/08/24 Javascript
解析NodeJs的调试方法
2016/12/11 NodeJs
node.js调用Chrome浏览器打开链接地址的方法
2017/05/17 Javascript
jQuery自动或手动图片切换效果
2017/10/11 jQuery
JavaScript实现计算多边形质心的方法示例
2018/01/31 Javascript
小程序开发中如何使用async-await并封装公共异步请求的方法
2019/01/20 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
2019/06/06 jQuery
JS中的算法与数据结构之集合(Set)实例详解
2019/08/20 Javascript
python两种遍历字典(dict)的方法比较
2014/05/29 Python
Python编程之黑板上排列组合,你舍得解开吗
2017/10/30 Python
详解python实现识别手写MNIST数字集的程序
2018/08/03 Python
python 定时任务去检测服务器端口是否通的实例
2019/01/26 Python
Python中的pathlib.Path为什么不继承str详解
2019/06/23 Python
Python 脚本拉取 Docker 镜像问题
2019/11/10 Python
python的setattr函数实例用法
2020/12/16 Python
纽约现代艺术博物馆商店:MoMA STORE(室内家具和杂货商品)
2016/08/02 全球购物
英国电子产品购物网站:Tech in the basket
2019/11/08 全球购物
教学质量评估实施方案
2014/03/17 职场文书
教师党员学习十八届四中全会思想汇报
2014/11/03 职场文书
房地产置业顾问工作总结
2015/10/23 职场文书