wap2app优化UI展现

流应用类似原生体验,因此首先要求wap站的UI风格是App化的,在下图示例中,
左侧为超链接方式的M站,右侧是app风格的M站

wap2app优化UI展现,主要分为几大类,本文逐个说明。

去wap化展现

\n

wap2app需要将一些明显带有wap特征的元素给去掉,主要包括:

  • 顶部导航条(标题栏):因为wap2app默认使用原生导航条,若不去除,会显示双标题;
  • 原生App下载引导:包括下载banner、仅原生App才支持的业务,流应用是一种独立的发行模式,不允许给原生导流,否则无法通过上线审核;
  • PC/mobile版本切换链接
  • 版权信息:包括icp备案及版权说明等
\n

优化方案参考如何在流应用环境下去wap化展现

图片全屏预览

\n

wap2app框架支持将页面图片全屏展示,全屏后支持双指缩放;通过webview -> previewImage 即可配置,如下:

wap2app.init({
webviews:{
'product':{
previewImage:'#slide img' //需支持全屏预览的图片选择器
}
}
})
\n

下拉刷新

\n

下拉刷新在App中是普遍需求,但鉴于性能体验,很多M站不支持下拉刷新;wap2app弥补了这块缺陷,可通过简单配置,实现原生下拉刷新,如下为刷新效果:

wap2app可通过webview -> pullToRefresh -> support 节点配置当前webview是否启用下拉刷新,默认为不启用;如下为示例代码:

wap2app.init({
webviews:{
'news-list':{//新闻详情webview
pullToRefresh: { //下拉刷新配置
support: true, //启用下拉刷新
}
}
}
})
\n
1 分享
DCloud_客服_Trust

要回复文章请先登录注册