h5页面ios和安卓交互的问题解决

h5页面与ios和安卓交互的问题解决

  • 工作第二个星期遇到第一次h5页面与移动端链接的问题,遇到很多意想不到的意外,解决之后记录下来以便查看
    • 传递参数
    • 安卓端window.location.href无效

工作第二个星期遇到第一次h5页面与移动端链接的问题,遇到很多意想不到的意外,解决之后记录下来以便查看

这个项目中我负责制作商城模块,完成后嵌入到app中,下面是工作过程中遇到的几个问题

传递参数

在我的项目中,商城的首页需要获得在商城外app用户的user_id和city_name,才能正确请求商城数据;而且在每页的数据都需要这两个参数请求,本着简单的原则,和移动端大哥确定了规范:

  1. 他在跳转到商城首页时的url中传递user_id和city_name,我接收这两个参数并保存在浏览器内存中(在移动端的h5页面内部可以正常使用浏览器内存sessionStorage等,方便在商城模块的其他页面使用这两条关键参数)
    代码片段(getUrl为自己封装的获取url中参数的方法)
//获取用户id
   	    sessionStorage.setItem("user_id", getUrl(url).user_id)
   		sessionStorage.setItem("city_name", getUrl(url).city_name) 
  1. 在支付时需要跳转到原生的支付,简单的解决办法是通过window.location.href跳转一下本页面并附带上支付所需要的参数,移动端进行url拦截获取参数
    代码片段
window.location.href = "qr_ding_dan.html?order_id="+res.data+ "&pay_type=" + that.zf_xz_show+"&usefor=3"

安卓端window.location.href无效

1.非常之坑,相同的代码ios正常运行,但安卓端跳转没有反应;换个几种跳转办法还是无效
但是仔细观察发现只要跳转时附带参数便可以正常跳转,因此便可以在每个没有参数的跳转后添加一个无用参数方便跳转,使用时最好和移动端人员沟通约定好一套规则
代码片段

window.location.href = "dz_xz.html?skip="+Math.floor(Math.random())

这样后面传递一个随机数就可以正常跳转

以上就是我遇到的问题以及简单的解决办法,不足之处请指正

你可能感兴趣的:(前端,ios,android,html5)