怎么在App里正确使用H5页面,你造吗?

html-css020

怎么在App里正确使用H5页面,你造吗?,第1张

用了这么多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的[枪毙][枪毙]。启动页作为展示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 补记:

一、通过html页面打开Android本地的app

1、首先在编写一个简单的html页面

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8">

<title>Insert title here</title>

</head>

<body>

<a href="m://my.com/">打开app</a><br/>

</body>

</html>

2、在Android本地app的配置

在AndroidManifest的清单文件里的intent-filte中加入如下元素:

<intent-filter>

<action android:name="android.intent.action.VIEW" />

<category android:name="android.intent.category.DEFAULT" />

<category android:name="android.intent.category.BROWSABLE" />

<data

android:host="my.com"

android:scheme="m" />

</intent-filter>

示例截图如下:

然后使用“手机浏览器”或者“webview”的方式打开这个本地的html网页,点击“打开APP”即可成功开启本地的指定的app

二、如何通过这个方法获取网页带过来的数据

只能打开就没什么意思了,最重要的是,我们要传递数据,那么怎么去传递数据呢?

我们可以使用上述的方法,把一些数据传给本地app,那么首先我们更改一下网页,代码修改后:

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8">

<title>Insert title here</title>

</head>

<body>

<a href="m://my.com/?arg0=0&arg1=1">打开app</a><br/>

</body>

</html>

(1).假如你是通过浏览器打开这个网页的,那么获取数据的方式为:

Uri uri = getIntent().getData() String test1= uri.getQueryParameter("arg0") String test2= uri.getQueryParameter("arg1")

(2)如果使用webview访问该网页,获取数据的操作为:

webView.setWebViewClient(new WebViewClient(){

@Override

public boolean shouldOverrideUrlLoading(WebView view, String url) {

Uri uri=Uri.parse(url)

if(uri.getScheme().equals("m")&&uri.getHost().equals("my.com")){

String arg0=uri.getQueryParameter("arg0")

String arg1=uri.getQueryParameter("arg1")

}else{

view.loadUrl(url)

}

return true

}

})

HTML5嵌入到APP中方法:

1、android webview控件加载html5;

2、即webview基于webkit内核支持html5;

3、进行做自定义屏幕适应调试和测试!