怎么在App里正确使用H5页面，你造吗？

用了这么多App，自己也做了App产品，注意到通过web页面在App里的正确应用可以轻松解决很多产品运营方面的问题，总结一下分享给大家。不是什么高技术含量的东西，贻笑大方了。

App里之所以用到web页面，多是因为这个页面上的内容和结构都是属于高频变化的，使用Native App页面来实现的话则需要不断发布新版本才能实现，这一点不现实。而App都是可以调用原生系统浏览器或者集成到App里的浏览服务，因此属于高频变化的内容和结构通过web页面来表现，再通过App来调用web页面就可以轻松解决这个问题了。而且，经过优化专门适配移动端的web界面已经很接近Native App的页面了，很多时候我都压根没有感受出来，也因此web页面在App上被广泛应用。

属于高频变化的内容和结构的页面多来自产品运营，一般包含：运营活动页面/广告/应用内推送消息等。

那，在哪些场景下web页面会在App里被使用呢？

说起App启动页，这是一个 Caodan的故事，因为在大量的App的启动页上已经做起了广告了，而更甚得是，还有App做了两个不一样的启动页连着显示，真挺牛B的[q毙][q毙]。启动页作为展示App品牌区域极好的手段，并且优质的启动页内容会不断地在用户内心里加以深化。每天我们看到的App不断变化的启动页内容都是通过web来实现的，很多人都没有感知到那是一个web页面。圣诞节的时候，打开虾米音乐时，启动页内容是带圣诞树带雪一个房子，现在想起来都暖烘烘的。而今年大红的钉钉，支持自定义启动页内容，一直想给团队做一个属于我们自己的很酷的启动页，结果被无限拖延。

[2016/03/01 备注---后来题主通过阅读才发现，启动页的更换并不是通过html的页面来实现，特此勘误，敬请谅解]

App的推送消息从打开方式上来说可以分为两类，第一类是点击推送消息直接打开指定App页面，比如多数资讯类App(知乎、澎湃新闻等)；第二类是点击推送消息打开一个web页面，再通过点击web页面里的内容模块打开指定的App页面。第二类推送消息在电商类/生活服务类等重运营的App里应用很多。比如图例中的大众点评对KTV商户的一次推送消息，这个推送消息里包含了多家的KTV商户，用户根据自己的喜好点击自己喜欢的KTV商户，进入该KTV商户的店铺详情页面（指定App页面）

这种web在App上的使用方式同上文的推送消息有异曲同工之妙，主要也是应用在重运营的App上，对电商类App的一次营销活动，对音乐类App的一个音乐精选集/音乐人的推荐，通过首页的推荐Banner位引导打开丰富的内容页面都是一个很好的方式。

这一种使用方式不太常见，但是可以作为App早期开发中过程中的一种替代手段。由于web的开发效率相对App来说会高一些，在App开发的初期为了抢占用户和市场先机而不得不在规定的时间内发布一款功能完整的App时，可以使用这种方式来进行 *** 作，基础的核心功能使用Native App页面来实现，一些非核心功能/使用App页面实现起来耗费工时的页面可以使用web页面来实现，这一点在早期的钉钉App版本里应用很多。

调用第三方服务并且涉及到复杂的数据验证处理又必须由第三方来完成时，这种方式是一个比较不错的解决方案，事实上，大量的第三方服务公司也是通过web来提供自己的产品和服务的。支付服务属于这一类范畴的最常见应用领域，例如Paypal支付服务，Braintree支付服务，支付宝支付服务等。

当然浏览器这类App的主体就是web页面，我们不再赘言。

这一点涉及到技术领域了，作为一个产品汪对此的了解实在有限，了解到的实现方式有以下两种，使用系统内核浏览服务和使用第三方提供的浏览服务。鹅厂提供了X5浏览服务SDK，号称表现性能优异，在微信里公众号文章使用的就是X5浏览服务。关于这方面更多的知识了解可以用关键词“webview”+"浏览服务"去问问度娘。

希望这篇文字能对你解决问题有所启发。码字这么辛苦，点个赞或者打个赏吧[可爱][可爱]。

2016/12/21 补记：

android上不需要那么麻烦
webviewsetWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url){
//在这解析这个url的参数，符合要求就跳转页面
//不符合就调下面方法
viewloadUrl(url);
return false;

}
});

举个简单的例子，有个需求是要和APP交互的，h5页面里面有个分享按钮，点击之后需要调用APP原生的分享功能
app那边写好了一个方法是onShare( )
第一步：就是点击分享好友触发

第二步：定义onShare方法调用APP方法

isAndroid_ios（）这个函数是判断是否是安卓或者是ios
因为安卓和ios的调用方法不同
以onShare()方法为例：
安卓：windowAndroidFunctiononShare('1'); // android
IOS：windowwebkitmessageHandlersonSharepostMessage(’1‘); //ios
里面可以传参给APP 的

这个h5这边很简单，只需要把方法挂载到window上，APP就能调用
具体为

打开蓝牙进行连接就可以啦。
1、首先打开手机上的设置，找到蓝牙并将蓝牙功能打开，在蓝牙设备搜索列表界面等待。2、此时，拿到beoplayh5之后，我们就可以长按耳机上“B&O”这个键，直至耳机的LED指示灯快速闪烁蓝色灯光，进入配对状态。3、再回到我们的手机蓝牙界面，此时手机的蓝牙设备搜索列表上会出现B&OBeoPlayH5耳机的名字（如果没有，请尝试刷新蓝牙功能界面），然后选择“BeoplayH5”，按照手机提示与BeoPlayH5配对连接。4、当耳机LED指示灯缓慢闪烁蓝色灯光的时候，就说明手机与BeoPlayH5连接成功了。

现在用h5开发app主要是三种模式，一种是webapp，主要是将网页版的进行打包，不能调用原生的功能。第二种是混合式app，这种能够调用一些原生的功能，体验比webapp好一些，最后一个是RNapp，现在的大部分都是这种开发模式，能够使用大部分的原生功能，跟原生app基本上没有区别了。

比如用hybrid获取地理位置和短信信息，这当然需要框架封装好，比如利用框架的bridgejs（下一篇文章会详细讲这个内容）
场景2
最简单的比如用H5调用App然后再判断是否有安装此应用，如果有则直接打开应用，则安装如果没有则去itunes或者google市场安装。
比如淘宝上的立即打开功能
首先场景2的功能，我们需要了解他的几个流程
1判断程序系统环境
2判断有应用开启应用
3判断无应用则跳到相应的链接区执行

前提条件

1、必须是认证企业才行。

2、企业必须满足30人哦~

激活员工达到30以上，即可在钉钉管理后台里面的微应用里面申请使用微应用。
下面先了解一下微应用是什么东西从哪里打开

h5微应用是钉钉上面的一个功能  经过企业管理员的同意后你就可以使用此功能

他类似于一个软件不过是再钉钉内部使用依托一钉钉这个软件，可以理解为类似于微信小程序一样的东西可以写很多功能
我们要从哪里进入呢

打开

然后
这个页面就是微应用的页面了   分为h5微应用和小程序 具体的话不太清楚从哪里能看到它是小程序还是h5微应用
微应用有的需要付费和需要通过管理员同意才能供企业内部使用 下面是免费使用的

当我们点击进去添加
免费试用
立即开通
选择了之后
在你的首页工作台页面会多出一个列表

---