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框架支持将页面图片全屏展示,全屏后支持双指缩放;在 sitemap.json 中,配置目标 webview->easyConfig->previewImage 节点。

{
"webviewId": "detail",
"easyConfig": {
"previewImage": [
{
"gallerySelector": "#slider", //图片组父容器选择器
"imageSelector": "img", //图片img节点的选择器
"loop": true, //是否支持循环预览
"indicator": "number" //图片指示器样式
}
]
}
}
\n

下拉刷新

\n

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

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

{
"webviewId": "pullToRefresh",
"webviewParameter": {
"pullToRefresh": {
"support": true
}
}
}
\n
3 分享
DCloud_客服_Trust 771860@qq.com yaho

要回复文章请先登录注册