程序博客网 > 珠宝设计软件

native 和 H5 的交互

来源：互联网发布：珠宝设计软件编辑：程序博客网时间：2024/05/17 07:37

源生代码和H5的交互

android：

1：默认的事情：

Android 通过内置的UI控件WebView来加载网页。
网页是用一个网络地址来表示的：
其整个使用方法很简单如下：(android不关心实际的html5代码)

String mUrl ="http://www.baidu.com";    //代表了某个网页的网址
       WebView mWebView = newWebView();    //用来家在网址的UI控件
       mWebView.loadUrl(mUrl);                         //加载指定网址

2：Html5 调用 android 本地方法

2.1 Html5 调用 android 本地方法一

a: android 本地将被Html5调用的方法都定义在一个Object中。【假定这个Object 叫 JavaScriptInterface1 】（暴露给html5的方法）

b：WebView通过addJavascriptInterface(new JavaScriptInterface1(), "robot");
将定义了回调方法的对象注入WebView中，这样html5就能通过注入的这个对象调用本地方法。【注入的对象的引用叫 “robot”】

c: 在html5中，如下书写，就能调用android本地的方法

<p>
<button onclick="robot. callAndroidMethod()">点击我调用android 方法</button>
</p>

<p>
<button onclick="interface.callFromJSBasicDataType(100,100,'a',true)">callnative method to test basic datatype through javascriptInterface</button>
</p>

d：要是需要带参数交互那么android 本地代码和 JS中定义的方法可以如下书写：

//------android 代码示例------
     public voidcallFromJSBasicDataType(int x,float y,char c,boolean result){
            String str ="-"+(x+1)+"-"+(y+1)+"-"+c+"-"+result;
        }

public void callAndroidMethod(){
AppUtils.showDialog();
}

//------JS配合上面的android示例如下------
<p>
<buttononclick="robot.callFromJSBasicDataType(100,100,'a',true)">点击我调用android 方法</button>
</p>

2.2 Html5 调用 android 本地方法二

在网页跳转的时候【必须有跳转】，截获跳转地址Url，分析Url从而得知意图。

android 本地通过自定义WebView中使用到的WebClent对象，从而截获跳转地址：

private class CustomWebViewClient extendsWebViewClient {
//重写webclient，从而截获跳转的地址
public boolean shouldOverrideUrlLoading(WebView view, String url) {
//注意，下面的判断就是意图分析
if (url.contains("www.mystore.com.cn")) {
String msg = url;
AppUtils.showAlertDialog(Html5CallNativeFromSelfWebClient.this,msg);
return true;
}
return false;
}
}

3 android 本地方法调用html5

android主要是通过WebView的webView.loadUrl("JavaScript:xxmethod();"); 来调用嵌入html5中的方法。例子如下：

a:html5 中定义一个方法，名叫 "noParamFunction()"

<html>
<head>
<script>
function noParamFunction() {
var component = document.getElementById("noparam_ta");
component.value = component.value + "native button clicked,call js with noparams\n";
}
</script>
</head>
</html>

b: 在android本地：想调用javascript中的noParamFunction方法，如下即可

webView.loadUrl("javascript:noParamFunction();");

4: 再往下就是URL中附加的私有协议了

后端给前端发送数据的约定

1:后端给前端发送的数据整个就是一个网页地址 + ？#myrainbowparams#+ json串 +#myrainbowparams# 的组合结构。
（比如：
http://mystore.com.cn/v1/page/goods_info?#myrainbowprams#{"clientaction":"1","actionid": "100","params": {"bugoodsid": "1000"}}#myrainbowprams#

2：注意：
只有满足下面2个条件前端才会根acitonid 去执行动作
a：h5给的数据中包含#myrainbowprams#
b: clientaction = 1

3:参数说明

参数

必选

类型及范围

说明

备注

clientaction

TRUE

string

是否需要app自己处理H5给的数据。" 0->不需要处理" ; "1-->需要处理"

actionid

true

string

clientaction为0 actionid 填为-1；clientaction为1 actionid填为正常的编号

params

TRUE

jsonobject

clientaction为0 params 填为null ; clientaction为1 params 正常填写

登录：可选

h5给前段的整个数据示例如下：

http://mystore.com.cn/v1/page/goods_info?#myrainbowprams#{
"clientaction": "1",
"actionid": "100",
"params": {
"bugoodsid": "1000"
}
}
#myrainbowprams#

对上面的这些信息前段接收到之后理解如下：
1：前端需要自己处理，而不是简单的利用webkit引擎去进行页面跳转
2：前端需要执行编号为100的动作
3：执行编号为100的动作所需要的参数在params中，有 bugoodsid , 有url 等。。请按照需求取。

0 0

珠宝设计软件

珠宝设计软件

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子我的字写得很丑怎么办二年级学生不会造句怎么办 w10下载种子文件失败怎么办宝宝挂水手肿了怎么办 lol有英雄皮肤没英雄怎么办 qq聊天图标粉色钥匙怎么办和舍友相处不来怎么办被舍友偷了东西怎么办体育生没过线怎么办户主去世房产不能过户怎么办苍蝇飞到嘴唇上怎么办苍蝇不小心碰到嘴唇了怎么办苍蝇老往身上飞怎么办单位乒乓球比赛有领导参加怎么办意外看到别人打野战怎么办骨盆低想顺产要怎么办右胯比左胯突出怎么办一岁宝宝骨盆不对称怎么办入盆了又出来了怎么办大腿前突小腿后怎么办英语不好高二了怎么办断奶后又复吸怎么办招联金融综合评定不足怎么办 git本地分支比远程高怎么办娃儿上嘴唇里面破了怎么办错过了各大招聘怎么办优秀团员申请表没有获奖情况怎么办大学生毕业学生登记表涂改了怎么办 c语言挂科了怎么办吸入腐蚀性气体鼻子流血了怎么办腰劳损痛的厉害怎么办两个宝宝斜颈左边力量差怎么办姿势不正确引起的习惯性斜颈怎么办一岁宝宝有点斜颈怎么办六个月宝宝有点斜颈怎么办 5月宝宝有点斜颈怎么办半岁宝宝头偏怎么办肌性斜颈成年后怎么办 5个月孩子脖子歪怎么办宝宝一岁多头歪怎么办四个月宝宝歪脖子怎么办