mui跨页面调用函数

最新推荐文章于 2022-08-10 10:09:07 发布

vincent_nkcs

最新推荐文章于 2022-08-10 10:09:07 发布

阅读量1k

点赞数

分类专栏：前端文章标签： mui 前端

本文链接：https://blog.youkuaiyun.com/vincent_nkcs/article/details/89042587

版权

前端专栏收录该内容

7 篇文章

订阅专栏

在使用mui开发中，为实现自定义confirm样式，将确认框做成独立页面并定义openConfirm函数。遇到的问题是，点击按钮后如何在confirm页面的回调中调用原页面函数。尝试了plus.storage和return值的方式，但因异步问题未成功。最终通过在原页面添加页面监听，并在confirm页面使用mui.fire调用原页面函数，成功实现了跨页面调用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这两天在用mui写自定义confirm格式时遇到了跨页面调用函数的问题，由于confirm样式多而且多处用到，因而我将它写成了一个confirm.html文件，并写一个openConfirm函数用于跳转到该文件，在原js页面上加一个按钮监听器，点击按钮后调用openConfirm函数来打开新样式的弹窗，此时遇到了一个问题，即弹窗选择确定或取消需要对应不同的动作，动作需要写在mui.confirm的回调函数里，而该动作又在原js页面上，因此出现了一个跨页面调用函数的问题。

首先尝试了一下plus.storage.setItem()和plus.storage.getItem来记录按下的确定或取消按钮来解决该问题，发现由于按钮监听器触发后就会执行所有语句，因此未等到保存按下的确定和取消键监听已经执行完成了，造成了异步的情况。

然后尝试使用return直接返回值，发现也是同样的问题。

最后采用一下方式解决了该问题：

先在原js页面对按钮添加监听

sign_btn.addEventListener("click",function() {
				openConfirm('../../../confirm.html',{type:"confirm",main:"sign"});
			},false);

然后在原js页面添加页面监听

window.addEventListener('sign',function(event){
				//你需要执行的函数
			});

最后在confirm.html页面调用该函数

if(main == 'sign'){
						var btnArray = ['取消', '确定'];
						mui.confirm('123', ' ', btnArray, function(e) {
							if(e.index == 1) {
								console.log("click_1");
								var web = plus.webview.getWebviewById('policy');
								mui.fire(web,'sign',{id:parseInt(this.id)});
							}else if(e.index == 0){
								console.log("click_2");
							}
							setTimeout("plus.webview.currentWebview().close();",200);
						},'div');

其中

var web = plus.webview.getWebviewById('policy');
mui.fire(web,'sign',{id:parseInt(this.id)});

表示得到原js页面的id，根据id用mui.fire调用原js页面中的函数，实现跨页面调用函数的功能。