DCloud_UNI_CHB
DCloud_UNI_CHB
  • 发布:2017-03-19 22:49
  • 更新:2018-12-08 00:03
  • 阅读:9352

wap2app优化返回体验

分类:流应用

若当前页面有弹出层,在按下返回键时,原生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事件;

常见的弹出层场景:

  • 筛选条件
  • 图片预览
2 关注 分享
Trust 小呆呆

要回复文章请先登录注册

2***@qq.com

2***@qq.com

您好,我现在遇到的问题是,在二级页面的返回按钮,会提示

“再按一次返回键退出,” 再次点击的时候会退出APP。
2018-12-08 00:03
4***@qq.com

4***@qq.com

您好,我现在遇到的问题是有一个登录页,网页的源码不方便改。现在是登录成功后点击返回键就会返回上一页也就是 填写用户名和密码的地方,请问这个有解决办法吗 ?
2018-01-31 11:32
DCloud_UNI_CHB

DCloud_UNI_CHB (作者)

回复 意琦行 :
如果只是跳转第三方网站,应该也是打开新窗口;返回时关闭当前窗口,返回上一页。
2017-11-13 11:23
意琦行

意琦行

假如引用的第三方的网址,不能自定义触发的click事件,这种情况下点击 back键 怎么样才能返回上一页呢?
2017-11-10 22:03