语言表达上可能不够精简，日后会想办法写得更通俗易懂。
打开新页面：
mui.openWindow({
url:"", // 目标页面的url
id:"", // 目标页面的id，这个可以自定
createNew:true, // 是否重复创建同样id的webview，默认为false。
extras:{} // 传递给目标页面的参数
})
【参数说明】
- createNew:false
通常用于目标页面的信息/展示样式等比较固定、不会变化的情况
不传createNew时，默认为false - createNew:true
通常用于目标页面信息/样式经常变化的情况。
为了防止打开或者通过mui.fire()返回时，打开/返回到错误页面。
举个例子，在某个页面打开新的页面去选择某个过滤条件后返回，返回到的页面信息不改变或者打开到另一条不相关的信息页等等。
解决这个需要做到以下几点：
① 打开目标页面时：createNew:true。
② 打开目标页面之前需要先关闭已打开的相同id的webview。
var targetPage= plus.webview.getWebviewById("targetPage.html");
if(!targetPage){
plus.webview.hide(targetPage);
plus.webview.close(targetPage);
}
mui.openWindow({
url:"",
id:"targetPage.html", // 目标页面的id
createNew:true,
extras:{}
})
【为什么这样做】
-
展现问题：
【前提】
现在有三个页面：
列表页（list）、编辑页（edit）、搜索页（find）
他们的关系如下：
页面关系
【问题描述】
- 情况1：
// 打开页面的方法
mui.openWindow({
url:"",
id:"",
createNew:false,
extras:{}
})
【操作】
列表页→ 点击修改“张三”→打开编辑页→返回列表页→点击修改“李四”→打开编辑页
按照操作逻辑，两次打开的编辑页是显示的信息本应该是不一样的。
但是实际情况是：两次打开的页面显示是一样的信息（如下图）。
2019010402.png
- 情况2：
// 打开页面的方法
mui.openWindow({
url:"",
id:"",
createNew:true,
extras:{}
})
搜索页选择籍贯后返回编辑页的方法：
// 自定义事件
// 获取页面id
var edit = plus.webview.getWebviewById('edit.html')；
// 触发自定义事件
mui.fire(edit,'backToEdit',{
nativePalce:"北京"
});
// 打开编辑页面
mui.openWindow({
id:'edit.html'
});
【操作】
在列表页
→ 点击修改“张三”(打开编辑页) → 修改“籍贯”(打开搜索页) → 选择籍贯(返回编辑页)
→ 点击“提交”（返回列表页）
→ 点击修改“李四”(打开编辑页) → 修改“籍贯”(打开搜索页) → 选择籍贯(返回编辑页)
注意：①和⑤打开的是同一个页面，显示内容不一样而已，这里只是为了更明显的对比，所以画成两个页面。
参考下图：
情况2操作步骤
假设张三的籍贯是“北京”，李四的籍贯是“天津”
返回分析：
搜索页返回到编辑页情况分析
- 为什么会导致这个问题？
需要先了解以下几个概念
通过mui.openWindow({})打开过的页面，都能在应用中创建webview窗口，
而这些被创建的webview窗口相关的数据会被放在一个webview对象中
并且按照打开页面的先后顺序分别会被记录在一个数组中
我们可以通过plus.webview.all()来查看这个数组的内容，同时理解createNew
- webview对象
// 打开页面
mui.openWindow({
url:"edit.html",
id:"edit.html",
extras:{
"fromPage": "work",
"commonParams": "test",
"pageTitle": "业务管理"
}
})
// webview对象
{
"__view_array__": [],
"__IDENTITY__": "NWindow",
"__uuid__": "NWindow1521546583499193",
"__callbacks__": {
"back": [null],
"menu": [null]
},
"__callback_id__": "plus21546583499701",
"id": "edit.html",
"fromPage": "work",
"commonParams": "test",
"pageTitle": "业务管理"
}
// __uuid__:每重新创建一次webview就会生成一个__uuid__
-
plus.webview.getWebviewById( id )
在已创建的窗口列表中查找指定标识的Webview窗口并返回。若没有查找到指定标识的窗口则返回null，若存在多个相同标识的Webview窗口，则返回第一个创建的Webview窗口。 -
createNew
createNew参数为为true，则不判断重复，每次都新建webview；
createNew参数为为fasle，则先查找当前App中是否已存在同样id的webview，若存在则直接显示；否则新创建并根据show参数执行显示逻辑； -
结合上诉几点：
【情况一】createNew:false
编辑页，因为被打开过一次，第二次打开的时候，由于createNew的值为false，所以，检测到app中已经存在同样id的webview，所以就直接打开之前打开过的页面。
【情况二】createNew:true,使用自定义事件返回前一页
plus.webview.all()大概应该是这样的（此处省略了其他的参数，只列举该文章所需参数）
[
{
"id" :"find.html",
"__uuid__" :"NWindow311534934369503",
"__callback_id__":"plus321534934361263",
},
{
"id" :"edit.html",
"__uuid__" :"NWindow291534934203899",
"__callback_id__":"plus281534934554135",
},
{
"id" :"list.html",
"__uuid__" :"NWindow121534934002360",
"__callback_id__":"plus21534934554047",
},
{
"id" :"edit.html",
"__uuid__" :"NWindow311534934686901",
"__callback_id__":"plus21534934687760",
}
]
转换成下图：
plus.webview.all()数组展示说明
先回顾一下【情况2】的操作顺序：
情况2操作步骤
这里我们先看一下
plus.webview.all()返回的数组中的值的变化：
①-④步
⑤-⑦步
【说明】
每打开一个页面，
plus.webview.all()数组都会发生变化，如果是
createNew:true的话，那么push一个对象到数组中，并展示相应页面如果是
createNew:false的话，会先检查一下数组中存不存在相同id的项。👉如果数组中存在相同id项。那么根据数组中已存在的相同id项的数量分
⭐⭐相同id项只有一项，则把该项移到数组的最后一项，并展示相应页面，
⭐⭐相同id项有多项，则会把下标最小的那一项移到数组的最后一项，并展示相应页面（这里也可以理解为，从头遍历数组，把遇到第一个相同id的项移到数组的最后一项）
👉如果数组中不存在相同id项，则push一个新对象到数组中去，并展示相应页面
也就是说，如果打开一个信息多变的页面，我们就需要保证plus.webview.all()里不出现相同id项，以保证我们的页面能够实时更新，所以每一次打开页面时都要的createNew:true,同时先检查一下数组中存不存在相同id项，使用plus.webview.getWebviewById( id )即可，如果存在则先关闭相应的页面，再使用mui.openWindow({})创建并打开新页面。
网友评论