文档章节

Android内部h5和native交互实现方式

ShallowMeet
 ShallowMeet
发布于 2015/09/17 16:59
字数 2446
阅读 14
收藏 0

Android具体实现方式

一、实现方式

a、h5调用native:

Android实现h5到native的方式为截获h5调用的特定url,一般url都是http://**这种,为了能够捕获h5调用的native。

我们采用mdshaction作为scheme,这种string客户端会截获,然后不调用webview的loadurl,而是自己做处理。

规则是  mdshaction://(方法名)?data=(参数)&sign=(标记)

如果没有参数只需要传

            mdshaction://方法名

如果有参数的话,参数需要做urlencode,因为传输的参数如果不做urlencode,可能含有空格或者&等等特殊字符,或者可能是json格式

客户端会对这个data做urldecode获取原始的参数来做处理

sign是用来做为h5与native交互后,反馈给h5的一个标记,由h5给客户端

b、native调用h5

native直接调用h5的javascript 即可

c、Android之所以不使用由h5调用js来触发native调用(mWebView.addJavascriptInterface(new JSInterface(), "jsInterface");)的原因是在4.2系统下存有有严重的安全漏洞

详细见http://blog.csdn.net/leehong2005/article/details/11808557

二、实现详情

1、关闭当前界面 

h5打开 

mdshaction://close
举例说明(以下情况如需必要,否则不再举例,可以去 三 里面看实际例子):
<a href="mdshaction://close" wdfield="kw" onmousedown="return c({'fm':'tab','tab':'tieba'})">close</a>

或者

window.location.href="mdshaction://close";

 

2、调用登录注册页

h5打开

mdshaction://loginRegist

客户端成功后

调用  webView.loadUrl("javascript:naLoginSuccess('" +userid + "')");

传给服务端调用成功后的userid

举例说明

function naLoginSuccess(userid){
        window.location.href="mdshaction://showToast?data="+userid;
}

3、调用提交订单(确认订单)页

h5打开

mdshaction://gotoPay?data=(具体参数)

订单参数的格式为json格式,需要urlencode(如无必要,不再说明),就是neworder后那个订单提交时候的那个详细结果的json格式,具体找shuming.ai

举例

{id="143887303655480955", content=[{id="5fdb355b00de2848c7ecad2bcccf14e1", price="18.9", title="澳洲贵族芒果 1个约600克 ", count="2"}], money="37.8", add_time="2015-08-06 22:57:16", store_name="鲜果汇", is_online_pay="1", volume={enablecount="10", useful="null", description="暂无可用优惠劵~", rows=[{id="zfTWDtnQ", value="1", status="1", is_disable="0", expire_time="2015-07-02至2015-09-02可用", title=""}]}, distributiontime={rows=[{time="立即送货"}]}, address={address_id="7a5baa93fa100a53b16444d8bc41edb9", name="啦啦啦", mobile="15555555555", community="韩国明星国际抗衰(第三置业店)", sex="1", address="86", detail_address="韩国明星国际抗衰(第三置业店) 86", lon="null", lat="null"}, discount_money="37.8", is_need_show_alert="0", alert_text="下单吧", time_alert="0", support_pay_type="alipay,weixin,cashpay", msg="", support_preferential=[]}

 

<a href="mdshaction://gotoPay?data=%7bid%3d%22143887303655480955%22%2c+content%3d%5b%7bid%3d%225fdb355b00de2848c7ecad2bcccf14e1%22%2c+price%3d%2218.9%22%2c+title%3d%22%e6%be%b3%e6%b4%b2%e8%b4%b5%e6%97%8f%e8%8a%92%e6%9e%9c+1%e4%b8%aa%e7%ba%a6600%e5%85%8b+%22%2c+count%3d%222%22%7d%5d%2c+money%3d%2237.8%22%2c+add_time%3d%222015-08-06+22%3a57%3a16%22%2c+store_name%3d%22%e9%b2%9c%e6%9e%9c%e6%b1%87%22%2c+is_online_pay%3d%221%22%2c+volume%3d%7benablecount%3d%2210%22%2c+useful%3d%22null%22%2c+description%3d%22%e6%9a%82%e6%97%a0%e5%8f%af%e7%94%a8%e4%bc%98%e6%83%a0%e5%8a%b5%7e%22%2c+rows%3d%5b%7bid%3d%22zfTWDtnQ%22%2c+value%3d%221%22%2c+status%3d%221%22%2c+is_disable%3d%220%22%2c+expire_time%3d%222015-07-02%e8%87%b32015-09-02%e5%8f%af%e7%94%a8%22%2c+title%3d%22%22%7d%5d%7d%2c+distributiontime%3d%7brows%3d%5b%7btime%3d%22%e7%ab%8b%e5%8d%b3%e9%80%81%e8%b4%a7%22%7d%5d%7d%2c+address%3d%7baddress_id%3d%227a5baa93fa100a53b16444d8bc41edb9%22%2c+name%3d%22%e5%95%a6%e5%95%a6%e5%95%a6%22%2c+mobile%3d%2215555555555%22%2c+community%3d%22%e9%9f%a9%e5%9b%bd%e6%98%8e%e6%98%9f%e5%9b%bd%e9%99%85%e6%8a%97%e8%a1%b0(%e7%ac%ac%e4%b8%89%e7%bd%ae%e4%b8%9a%e5%ba%97)%22%2c+sex%3d%221%22%2c+address%3d%2286%22%2c+detail_address%3d%22%e9%9f%a9%e5%9b%bd%e6%98%8e%e6%98%9f%e5%9b%bd%e9%99%85%e6%8a%97%e8%a1%b0(%e7%ac%ac%e4%b8%89%e7%bd%ae%e4%b8%9a%e5%ba%97)+86%22%2c+lon%3d%22null%22%2c+lat%3d%22null%22%7d%2c+discount_money%3d%2237.8%22%2c+is_need_show_alert%3d%220%22%2c+alert_text%3d%22%e4%b8%8b%e5%8d%95%e5%90%a7%22%2c+time_alert%3d%220%22%2c+support_pay_type%3d%22alipay%2cweixin%2ccashpay%22%2c+msg%3d%22%22%2c+support_preferential%3d%5b%5d%7d" wdfield="kw" onmousedown="return c({'fm':'tab','tab':'tieba'})">gotoPay</a>

4、调用商店的商品货架页

h5打开

mdshaction://gotoStore?data=(具体参数)

商店参数的格式为json格式,需要urlencode(如无必要,不再说明),具体找shuming.ai

举例

{storeId=0831135ca8c913e013234560428d1895,city=bj,community_id=cceeea22f74011e4920a52548617546e,is_can_neworder=0}

 

<a href="mdshaction://gotoStore?data=%7bstoreId%3d0831135ca8c913e013234560428d1895%2ccity%3dbj%2ccommunity_id%3dcceeea22f74011e4920a52548617546e%2cis_can_neworder%3d0%7d" wdfield="kw" onmousedown="return c({'fm':'tab','tab':'tieba'})">gotoStore</a>

5、html5界面是否能够分享

h5显示分享按钮

mdshaction://canShare?data=(参数)

参数为"true"表示显示分享按钮,"false"表示不显示分享按钮

举例

<>showShareButton</>
<>hideShareButton</>

6、调用分享功能(h5调客户端以及客户端点击分享按钮调h5)

h5分享功能

mdshaction://share?data=(参数)&sign=(标记)

参数为json格式,与上期分享功能参数差不多,具体找shuming.ai调。

举例

{share_types=["session","timeline","sina"],title="title",share_title="share_title",share_sub_title="share_sub_title",share_url="http://apic.meidaoshenghuo.com/activity/activityindex/anniversary",share_image_url="http://v.xiaobangshou.cc/Public/Uploads/7b81008ab52625f66ec4210c172b3ba9_M",description="description"}
<a href="mdshaction://share?data=%7bshare_types%3d%5b%22session%22%2c%22timeline%22%2c%22sina%22%5d%2ctitle%3d%22title%22%2cshare_title%3d%22share_title%22%2cshare_sub_title%3d%22share_sub_title%22%2cshare_url%3d%22http%3a%2f%2fapic.meidaoshenghuo.com%2factivity%2factivityindex%2fanniversary%22%2cshare_image_url%3d%22http%3a%2f%2fv.xiaobangshou.cc%2fPublic%2fUploads%2f7b81008ab52625f66ec4210c172b3ba9_M%22%2cdescription%3d%22description%22%7d" wdfield="kw" onmousedown="return c({'fm':'tab','tab':'tieba'})">share</a>

 

客户端点击分享按钮

调用  webView.loadUrl("javascript:naGetShareData()");

举例说明

function naGetShareData(){
        window.location.href="mdshaction://share?data=%7bshare_types%3d%5b%22session%22%2c%22timeline%22%2c%22sina%22%5d%2ctitle%3d%22title%22%2cshare_title%3d%22share_title%22%2cshare_sub_title%3d%22share_sub_title%22%2cshare_url%3d%22http%3a%2f%2fapic.meidaoshenghuo.com%2factivity%2factivityindex%2fanniversary%22%2cshare_image_url%3d%22http%3a%2f%2fv.xiaobangshou.cc%2fPublic%2fUploads%2f7b81008ab52625f66ec4210c172b3ba9_M%22%2cdescription%3d%22description%22%7d&sign=kkk";
}

 

分享成功后,客户端调用

webView.loadUrl("javascript:naShareSuccess('"+sign+"')");

举例说明

function naShareSuccess(sign){
        window.location.href="mdshaction://showToast?data=share+success";
}

 

7、添加货架对应商品

h5添加货架商品

mdshaction://addProductInShopCar?data=(参数)&sign=(标记)

参数为json格式,与上期再来一单参数差不多,具体找shuming.ai调。

举例

{rows=[{count="3", product={product_id="56cb02a3cf854940059b813dac69c692", goods_id="af175b1c0aed39dae05a93eda6f60ae3", type="global", title="白心火龙果 1个(约1.2斤) ", pic_url="http://cos.myqcloud.com/1003080/qrhdstore/c5233e858440c7705858b32d92aa9c87", price="8.5", online="1", status="1", sort_id="39a18d21c1e96fba0180b36d3a163b70", sort_name="进口果", top_sort_id="09faee2df155aa058aa4790ae1555afd", top_sort_name="水果", store_id="0831135ca8c913e013234560428d1895"}}, {count="2", product={product_id="5fdb355b00de2848c7ecad2bcccf14e1", goods_id="2b95983da6b4e4c4c996dc90804a8d94", type="global", title="澳洲贵族芒果 1个约600克 ", pic_url="http://cos.myqcloud.com/1003080/qrhdstore/2/b9/2b95983da6b4e4c4c996dc90804a8d94", price="18.9", online="1", status="1", sort_id="39a18d21c1e96fba0180b36d3a163b70", sort_name="进口果", top_sort_id="09faee2df155aa058aa4790ae1555afd", top_sort_name="水果", store_id="0831135ca8c913e013234560428d1895"}}]}

<a href="mdshaction://addProductInShopCar?data=%7brows%3d%5b%7bcount%3d%223%22%2c+product%3d%7bproduct_id%3d%2256cb02a3cf854940059b813dac69c692%22%2c+goods_id%3d%22af175b1c0aed39dae05a93eda6f60ae3%22%2c+type%3d%22global%22%2c+title%3d%22%e7%99%bd%e5%bf%83%e7%81%ab%e9%be%99%e6%9e%9c+1%e4%b8%aa%ef%bc%88%e7%ba%a61.2%e6%96%a4%ef%bc%89+%22%2c+pic_url%3d%22http%3a%2f%2fcos.myqcloud.com%2f1003080%2fqrhdstore%2fc5233e858440c7705858b32d92aa9c87%22%2c+price%3d%228.5%22%2c+online%3d%221%22%2c+status%3d%221%22%2c+sort_id%3d%2239a18d21c1e96fba0180b36d3a163b70%22%2c+sort_name%3d%22%e8%bf%9b%e5%8f%a3%e6%9e%9c%22%2c+top_sort_id%3d%2209faee2df155aa058aa4790ae1555afd%22%2c+top_sort_name%3d%22%e6%b0%b4%e6%9e%9c%22%2c+store_id%3d%220831135ca8c913e013234560428d1895%22%7d%7d%2c+%7bcount%3d%222%22%2c+product%3d%7bproduct_id%3d%225fdb355b00de2848c7ecad2bcccf14e1%22%2c+goods_id%3d%222b95983da6b4e4c4c996dc90804a8d94%22%2c+type%3d%22global%22%2c+title%3d%22%e6%be%b3%e6%b4%b2%e8%b4%b5%e6%97%8f%e8%8a%92%e6%9e%9c+1%e4%b8%aa%e7%ba%a6600%e5%85%8b+%22%2c+pic_url%3d%22http%3a%2f%2fcos.myqcloud.com%2f1003080%2fqrhdstore%2f2%2fb9%2f2b95983da6b4e4c4c996dc90804a8d94%22%2c+price%3d%2218.9%22%2c+online%3d%221%22%2c+status%3d%221%22%2c+sort_id%3d%2239a18d21c1e96fba0180b36d3a163b70%22%2c+sort_name%3d%22%e8%bf%9b%e5%8f%a3%e6%9e%9c%22%2c+top_sort_id%3d%2209faee2df155aa058aa4790ae1555afd%22%2c+top_sort_name%3d%22%e6%b0%b4%e6%9e%9c%22%2c+store_id%3d%220831135ca8c913e013234560428d1895%22%7d%7d%5d%7d&sign=kk" wdfield="kw" onmousedown="return c({'fm':'tab','tab':'tieba'})">addProductInShopCar</a>

客户端成功后

调用  webView.loadUrl("javascript:naAddInShopCarSuccess('"+sign+"')");

举例说明

function naAddInShopCarSuccess(sign){
        window.location.href="mdshaction://showToast?data=add+product+success";
}

8、移除某个商店货架的所有商品

h5移除货架商品

mdshaction://removeShopCar?data=(参数)&sign=(标记)

参数为具体商店的id

举例

<a href="mdshaction://removeShopCar?data=0831135ca8c913e013234560428d1895&sign=kkk" wdfield="kw" onmousedown="return c({'fm':'tab','tab':'tieba'})">removeShopCar</a>

客户端成功后

调用  webView.loadUrl("javascript:naRemoveShopCarSuccess('"+sign+"')");

举例说明

function naRemoveShopCarSuccess(sign){
        window.location.href="mdshaction://showToast?data=remove+success";
}

9、移除某个商店货架的某个商品的某些数量

h5移除货架指定个数的某种商品

mdshaction://delProductFromShopCar?data=(参数)&sign=(标记)

参数为json格式,具体找shuming.ai调。

举例

{storeId=0831135ca8c913e013234560428d1895,productId=5fdb355b00de2848c7ecad2bcccf14e1,count=1}

<a href="mdshaction://delProductFromShopCar?data=%7bstoreId%3d0831135ca8c913e013234560428d1895%2cproductId%3d5fdb355b00de2848c7ecad2bcccf14e1%2ccount%3d1%7d&sign=kkk" wdfield="kw" onmousedown="return c({'fm':'tab','tab':'tieba'})">delProductFromShopCar</a>

客户端成功后

调用  webView.loadUrl("javascript:naDelProductFromShopCarSuccess('"+sign+"')");

举例说明

function naDelProductFromShopCarSuccess(sign){
        window.location.href="mdshaction://showToast?data=remove+product+success";
}

10、显示alert提示窗口

h5显示alert

mdshaction://showAlert?data=(参数)&sign=(标记)

参数为alert的提示文本

举例

<a href="mdshaction://showAlert?data=alerttext&sign=kkk" wdfield="kw" onmousedown="return c({'fm':'tab','tab':'tieba'})">showAlert</a>

客户端确定后

调用  webView.loadUrl("javascript:naClickAlertOk('"+sign+"')");

 客户端取消后

调用  webView.loadUrl("javascript:naClickAlertCancel('"+sign+"')");

举例说明

function naClickAlertOk(sign){
        window.location.href="mdshaction://showToast?data=alert+ok";
}
function naClickAlertCancel(sign){
        window.location.href="mdshaction://showToast?data=alert+cancel";
}

11、显示/取消 loading动效

h5显示loading

mdshaction://showLoading?data=(参数)

参数为loading的提示文本

h5取消loading

mdshaction://hideLoading?data=(参数)

举例

<>showLoading</>
<>hideLoading</>

12、显示提示 Toast

h5显示toast

mdshaction://showToast?data=(参数)

参数为toast的提示文本

举例

<a href="mdshaction://showToast?data=toasttext" wdfield="kw" onmousedown="return c({'fm':'tab','tab':'tieba'})">showToast</a>

13、调用我的优惠券界面

h5调用我的优惠券

mdshaction://gotoMyCoupon

举例

<a href="mdshaction://gotoMyCoupon" wdfield="kw" onmousedown="return c({'fm':'tab','tab':'tieba'})">gotoMyCoupon</a>

14、调用我的退款界面

h5调用我的退款

mdshaction://gotoMyRefund
 

举例

<a href="mdshaction://gotoMyRefund" wdfield="kw" onmousedown="return c({'fm':'tab','tab':'tieba'})">gotoMyRefund</a>

15、调用邀请好友界面

h5调用邀请好友界面

mdshaction://gotoInviteFriends
 

举例

<a href="mdshaction://gotoInviteFriends" wdfield="kw" onmousedown="return c({'fm':'tab','tab':'tieba'})">gotoInviteFriends</a>

16、调用订单详情

h5调用订单详情

mdshaction://gotoOrderDetail?data=(参数)

参数为订单id

举例

<a href="mdshaction://gotoOrderDetail?data=143670851928783777" wdfield="kw" onmousedown="return c({'fm':'tab','tab':'tieba'})">gotoOrderDetail</a>

 

17、获取api版本号

h5获取客户端api的版本号

mdshaction://getVersion

参数为alert的提示文本

举例

<a href="mdshaction://getVersion" wdfield="kw" onmousedown="return c({'fm':'tab','tab':'tieba'})">getVersion</a>

客户端返回api版本号

调用 webView.loadUrl("javascript:naVersion('" apiVersion "')");

举例说明

function naVersion(version){
        window.location.href="mdshaction://showToast?data="+version;
}


© 著作权归作者所有

ShallowMeet
粉丝 20
博文 7
码字总数 4542
作品 0
东城
程序员
私信 提问
【quickhybrid】H5和Native交互原理

前言 架构的核心就是交互,而实现这个交互的前提是弄清楚H5和Native端的交互 本文主要介绍Native端(Android/iOS)和H5端(泛指前端)的交互原理 (之前也整理过类似的文章,本系列重新梳理)...

dailc
02/18
0
0
【quickhybrid】JSBridge的实现

前言 本文介绍框架的核心的实现 由于在最新版本中,已经没有考虑等低版本,因此在选用方案时没有采用方式,而是直接基于实现 交互原理 具体H5和Native的交互原理可以参考前文的 交互原理图如...

dailc
02/18
0
0
Native 与 H5 交互的那些事

Hybrid开发模式目前几乎每家公司都有涉及和使用,这种开发模式兼具良好的Native用户交互体验的优势与WebApp跨平台的优势,而这种 模式,在Android中必然需要WebView作为载体来展示H5内容和进...

oschina
2016/05/03
11.4K
10
zyq5858598/FAutoTest

FAutoTest 一个 H5、小程序自动化测试框架 简介 随着产品业务形态逐渐从 App 延升到微信小程序、微信公众号以及 QQ公众号等,而之前的自动化建设主要是 Native App 为主,全手工测试已无法满...

zyq5858598
05/28
0
0
App开发的新趋势

移动开发这些年,移动开发者人数越来越多,类似的培训公司发展也很快,不过伴随着的是移动应用的需求这几年发展更为旺盛。要开发好的App,纯原生开发肯定是最佳选择。但是这么多年发展,原生...

jonh_felix
2016/06/22
763
7

没有更多内容

加载失败,请刷新页面

加载更多

EDI 电子数据交换全解指南

EDI(Electronic Data Interchange,电子数据交换)技术使得企业与企业(B2B)实现通信自动化,帮助交易伙伴和组织更快更好地完成更多工作,并消除了人工操作带来的错误。从零售商到制造商、物...

EDI知行软件
今天
3
0
CentOS7的LVM动态扩容

# 问题 CentOS7上面的磁盘空间有点紧张,需要扩容。 解决 查询当前磁盘状态 [root@xxx ~]# lsblkNAME MAJ:MIN RM SIZE RO TYPE MOUNTPOINTfd0 2:0 1 4K ...

亚林瓜子
今天
3
0
Kafka 0.8 Producer (0.9以前版本适用)

Kafka旧版本producer由scala编写,0.9以后已经废除 示例代码如下: import kafka.producer.KeyedMessage;import kafka.javaapi.producer.Producer;import kafka.producer.ProducerConfig;......

实时计算
今天
5
0
Giraph源码分析(八)—— 统计每个SuperStep中参与计算的顶点数目

作者|白松 目的:科研中,需要分析在每次迭代过程中参与计算的顶点数目,来进一步优化系统。比如,在SSSP的compute()方法最后一行,都会把当前顶点voteToHalt,即变为InActive状态。所以每次...

数澜科技
今天
6
0
Navicat 快捷键

操作 结果 ctrl+q 打开查询窗口 ctrl+/ 注释sql语句 ctrl+shift +/ 解除注释 ctrl+r 运行查询窗口的sql语句 ctrl+shift+r 只运行选中的sql语句 F6 打开一个mysql命令行窗口 ctrl+l 删除一行 ...

低至一折起
今天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部