vue搭建的h5页面跟app（安卓、IOS）交互

关于h5交互

        首先这也是我第一次做关于关于跟app交互的东西，也是摸撞了很多坑，首先做交互在h5页面是看不到输出的，h5可以给弹框alert，弹出内容会在手机上显示，不要再一直问为什么h5页面看不到数据，拿不到数据

        首先，你需要知道类型判断，判断来源为安卓还是ios

判断来源类型

---

先说一下我的功能需求，app点击图片进入h5页面，h5点击商品进入app的详情页，  h5进app详情需要携带参数，h5页面返回交互要退回app首页

这是h5页面的代码

返回键按钮方法判定：如果是手机端来源的话，判定是安卓还是ios，否则就是h5页面的返回，返回上一页

        手机端来源，安卓端  window.android.goBack();  android是安卓定义的名字，goBack（）是你调用他们的方法，返回他们首页

                                             window.android.homeGoodsDetails(goods_id);     homeGoodsDetails（）括号内是给他们传递的参数

                                 IOS端    window.webkit.messageHandlers.goBack.postMessage();

                                                window.webkit.messageHandlers.homeGoodsDetails.postMessage({  goods_id:goods_id  });

        

---

如果，app那边需要携带token值给你获取登录的话，用window.location.href就能获取到，在created里alert就能拿到，在app内部会有弹窗提醒，

/*截取url参数*/

getQueryString (name) {

            return decodeURIComponent((new RegExp('[?|&]' + name +'=' +'([^&;]+?)(&|#|;|$)').exec(location.href) || [,""])[1].replace(/\+/g,'%20')) ||null

},

在header头部替换原始vuex里的数据。