h5 android底部导航栏,安卓微信端h5 页面增加底部导航栏总结

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 了

父页面代码如下

停车缴费

首页子页面添加控制左箭头颜色代码

注意

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 去掉微信端底部导航栏自己实现一个顶部导航栏也是一个不错的注意

h5 android底部导航栏,安卓微信端h5 页面增加底部导航栏总结相关推荐

微信端H5使用百度地图定位获取当前位置安卓定位不准
微信端H5使用百度地图定位获取当前位置安卓定位不准的问题解决如下: 使用微信端定位,签名方法看微信接口文档: <script type="text/javascript"&g ...
微信端H5的相关问题总结
微信端H5的相关问题总结微信端H5的相关问题总结微信端路由(带[#])跳转问题微信二次分享问题微信二次分享配置详情工具类总结微信端路由(带[#])跳转问题问题描述:在微信端页面路由跳转成 ...
h5页面生成图片分享到微信js_微信端h5页面如何调用分享页面的接口
这次给大家带来微信端h5页面如何调用分享页面的接口,微信端h5页面调用分享页面接口的注意事项有哪些,下面就是实战案例,一起来看一下. 最近公司做了一个给学生投票的H5页面,主要是在微信端使用,需要添加 ...
安卓微信跳转页面、重定向页面空白，ios系统正常、pc正常、安卓浏览器正常。
如果对你有帮助,请顶我.收藏我,如果有天要聊,请评论我. 这个问题是重定向页面地址参数的问题,参数中有".". 由于调用微信支付某个接口要传client_ip,所以在调用服务器接口 ...
Gridsome(四)：完善简易博客网站 (内有 footer 不满一屏时在最底部，超出一屏时在页面最底部解决方案)
footer 置于页面的底部利用绝对定位 /* 文件目录:src/layouts/Defaults.vue */.footer {color: #c5c5c5;position: absolute; ...
微信端H5页面调用分享接口
最近公司做了一个给学生投票的H5页面,主要是在微信端使用,需要添加微信分享功能: 本文章主要是记录调用微信分享接口需要注意的事项: 1.前端用的angular1框架,首先需要在index页面引入微信接 ...
android最卡机型,安卓高端机用两年卡吗
安卓高端机用两年不会卡,因为它的配置很高,处理器性能强,且运行内存最高可以达到12G.安卓高端机和过去相比有了非常明显的进步,配置上有了巨大的提升,以往安卓机运行内存通常2-4G,现在大部分都在6-8 ...
2020年8月Android手机性能榜,安卓中端手机性能排行榜-2020年8月发布
安兔兔近日发布了7月份安卓手机性能排行榜,此榜单为下半部中端手机性能排行. 安卓中端手机性能排行榜图片数据来源:安兔兔就中端机性能而言,长期占据中端机性能排行榜榜首的 OPPOReno3[点此购买] ...
php 安卓实现实时导航,用安卓平板电脑轻松实现GPS实时导航
[IT168 应用]不少朋友都在用Android(安卓)系统的平板电脑,除了上网冲浪.看电影.玩游戏,有些平板电脑还内置GPS功能或可以外接GPS模块,我们可利用平板电脑实现GPS实时导航.位置定位, ...

h5 android底部导航栏,安卓微信端h5 页面增加底部导航栏总结

h5 android底部导航栏,安卓微信端h5 页面增加底部导航栏总结相关推荐

最新文章

热门文章

h5 android底部导航栏,安卓 微信端h5 页面 增加 底部导航栏总结

h5 android底部导航栏,安卓 微信端h5 页面 增加 底部导航栏总结相关推荐

最新文章

热门文章

h5 android底部导航栏,安卓微信端h5 页面增加底部导航栏总结

h5 android底部导航栏,安卓微信端h5 页面增加底部导航栏总结相关推荐