素材巴巴 > 程序开发 >

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

程序开发 2023-09-10 17:13:49

交互必传参数

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

75d087ef9a9fb11dc373caaf33adbf7f.png

微信打赏

支付宝打赏

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


标签:

素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。