最新消息:文章中包含代码时,请遵守代码高亮规范!

APP与h5交互一【原创】

原创文章 Niki 246浏览 0评论

交互必传参数
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


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

您必须 登录 才能发表评论!