MUI-打开页面、及页面间传参 方法汇总（newbie_version）

MUI-打开页面、及页面间传参 方法汇总

有三件事人类都要经历：出生生活和死亡。他们出生时无知无觉，死到临头，痛不欲生，活着的时候却又怠慢了人生。 —— 拉布吕耶尔

Method 1 --预加载

init方法

mui.init({
  preloadPages:[
    {
      url:prelaod-page-url,
      id:preload-page-id,
      styles:{},//窗口参数
      extras:{},//自定义扩展参数
      subpages:[{},{}]//预加载页面的子页面
    }
  ],
  preloadLimit:5//预加载窗口数量限制(一旦超出,先进先出)默认不限制
});

注：

1. 可加载多个webview；
2. 该方法不会返回页面的引用，mui.init是异步执行，执行完后，直接用 “plus.webview.getWebviewByid” 可能返回null；
3. 不建议当页预加载，当页获取；

mui.preload方法

var page = mui.preload({
    url:new-page-url,
    id:new-page-id,//默认使用当前页面的url作为id
    styles:{},//窗口参数
    extras:{}//自定义扩展参数
});

注：加载单个webview，加载多个，需要多次调用；

加载完毕后，进行展示。

var _page = plus.webview.getWebviewByid('preload-page-id');

_page.show('pop-in');

Method 2 --打开新页面

mui.openWindow({
    url:new-page-url,
    id:new-page-id,
    styles:{
      top:newpage-top-position,//新页面顶部位置
      bottom:newage-bottom-position,//新页面底部位置
      width:newpage-width,//新页面宽度，默认为100%
      height:newpage-height,//新页面高度，默认为100%
      ......
    },
    extras:{
      .....//自定义扩展参数，可以用来处理页面间传值
    },
    createNew:false,//是否重复创建同样id的webview，默认为false:不重复创建，直接显示
    show:{
      autoShow:true,//页面loaded事件发生后自动显示，默认为true
      aniShow:animationType,//页面显示动画，默认为”slide-in-right“；
      duration:animationTime//页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
    },
    waiting:{
      autoShow:true,//自动显示等待框，默认为true
      title:'正在加载...',//等待对话框上显示的提示内容
      options:{
        width:waiting-dialog-widht,//等待框背景区域宽度，默认根据内容自动计算合适宽度
        height:waiting-dialog-height,//等待框背景区域高度，默认根据内容自动计算合适高度
        ......
      }
    }
})

Method 3 --创建页面（原生方法、建议使用）

一、权限设置

{
    "permissions":{
        // ...
        "Webview": {
            "description": "窗口管理"
        }
    }
}

二、创建 页面

var w = plus.webview.create( url, id, styles, extras );//参数：地址，页面id，页面样式，传参
w.show(); // 显示窗口

Method 4 --页面间传参

一、mui.fire方法（建议使用）

//触发详情页面的newsId事件
mui.fire(detailPage,'newsId',{
    id:id
});

//detailPage页，添加newId自定义事件监听
window.addEventListener('newsId',function(event){
    //获得事件参数
    var id = event.detail.id;
});

二、mui.openWindow方法

详情，见 method 2;

三、mui.preload方法

详情，见 method 1 mui.preload();

文章参照：
http://dev.dcloud.net.cn/mui/window/