浅谈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 相关文章推荐
用JavaScrpt实现文件夹简单轻松加密的实现方法图文
Sep 08 Javascript
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
Dec 16 Javascript
javascript 表格内容排序 简单操作示例代码
Jan 03 Javascript
Javascript递归打印Document层次关系实例分析
May 15 Javascript
javascript中利用柯里化函数实现bind方法
Apr 29 Javascript
Angular2内置指令NgFor和NgIf详解
Aug 03 Javascript
AngularJS框架的ng-app指令与自动加载实现方法分析
Jan 04 Javascript
Node.js使用NodeMailer发送邮件实例代码
Mar 06 Javascript
JS实现的文字间歇循环滚动效果完整示例
Feb 13 Javascript
Vue瀑布流插件的使用示例
Sep 19 Javascript
vue-router两种模式区别及使用注意事项详解
Aug 01 Javascript
vue 判断页面是首次进入还是再次刷新的实例
Nov 05 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
PHP-redis中文文档介绍
2013/02/07 PHP
Yii2框架控制器、路由、Url生成操作示例
2019/05/27 PHP
PHP7 windows支持
2021/03/09 PHP
JAVASCRIPT 对象的创建与使用
2021/03/09 Javascript
jQuery第三课 修改元素属性及内容的代码
2010/03/14 Javascript
jquery each()源代码
2011/02/14 Javascript
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
2011/10/21 Javascript
JS日期和时间选择控件升级版(自写)
2013/08/02 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
2015/12/22 Javascript
基于jQuery Tipso插件实现消息提示框特效
2016/03/16 Javascript
AngularJS基础 ng-keydown 指令简单示例
2016/08/02 Javascript
jQuery如何跳转到另一个网页 就这么简单
2016/12/28 Javascript
js放大镜放大购物图片效果
2017/01/18 Javascript
vue2.x select2 指令封装详解
2017/10/12 Javascript
Vue官方文档梳理之全局配置
2017/11/22 Javascript
基于vue2实现上拉加载功能
2017/11/28 Javascript
JS常见构造模式实例对比分析
2018/08/27 Javascript
web页面和微信小程序页面实现瀑布流效果
2018/09/26 Javascript
Python回调函数用法实例详解
2015/07/02 Python
Php多进程实现代码
2018/05/07 Python
Python 获取windows桌面路径的5种方法小结
2019/07/15 Python
Django实现列表页商品数据返回教程
2020/04/03 Python
Python过滤掉numpy.array中非nan数据实例
2020/06/08 Python
CSS3+js实现简单的时钟特效
2015/03/18 HTML / CSS
Debenhams百货英国官方网站:Debenhams UK
2016/07/12 全球购物
舒适的豪华鞋:Taryn Rose
2018/05/03 全球购物
美国网上书店:Barnes & Noble
2018/08/15 全球购物
以工厂直接定价的传奇性能:Ben Hogan Golf
2019/01/04 全球购物
纯净、自信、100%的羊绒服装:360Cashmere
2021/02/20 全球购物
大四学年自我鉴定
2013/11/13 职场文书
超市中秋节活动方案
2014/02/12 职场文书
运动会铅球比赛加油稿
2014/09/26 职场文书
语文复习计划
2015/01/19 职场文书
2015年社区党建工作汇报材料
2015/06/25 职场文书
JS继承最简单的理解方式
2021/03/31 Javascript
Nginx设置HTTPS的方法步骤 443证书配置方法
2022/03/21 Servers