android app与h5交互,APP与h5交互一【原创】

交互必传参数

App进入h5页面的时，需要告诉我们他们的身份(在我们的网址后面拼接参数)，也就是说我们需要知道是Android还是Ios访问的页面，现在定义此参数名为platform

1，h5调用APP函数

例如：h5写一个点击事件(跳链接)，app调用，形成的交互，我们在点击的时候，需要传递参数，android和IOS的方法不同

不需要传递参数的时候传递空值，例如：

if(platform==’Ios’) {

window.webkit.messageHandlers.pushView.postMessage(‘’);//ios

}else {

AndroidFunction.pushView(‘’);//Android

}

有参数时，例如：

var url=’’;//就是下一个网址的链接

var data={title:title,url:url};//ios需要json数组

if(platform==’Ios’) {

window.webkit.messageHandlers.pushView.postMessage(data);//ios

}else {

AndroidFunction.pushView(title,url);//Android

}

pushView//是app的函数名，其余都是固定的

注意事项

如果我们传递的参数url(跳页面的路由)上面有汉字的话。Ios会报错，以下代码转译成url编码，什么样的编码都是可以，只要浏览器可以识别

var url=encodeURIComponent(单独的汉字或者整个的网址都可以);

2，app调用h5函数

例如：app在页面上执行了一个事件，成功之后，需要我们刷新页面

H5在页面上定义一个函数

data//是app传递给h5的参数

Function app(data){

Location.reload();

}

3，如果一个模块的首页是h5写的，app需在页面上添加下拉刷新

4，点击跳模块的时候，app重载一下h5页面，保证页面数据是最新的

页面兼容性问题：

1，弹窗带输入框的(h5页面)，如果是底部的弹窗，app输入法的不会把弹窗顶上去，导致弹窗部分不可见(可让弹窗出来的时候背景可以滚动，这样就不会遮挡输入框了)

2，低版本的安卓手机不支持css3属性，所以在写交互的页面的时候不要使用css3属性

3，页面中如果是app的下拉刷新(页面是h5),页面这种比如有省市区选择的插件(弹窗)，

这样h5在写弹窗弹出的时候，需要设置scrollTop为一个固定的值(大于零)

其他注意的问题

1，app使用h5页面的时候，app要写一个原生的无网络页面来替代h5的没网状况下的网页

转载时请注明出处及相应链接，本文永久地址：https://blog.yayuanzi.com/23278.html

微信打赏

支付宝打赏

感谢您对作者Niki的打赏，我们会更加努力！    如果您想成为作者，请点我