浅谈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 相关文章推荐
用jQuery扩展自写的 UI导航
Jan 13 Javascript
Document:getElementsByName()使用方法及示例
Oct 28 Javascript
JQuery解析XML数据的几个简单实例
May 18 Javascript
JavaScript中return用法示例
Nov 29 Javascript
JS实现的RGB网页颜色在线取色器完整实例
Dec 21 Javascript
js实现图片左右滚动效果
Feb 27 Javascript
Taro集成Redux快速上手的方法示例
Jun 21 Javascript
vue使用websocket的方法实例分析
Jun 22 Javascript
Vue 自定义指令实现一键 Copy功能
Sep 16 Javascript
小程序的上传文件接口的注意要点解析
Sep 17 Javascript
vue element实现表格合并行数据
Nov 30 Vue.js
原生JavaScript实现购物车
Jan 10 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
Netflix将与CLAMP、乙一以及冲方丁等6名知名制作人合伙展开原创动画计划!
2020/03/06 日漫
mysql时区问题
2008/03/26 PHP
PHP中$_SERVER的详细参数与说明介绍
2013/10/26 PHP
常见PHP数据库解决方案分析介绍
2015/09/24 PHP
转换json格式的日期为Javascript对象的函数
2010/07/13 Javascript
jquery的live使用注意事项
2014/02/18 Javascript
javascript实现限制上传文件大小
2015/02/06 Javascript
基于javascript实现单选及多选的向右和向左移动实例
2015/07/25 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
2020/09/01 Javascript
javascript css红色经典选项卡效果实现代码
2016/05/17 Javascript
Nodejs高扩展性的模板引擎 functmpl简介
2017/02/13 NodeJs
JS中的作用域链
2017/03/01 Javascript
Angular 作用域scope的具体使用
2017/12/11 Javascript
JavaScript门道之标准库
2018/05/26 Javascript
jQuery实现的模仿雨滴下落动画效果
2018/12/11 jQuery
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
2019/11/14 Javascript
node.js使用stream模块实现自定义流示例
2020/02/13 Javascript
前端vue+elementUI如何实现记住密码功能
2020/09/20 Javascript
jquery实现加载更多"转圈圈"效果(示例代码)
2020/11/09 jQuery
实例讲解python中的协程
2018/10/08 Python
python re库的正则表达式入门学习教程
2019/03/08 Python
使用Python控制摄像头拍照并发邮件
2019/04/23 Python
Python对象转换为json的方法步骤
2019/04/25 Python
pandas 时间格式转换的实现
2019/07/06 Python
Django用户认证系统 组与权限解析
2019/08/02 Python
使用Python三角函数公式计算三角形的夹角案例
2020/04/15 Python
python查询MySQL将数据写入Excel
2020/10/29 Python
美国诺德斯特龙百货官网:Nordstrom
2016/08/23 全球购物
viagogo意大利票务平台:演唱会、体育比赛、戏剧门票
2018/01/26 全球购物
教育科研先进个人材料
2014/01/26 职场文书
统计专业自荐书
2014/07/06 职场文书
2015年司机工作总结
2015/04/23 职场文书
2016猴年开门红标语口号
2015/12/26 职场文书
怎样写好工作计划
2019/04/10 职场文书
学校学习型党组织建设心得体会
2019/06/21 职场文书
SQL CASE 表达式的具体使用
2022/03/21 SQL Server