wap2app页面组配置

wap2app默认会以新窗体的方式打开每个要展现的url,创建一个新的webview来显示新页面(即使该url已在某个webview中加载);假设依次访问如下页面:

A页面->B页面->C页面->B页面

wap2app默认会创建4个webview(B页面会创建2个webview),当用户点击back按键时,则依次关闭对应的webview,显示上一个页面,屏幕展现的页面依次变为:

B页面->C页面->B页面->A页面

这种情况会有两个问题:

  • B页面重复创建webview,浪费性能
  • B页面关闭一次后,还有一个B页面,需要重复关闭才能显示A页面
\n

更优化的页面逻辑应该是:创建3个webview,按照逻辑复用webview,当从C页面跳转B页面时,将已存在的B页面webview直接显示出来(而不是创建重复的webview),这样当用户点击back按键时,屏幕展现的页面将因此变为:

B页面->C页面->A页面

要实现如上需求,只需根据B页面的url地址配置一个特定的webview,wap2app中通过matchHostnames和matchPathnames两项匹配页面的url,示例代码如下:

!(function() {
wap2app.init({
webviews: {
'webview-b-id':{//B页面,webview-b-id为该webview的id
matchHostnames:"m.mydomain.com",
matchPathnames:"page-b-pathname"
}
}
});
})();
\n

配置项说明:

  • matchHostnames:匹配B页面的location.hostname,支持如下类型:String | Array(String) | RegExp | Function
  • matchPathnames:匹配B页面的location.pathname,支持如下类型:String | Array(String) | RegExp | Function
\n

因为一个wap站的hostname大多相同,wap2app提供globalOptions选项配置wap站的共有属性;如上示例中,可以在globalOptions中配置matchHostnames;webviews节点下的每个webview,默认会继承globalOptions的配置,若需覆盖globalOptions配置,只需在相应webview下配置对应配置项即可,因此如上代码可修改如下(将matchHostnames提到globalOptions节点下):

!(function() {
wap2app.init({
globalOptions:{//全局通用配置
matchHostnames:"m.mydomain.com",
},
webviews: {
'webview-b-id':{//B页面,webview-b-id为该webview的id
matchPathnames:"page-b-pathname"
}
}
});
})();

matchPathnames还支持**正则、数组、函数**三种类型,因此我们可以扩展一下,比如配置wap站上所有列表页共用一个webview,所有详情页复用一个webview,如下为代码示例:
```javascript
!(function() {
wap2app.init({
globalOptions:{//全局通用配置
matchHostnames:"m.mydomain.com",
},
webviews: {
'list':{//列表页
matchPathnames:/\/list\/\d+/ //匹配类似“/list/001”的格式
},
'detail':{//详情页
matchPathnames:/\/detail\/\d+/ //匹配类似“/detail/001”的格式
}
}
});
})();
\n

如上配置后,所有详情页均会复用同一个webview,比如当前已经打开A详情,在A详情页面跳转B详情页面时,不会创建新的webview,而是在当前webview中执行hef跳转到B详情页;对应的,在B详情页按back按键时,会执行history.back()后退到A详情页,A详情页再次back,则会关闭详情webview。

302跳转

\n

matchPathnames匹配的是跳转前地址,比如在A页面中有如下代码:

<a href="b.html">跳转B页面</a>
\n

点击该超链接跳转B页面时,如果服务端实现了301或302跳转为C页面,此时在新页面中检查location.pathname为C页面的pathname,但在wap2app配置中依然需要配置B页面的原始地址,即:b.html;

如下为一个通过Chrome的Network面板看到的网络请求日志:

从上图中可以看到,浏览器请求"/zhubo/22493030"时,服务端有一个301跳转,最后指向了"/zhubo/22493030/",pathname多了一个"/";因此在wap2app中配置页面组时,就需要配置到原始的"/zhubo/22493030",如下为代码示例:

"zhubo":{
matchPathnames:/\/zhubo\/\d+$/
}
\n

如果仅根据跳转后的显示地址("/zhubo/22493030/"),匹配正则写成:/\/zhubo\/\d+\//(最后多了一个"/"),就会出现匹配失败的情况。

特殊页面组:首页

\n

首页是一类特殊的页面组,wap2app中首页的webviewid固定为"launch",且不可修改;首页的地址并不唯一,因为在很多wap站上,"/"、"/index"、"/index.html"最后可能都指向了首页,开发者需要将这些地址全部配置为首页的matchPathnames,参考HBuilder中默认生成的__wap2appconfig.js代码,示例如下:

!(function() {
wap2app.init({
globalOptions:{
matchHostnames:"m.mydomain.com",
},
webviews: {
'launch': {//首页
url: 'http://m.mydomain.com',
matchPathnames: ["/","/index","/index.html"]
}
}
});
})();
\n

更进一步,部分基于位置的wap站会在首页通过302跳转到对应城市的首页,比如用户初次访问首页(m.mydomain.com)时,wap站会根据用户当前地址自动302跳转到对应城市,比如:m.mydomain.com/bj/,此时开发者就需要将"/bj/"添加到首页的matchPathnames中,但wap站可能在全国支持多个城市,逐个添加也不现实,此时推荐使用正则匹配,如下:

!(function() {
wap2app.init({
globalOptions: {
matchHostnames: /mydomain\.com/
},
webviews: {
'launch': {//首页webview
url: 'http://m.mydomain.com',
matchPathnames: /^\/\w{2,6}\/$/,//正则匹配城市首页
}
}
});
})();
\n
1 分享
DCloud_客服_Trust

要回复文章请先登录注册