社区MUI的那些坑 → 浏览:帖子主题
* 帖子主题:mui页面间传值
pojin (ID: 1)
头衔:论坛坛主
等级:究级天王[荣誉]
积分:414
发帖:45
来自:保密
注册:2022-05-03 21:53:24
造访:2022-11-17 08:42:05
[ 第 1 楼 ] 回复
# 方法1 : 通过MUI封装的openWindow 方法:
// 旧页面设置:
var webview = mui.openWindow({
    url:'info.html',
    extras:{
        name:'mui'  //扩展参数
    }
});

// 新页面:
mui.plusReady(function () {
  var self = plus.webview.currentWebview();
  // 或 var self = plus.webview.getWebviewById('new');
  console.log("extras:" + self.targetId);
})

// 可能的:
console.log(webview.name);//输出mui字符串


注意:扩展参数仅在打开新窗口时有效,若目标窗口为预加载页面,则通过mui.openWindow方法打开时传递的extras参数无效。


# 方法2 : 通过HTML5本地储存: localStorage、sessionStorage
    if(window.sessionStorage){
        // OK
    }else{
        // FAIL
    }


# 方法3 : 利用URL传参

在页面跳转的时候通过设置window.location.href添加参数,在接收参数的页面通过window.location.search获取参数字符串。

发送参数的页面:
window.location.href = 'new.html?targetId=123'

接收参数的页面:
// 获取url中的参数
function getUrlParam (name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if (r!= null) {
        return unescape(r[2]);
    }else{
        return null;
    }
}   
//获取url中的targetId参数
var targetId = getUrlParam('targetId');
console.log(targetId);
2022-05-07 17:45:08 IP:已设置保密
pojin (ID: 1)
头衔:论坛坛主
等级:究级天王[荣誉]
积分:414
发帖:45
来自:保密
注册:2022-05-03 21:53:24
造访:2022-11-17 08:42:05
[ 第 2 楼 ] 回复
在App开发中,页面间传值是很常见的开发需求,mui框架根据业务场景不同,提供了两种传值模式。
1、页面初始化时,通过扩展参数传值;
mui在初始化页面时,提供了extras配置参数,通过该参数可以设置页面参数,从而实现页面间传值;
mui框架在如下几种场景下,会执行页面初始化操作:
- 通过mui.openWindow()打开新页面(若目标页面为已预加载成功的页面,则在openWindow方法中传递的extras参数无效);
- 通过mui.init()方法创建子页面;
- 通过mui.init()方法预加载页面;
- 通过mui.preload()方法预加载页面

示例,假设我们有如下需求:
在首页中打开关于页面时,传递当前产品名称及版本号,然后在关于页面中读取这两个参数并显示出来;

首页实现代码:

mui.openWindow({
    url:'info.html',
    id:'info.html',
    extras:{
        name:'mui',
        version:'0.5.8'
    }
});

关于页面实现代码:

var self = plus.webview.currentWebview();
var name = self.name;
var version = self.version;

2、页面已创建,通过自定义事件传值
在App开发中,经常会遇到页面间传值的需求,比如从新闻列表页进入详情页,需要将新闻id传递过去; Html5Plus规范设计了evalJS方法来解决该问题; 但evalJS方法仅接收字符串参数,涉及多个参数时,需要开发人员手动拼字符串; 为简化开发,mui框架在evalJS方法的基础上,封装了自定义事件,通过自定义事件,用户可以轻松实现多webview间数据传递。

仅能在5+ App及流应用中使用
因为是多webview之间传值,故无法在手机浏览器、微信中使用;

监听自定义事件

添加自定义事件监听操作和标准js事件监听类似,可直接通过window对象添加,如下:

window.addEventListener('customEvent',function(event){
  //通过event.detail可获得传递过来的参数内容
  ....
});

触发自定义事件

通过mui.fire()方法可触发目标窗口的自定义事件:
.fire(webview,’eventName’,{}),
参数1:target;
参数2:event;
参数3:data

目标webview必须触发loaded事件后才能使用自定义事件

若新创建一个webview,不等该webview的loaded事件发生,就立即使用webview.evalJS()或mui.fire(webview,’eventName’,{}),则可能无效;案例参考:这里

evalJS和自定义事件,在ios 下不执行?
自定义事件

test.zip 使用最新的版本新建的项目,从a.html 跳转到b.html后执行一段代码,下面是

    webview=mui.preload({
    url:’b.html’,
    id:’page-login’ }); //var webview=plus.webview.create(‘b.html’,’b.html’);
    webview.show(‘none’, 1, function() {
    console.log(1221);
    webview.evalJS(“test()”);
    mui.fire(webview, ‘pageShow’, {}); });
    //在android 中没有问题,但是在ios 系统方法不执行

webview必须触发loaded事件后,才能执行evalJS或mui.fire方法;

将你示例a.html页面代码中增加loaded事件监听,即可解决问题:

    webview.addEventListener(‘loaded’,function () {
    webview.show(‘none’, 1, function() {
    console.log(1221);
    webview.evalJS(“test()”);
    mui.fire(webview, ‘pageShow’, {});
    }); })

或者你可以这样:

    在a.html页面js中,

    //要先预加载 b页面 mui.preload({ url: ‘b.html’, id: ‘pageB’ });

    //根据预加载好的 b页面的 webVIew id 获取B页面的 webview var pageB=
    plus.webview.getWebviewById(‘pageB’);

    //fire事件会在打开b页面后,执行B页面的 showPageB事件 //showPageB 这个是自己定义的 函数名称
    mui.fire(pageB, ‘showPageB’, {});

    在b.html 页面的js中, mui.plusReady(function() {

    window.addEventListener(‘showPageB’, showPageB);

    });

    //event的作用是:如果a页面有传递参数,在下面的函数里可以使用event获取参数 // 如 var stuName =
    event.detail.stuName;

    function showPageB(event){

    //获取参数 event.detail.XXXXX;

    //这里是直接打开页面,也可以使用动画 mui.currentWebview.show(); //然后B页面就直接出来了 }

从新闻列表页面进入新闻详情页面,新闻详情页面为共用页面,通过传递新闻ID通知详情页面需要显示具体哪个新闻,详情页面再动态向服务器请求数据,mui要实现类似需求可通过如下步骤实现:

在列表页面中预加载详情页面(假设为detail.html)
列表页面在点击新闻标题时,首先,获得该新闻id,触发详情页面的newsId事件,并将新闻id作为事件参数传递过去;然后再打开详情页面;
详情页面监听newsId自定义事件

列表页面代码如下:

//初始化预加载详情页面
mui.init({
  preloadPages:[{
    id:'detail.html',
    url:'detail.html'         
  }
  ]
});

var detailPage = null;
//添加列表项的点击事件
mui('.mui-content').on('tap', 'a', function(e) {
  var id = this.getAttribute('id');
  //获得详情页面
  if(!detailPage){
    detailPage = plus.webview.getWebviewById('detail.html');
  }
  //触发详情页面的newsId事件
  mui.fire(detailPage,'newsId',{
    id:id
  });
//打开详情页面         
  mui.openWindow({
    id:'detail.html'
  });
}); 

详情页面代码如下:

//添加newId自定义事件监听
window.addEventListener('newsId',function(event){
  //获得事件参数
  var id = event.detail.id;
  //根据id向服务器请求新闻详情
  .....
});
2022-05-08 14:58:16 IP:已设置保密
分页: 1, 共 1 页
快速回复主题
账号/密码
用户: 没有注册? 密码:
评论内容