Aphorism
grow in errors
overview
最近在写一个 移动端的 jsp 项目， 应项目需求须在安卓机器上实现一个 ios 微信h5页面 底部的 导航条
想到的实现方案：
通过jsp 写一个 父页面然后 每个子页面通过 include 底部导航条， (android 和 ios 客户端不好区分且导航条会有闪烁效果)
通过 js 在每个页面中 底部添加一个导航条(每个页面的加载得判断客户端类型且跳转和刷新页面导航条会闪烁)
经过一段时间思考， 在我们写 vue 的时候， 我们可以通过父组件来实现 不会闪烁的导航条 ，但是我们是 jsp 页面。 功夫不负有心人， 可以通过 iframe 来实现子组件(页面) ， 我们将导航条放在父页面中， 且 父页面的职责就是 导航条的样式和 逻辑 将导航条和 子页面 分离开。
使用 iframe 优点如下：
解决了 跳转刷新导航条问题
子页面和导航条的 分离开来， (其实是为了以后维护， 不然去掉此功能的时候还得每个页面操作)
在弹层提示的时候 导航条不会被遮盖
面对的问题：
刷新页面的时候， iframe 页面会跳转到 src 中的对应路径(不是当前的 url)
地址栏灭有 url 变更， ios 就不会产生 底部导航条(可以通过这种方式去除 微信h5页面的导航条)
解决问题：
在父页面中 通过 sessionStorage 读取src指向的 url， 在 iframe load 的时候往sessionStorage 中写 url (注意一定要使用 session 而不是 local)a
判断为 ios 设备的时候 就直接 parent.location.href … 不经过 iframe 就ok 了
d
父页面代码如下
停车缴费
首页子页面添加 控制 左箭头颜色代码
注意
1. 一定要注意， 如果项目中有 jsapi 支付调用的时候 授权支付目录 那么就存在两个：
1.1. 一个是 ios 微信正常支付的授权目录
1.2. 一个是 android 的父页面授权目录
2. 微信 JsApi 在 父window中
2.1 在安卓机器上测试结果：
alert(typeof WeiXinJsBridge) ;// undefined
alert(typeof parent.WeiXinJsBridge); // [object]
2.2 在 微信开发这个工具中， 无论子窗口还是 父窗口都能正常读取 WeiXinJsBridge
2.3 解决方法
子 window 中的需要使用 WeiXinJsBridge的支付页面
window.WeiXinJsBridge = window.WeiXinJsBridge || window.parent.WeiXinBridge;
通过 iframe 去掉微信端底部导航栏自己实现一个顶部导航栏也是一个不错的注意
