本文作于一年前，囿于本人知识领域范围，下文中的“web页面”一词用词不准确，准确表述为“H5页面”，请读者阅读过程中，自行脑换。
用了这么多App，自己也做了App产品，注意到通过web页面在App里的正确应用可以轻松解决很多产品运营方面的问题，总结一下分享给大家。不是什么高技术含量的东西，贻笑大方了。
App里之所以用到web页面，多是因为这个页面上的内容和结构都是属于高频变化的，使用Native App页面来实现的话则需要不断发布新版本才能实现，这一点不现实。而App都是可以调用原生系统浏览器或者集成到App里的浏览服务，因此属于高频变化的内容和结构通过web页面来表现，再通过App来调用web页面就可以轻松解决这个问题了。而且，经过优化专门适配移动端的web界面已经很接近Native App的页面了，很多时候我都压根没有感受出来，也因此web页面在App上被广泛应用。
属于高频变化的内容和结构的页面多来自产品运营，一般包含：运营活动页面/广告/应用内推送消息等。
那，在哪些场景下web页面会在App里被使用呢？
一，App启动页
说起App启动页，这是一个 Caodan的故事，因为在大量的App的启动页上已经做起了广告了，而更甚得是，还有App做了两个不一样的启动页连着显示，真挺牛B的[枪毙][枪毙]。启动页作为展示App品牌区域极好的手段，并且优质的启动页内容会不断地在用户内心里加以深化。每天我们看到的App不断变化的启动页内容都是通过web来实现的，很多人都没有感知到那是一个web页面。圣诞节的时候，打开虾米音乐时，启动页内容是带圣诞树带雪一个房子，现在想起来都暖烘烘的。而今年大红的钉钉，支持自定义启动页图片内容，一直想给团队做一个属于我们自己的很酷的启动页，结果被无限拖延。
[2016/03/01 备注---后来题主通过阅读才发现，启动页的图片更换并不是通过html的页面来实现，特此勘误，敬请谅解]
虾米音乐的启动页，有时候会温暖
每次打开滴滴出行的启动页都是广告
二，App推送消息
App的推送消息从打开方式上来说可以分为两类，第一类是点击推送消息直接打开指定App页面，比如多数资讯类App(知乎、澎湃新闻等)；第二类是点击推送消息打开一个web页面，再通过点击web页面里的内容模块打开指定的App页面。第二类推送消息在电商类/生活服务类等重运营的App里应用很多。比如图例中的大众点评对KTV商户的一次推送消息，这个推送消息里包含了多家的KTV商户，用户根据自己的喜好点击自己喜欢的KTV商户，进入该KTV商户的店铺详情页面（指定App页面）
大众点评的一条KTV推荐的推送消息，打开后可以看到KTV商户列表，截图失误哈哈
高德地图里的推送通知消息
高德地图里的推送通知点击打开后
三，App内运营活动/广告Banner
这种web在App上的使用方式同上文的推送消息有异曲同工之妙，主要也是应用在重运营的App上，对电商类App的一次营销活动，对音乐类App的一个音乐精选集/音乐人的推荐，通过首页的推荐Banner位引导打开丰富的内容页面都是一个很好的方式。
虾米音乐首页我是歌手的Banner位
点击打开这个Banner后的页面
四，作为过渡的Native App页面的替代品
这一种使用方式不太常见，但是可以作为App早期开发中过程中的一种替代手段。由于web的开发效率相对App来说会高一些，在App开发的初期为了抢占用户和市场先机而不得不在规定的时间内发布一款功能完整的App时，可以使用这种方式来进行操作，基础的核心功能使用Native App页面来实现，一些非核心功能/使用App页面实现起来耗费工时的页面可以使用web页面来实现，这一点在早期的钉钉App版本里应用很多。
钉钉里的签到功能，点击打开后是web页面
名字都不改【枪毙】【枪毙】，这下小伙伴们可以看清楚了耶
钉钉里创建团队提示页面，很难看得出来这是一个web页面吧
那把数据网络关掉后，这个页面你是否就觉得特别熟悉呢
五，App调用第三方服务时
调用第三方服务并且涉及到复杂的数据验证处理又必须由第三方来完成时，这种方式是一个比较不错的解决方案，事实上，大量的第三方服务公司也是通过web来提供自己的产品和服务的。支付服务属于这一类范畴的最常见应用领域，例如Paypal支付服务，Braintree支付服务，支付宝支付服务等。
集成到楚楚街上的中国银联支付
中国银联支付页面
六，特殊的App-浏览器
当然浏览器这类App的主体就是web页面，我们不再赘言。
七，在App里使用web页面时需要注意哪些事项呢?
-
仅作为辅助功能，核心功能尽量不使用web来进行代替
-
web页面的导航层级不宜超过两级
从 Native App页面进入web页面上时一般都是App的二级或者三级导航的深度了，进入到web页面后会脱离掉App的导航体系，用户心理会变得有一些疑惑或者不确定。如果web页面的层级又比较复杂比较深，会造成用户很难理解这个页面下一步又是什么页面，怎么回去上一个页面，在这种疑惑和恐慌中很有可能的情况是用户会关闭这个web页面回到Native App上相对熟悉的页面，导致web页面的流失率很高。 -
注意对各种机型的适配
这一点主要是考虑到开发出来的web页面响应式布局实现上，尽量使web页面表现的像Native App页面，同时解决多机型适配的问题，因为在A机型上展示良好的页面在B机型上可能完全展示不了。我在为Getone App接入Paypal支付时，开始时没有留意，后来发现我们选择使用的新版Paypal支付页面在大量的机型上都无法显示（Paypal提供的支付页面本身存在的适配问题），后来通过及时调整回旧版支付页面才解决这个问题。 -
对于长期高频使用的Web页面要提供管理后台，方便运营人员编辑
对于产品运营中要频繁使用的web页面最好开发出来管理后台，提供几个模板，运营人员每一次只需要编辑和添加内容即可实现需要的web页面，可以极大提高运营的效率。
那又有哪些方式可以实现通过App来浏览web页面，并且提供一个比较好的体验呢？
这一点涉及到技术领域了，作为一个产品汪对此的了解实在有限，了解到的实现方式有以下两种，使用系统内核浏览服务和使用第三方提供的浏览服务。鹅厂提供了X5浏览服务SDK，号称表现性能优异，在微信里公众号文章使用的就是X5浏览服务。关于这方面更多的知识了解可以用关键词“webview”+"浏览服务"去问问度娘。
希望这篇文字能对你解决问题有所启发。码字这么辛苦，点个赞或者打个赏吧[可爱][可爱]。
2016/12/21 补记：
- 最近学会了使用Markdown，想到简书是支持的，就抽空上来看看这篇文章，重新用我学会的markdown来排了一下版面，还真是挺好用的，高效简洁；
- 随着工作经验的增长，了解了更多的知识，回头发现囿于当时的经验水平，本文中提到的一些内容是不太准确的，读者们应该都比我聪明，贻笑大方了，多包涵；
- 没想到这篇无心之作竟然阅读量都2000+了，觉得有点受到鼓舞了，以后我会再继续加油的，坚持写作。
网友评论