MUI APP关于页面之间的传值,plusready和自定义事件

最近在用MUI开发这个APP,发现有时候这个plusready不起作用,表现在,这个页面如果重复打开,这个plusready就进不去,然后上一个页面传过来的值,就没法接收了。这个经过MUI官方确认,是有可能发生的,所以,这里面的话,就需要通过自定义事件,来确保这个值能正确传递。

首先,我先演示一下,通常我们页面之间的传值的方法,如下:

参数生成页面:

mui.openWindow({

id: ‘lightMapMain.html‘,

url: ‘lightMapMain.html‘,

show: {

aniShow: ‘pop-in‘

},

extras: {//extras里面的就是参数了

entrance: "mapDetail",

ProjectName: "工程名称"

},

waiting: {

autoShow: true, //自动显示等待框,默认为true

}

});

参数接收页面:

//plusReady事件后,在里面接收参数

mui.plusReady(function() {

var wv = plus.webview.currentWebview();

var vText = wv.ProjectName;//这样就能接收到上个页面传过来的值了

document.getElementById("lbProjectName").innerHTML = vText;

});

通常我们传参就这么进行,但是由于这个页面,多次打开,发生了类似缓存的现象,所以,有时候这个plusReady不能保证每次都能执行。所以,我根据而官方的提示,增加了一个自定义事件,来实现这个情况,实现方法如下(我是双管齐下,plusReady也获取值,自定义事件也获取值)

好,下面演示我的方法(下面这个监听一个按钮,然后打开一个页面):

var vBtnCtrl = document.getElementById("btnCtrl");

vBtnCtrl.addEventListener("tap", function() {

var vNextPage = null;

//获得下一个页面

if (vNextPage == null) {

vNextPage = plus.webview.getWebviewById(‘lightMapMain.html‘);//这个是下一个页面的ID,第一次,他肯定为空,所以,这里面这个fire方法,是不会执行的。

if (vNextPage != null) {

//触发下一个页面的自定义事件

mui.fire(vNextPage, ‘DIY_DATA‘, {

entrance: ‘mapDetail‘,

ProjectName: vText

});

}

}

var vCurrentWebView = plus.webview.currentWebview();

if (vCurrentWebView != null) {

vCurrentWebView.hide(‘none‘);

}

//上面这个代码是隐藏当前窗口,我这个是浮动的子窗口,到了下一个页面之后,我要把它隐藏起来,否则等下我返回,这个子窗口还在,就影响体验了。如果你们是整个页面的窗口,那么这个代码可以注释掉。

mui.openWindow({

id: ‘lightMapMain.html‘,//这个ID与上面的自定义事件传参的ID需要一致,因为第一次打开这个页面,上面是获取不到webview的,但是,你这次打开之后,下次再回到这个页面的时候,由于我们之前打开过这个页面,所以,那个自定义事件就会触发了。

url: ‘lightMapMain.html‘,

show: {

aniShow: ‘pop-in‘

},

extras: {//这里面是传参了,想我们前面说到的

entrance: "mapDetail",

ProjectName: vText

},

waiting: {

autoShow: true, //自动显示等待框,默认为true

}

});

})

接下来,我们就到了参数接收页面,如下(首先,我们还是要在plusReady里面接收一次,因为你不能保证这次是初次打开这个页面还是第二次,所以,这个还是需要的。):

//plusReady事件后,自动创建menu窗口;

mui.plusReady(function() {

var wv = plus.webview.currentWebview();

var vText = wv.ProjectName;

document.getElementById("lbProjectName").innerHTML = vText;

});

但是如果这个是非首次打开的话,就会不一定进来plusReady了,所以,参数可能接收失败了,这里面,我们就要接收自定义事件传过来的参数了,就是前面我们的fire那里了。

代码如下:

//添加上一个页面自定义事件监听

window.addEventListener(‘DIY_DATA‘, function(event) {

//获得事件参数

//`var id = event.detail.id;

var vText = event.detail.ProjectName;

document.getElementById("lbProjectName").innerHTML = vText;

});

这样,我们就能把这个参数获取到,双重保证,就冇问题啦,是不是。(如果你们需要谨慎一些,可以把这个自定义事件的监听延迟个300毫秒,保证接收的概率,因为如果是这个自定义事件优先执行了,然后他又去执行这个plusReady,那就会冲突了。所以,你们懂得。)

好了,本次教程到此结束,转载请保留原作者地址以及姓名(本人无偿分享经验,有偿接单制作APP,有需要可以联系我。);

作者:南宫萧尘

E-mail:[email protected]

日期:2016-04-03

时间: 2024-08-04 22:44:06

MUI APP关于页面之间的传值,plusready和自定义事件的相关文章

iOS 页面之间的传值总结

iOS 页面之间的传值总结   1.属性传值 (1): 属性传值第一步需要用到什么类型就定义什么样的属性 (2): 从上一个页面到一个页面的选中方法里面将要传的值传到来(上一个页面)备注:这种方法只适用于上一个页面推到下一个页面. 如:MainViewController与SecondViewController两个视图控制器,点击MainViewController中的按钮将跳转到SecondViewController视图,同时想要传递一个值过去.这时可以利用属性传值. 首先SecondVi

IOS 页面之间的传值(主讲delegate)

IOS的Delegate,通俗一点说就是页面之间的传值. 总结一下现在知道的IOS页面之间传值的方式有三种 1.使用NSNotification发送通知的传值 主要是通过NSNotificationCenter发送一个通知,他不知道要把值传给谁,当监听的页面收到通知消息,才会获取到消息. 2.是利用属性来传值,我主要是用到A->B中A页面要跳转到B页面,也就把B中需要A的参数通过preparFroSegue方法从A传给B 3.通过NSUserDefault来传值,其主要思想是把值写到本地化的一个

项目分享三:页面之间的传值

一.回调函数的使用 我们首先来看一下,页面间传值的一个经典例子,列表页与明细页之间的传值,如下面二张图所图.在列表页点击评价晒单,进入评价晒单页面,当用户在该页面完成操作后,列表页对应的选项,相应地改为“已评价".那么这个是怎么实现的呢?在这个案例里面,使用的是 回调函数 ,我们来看一下相关的代码. 下面这段代码,是列表页的代码,当用户点击”评价晒单“按钮时,打开评价晒单详细页.关键点在于 evaluatePage['submited'] 这个回调函数. evaluate = (item) =&

如何实现两个页面之间进行传值

参考地址:http://blog.csdn.net/hlk_1135/article/details/52809468 B/S页面间通信 HTTP是无状态的协议.Web页面本身无法向下一个页面传递信息,如果需要让下一个页面得知该页面中的值,除非通过服务器.因此,Web页面保持状态并传递给其它页面,是一个重要的技术. Web页面之间传递数据,是Web程序的重要功能 在HTTP协议中一共有4种方法来完成这件事情: 1)URL传值:2)表单传值:3)Cookie方法:4)Session方法: 一.UR

iOS delegate 实现页面之间的传值

最近刚刚接触ios开发,也没有一本好的书可以阅读,所有的功能都只能靠自己的摸索实现.这两天在做多个页面之间的跳转和传值问题, 页面跳转看我另一篇文章http://blog.csdn.net/xiaotanyu13/article/details/7711954 现在将用delegate来传值 一开始看网上的资源有些看不懂,总感觉很高深的样子 后来一想,实际上delegate传值的实质就是: 比如右AB两个页面,A想要传值给B ,就只要先在A中得到B的指针,然后将想要传的值赋给B,之后跳转, 话不

struts2怎么实现页面到页面之间的传值?

我要实现一个产品订购的功能,在浏览产品的时候通过点击一个订购的链接,跳转到提交订单的页面,在跳转的同时要把浏览的产品的名称和型号传到提交订单的页面,并且把这里的订单类的产品名称和型号的表单域里赋上传递过来的值,因为只用到两个值,不想通过Action去操作,只涉及页面之间的值传递... 我是这样做的: 在浏览产品页面有:<a href='<s:url value="orderList_add.jsp" > <s:param name="productNa

静态页面之间如何传值

一:JavaScript静态页面值传递之URL篇 能过URL进行传值.把要传递的信息接在URL上. 例子: 参数传出页面Post.htm—> <input type="text" name="username"> <input type="text" name="sex"> <input type="button" value="Post"> &

mui APP与服务器之间的交互原理

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title

window.open()页面之间函数传值

项目中遇到的问题,使用window.open()开一个页面之后,cookie会消失,所以无法一键切肤不管作用,解决方案如下: window.open()总结: window.open("sUrl","sName","sFeature","bReplace"); sUrl:可选项.字符串(String).指定要被加载的HTML文档的URL地址.假如无指定值,则about:blank的新窗口会被显示. sName:可选项.字符串(