安卓 微信端h5 頁面 增加 底部導航欄總結
阿新 • • 發佈：2018-12-14
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
父頁面程式碼如下
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="format-detection" content="telephone=no" /> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="Cache-Control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>停車繳費</title> <link rel="stylesheet" href="${contextPath}/resources/css/local/weChat/reform/base.css"> <link rel="stylesheet" href="${contextPath}/resources/css/local/weChat/reform/index.css"> <style> </style> <script type="text/javascript" src="${contextPath}/resources/js/lib/jquery/jquery_1.9.min.js"></script> <script type="text/javascript" src="${contextPath}/resources/js/local/common/base.js"></script> <!-- <script type="text/javascript" src="${contextPath}/resources/js/local/weChat/reform/pull_to_refresh.js"></script> --> <script type="text/javascript" src="${contextPath}/resources/js/local/weChat/reform/tools.js"></script> </head> <body> <iframe id="main_iframe" frameborder="0"></iframe> <div class="footer-nav"> <span class="arrow arrow-icon-left"></span> <span class="arrow arrow-icon-right"></span> </div> </body> <script> var store = { setItem: function (name, value) { value = JSON.stringify(value); window.sessionStorage.setItem(name, value); }, getItem: function (name) { return JSON.parse(window.sessionStorage.getItem(name)); } }; $(function (){ var openid = getOpenId('openid'); // 處理 重新整理 不保持當前頁面問題 var iframeSrc = "/weixin/reform/index/homepage/init/sub"; iframeSrc = store.getItem('sub_src') || iframeSrc; // 注意這裡使用的是 sessionStorage 來儲存， 不然會有快取問題 var sonWin = document.getElementsByTagName("iframe")[0].contentWindow, sonDoc = sonWin.document; iframeSrc && $('#main_iframe').attr('src',iframeSrc); $('#main_iframe').load(function () { store.setItem('sub_src', sonWin.location.href); }); var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g var isWeixin = u.toLowerCase().match(/MicroMessenger/i) == 'micromessenger'; if (!(isAndroid && isWeixin)) { // ios 微信 則通過 父頁面進行跳轉， 這樣 ios 微信就可以 產生 導航條 window.location.href = iframeSrc; } $('.arrow-icon-left').click(function () { window.history.back(); }); $('.arrow-icon-right').click(function () { window.history.forward(); }); }); </script> </html>
首頁子頁面新增 控制 左箭頭顏色程式碼
<script>
window.addEventListener('pageshow', function () {
window.parent.$('.footer-nav').children('.arrow-icon-left').css('opacity', 0.4);
});
window.addEventListener('pagehide', function () {
window.parent.$('.footer-nav').children('.arrow-icon-left').css('opacity', 1);
});
</script>