若当前页面有弹出层,在按下返回键时,原生App会先关闭弹出层;但浏览器中的wap站,却会直接执行history.back(),关闭当前页面,这种体验是不对的;wap2app会智能处理返回逻辑,当用户点击back按键时,先探测当前页面是否存在弹出层,若存在则关闭弹出层,否则关闭当前页面。
但前端写法过于灵活,wap2app目前无法处理所有的弹出层情况,因此wap2app还支持开发者自定义配置;因为弹出层的关闭,一般是通过某个控件的点击事件触发的,比如点击遮罩或点击“取消”按钮;wap2app提供一种简洁的key:value的选择器配置方案,其中:
- key:弹出层选择器
- value:点击可触发弹出层关闭的控件选择器
例如:
{
"webviewId": "shop",//店铺页面
"matchUrls": [
{
"hostname": "shop.example.com",
"pathname": "\\/\\d+\\.*html"
}
],
"back": {
"before": [
{
"popupSelector": ".category_menu",
"closeSelector": "#j_category",
"eventType": "click"
}
]
}
}
如上适配代码表示:若.category_menu控件存在且可见,则按下back键时,触发#j_category的click事件;
常见的弹出层场景:
- 筛选条件
- 图片预览
4 个评论
要回复文章请先登录或注册
2***@qq.com
4***@qq.com
DCloud_UNI_CHB (作者)
意琦行