h5 android底部导航栏,安卓 微信端h5 页面 增加 底部导航栏总结
Aphorism
grow in errors
overview
最近在寫一個 移動端的 jsp 項目, 應(yīng)項目需求須在安卓機器上實現(xiàn)一個 ios 微信h5頁面 底部的 導(dǎo)航條
想到的實現(xiàn)方案:
通過jsp 寫一個 父頁面然后 每個子頁面通過 include 底部導(dǎo)航條, (android 和 ios 客戶端不好區(qū)分且導(dǎo)航條會有閃爍效果)
通過 js 在每個頁面中 底部添加一個導(dǎo)航條(每個頁面的加載得判斷客戶端類型且跳轉(zhuǎn)和刷新頁面導(dǎo)航條會閃爍)
經(jīng)過一段時間思考, 在我們寫 vue 的時候, 我們可以通過父組件來實現(xiàn) 不會閃爍的導(dǎo)航條 ,但是我們是 jsp 頁面。 功夫不負有心人, 可以通過 iframe 來實現(xiàn)子組件(頁面) , 我們將導(dǎo)航條放在父頁面中, 且 父頁面的職責(zé)就是 導(dǎo)航條的樣式和 邏輯 將導(dǎo)航條和 子頁面 分離開。
使用 iframe 優(yōu)點如下:
解決了 跳轉(zhuǎn)刷新導(dǎo)航條問題
子頁面和導(dǎo)航條的 分離開來, (其實是為了以后維護, 不然去掉此功能的時候還得每個頁面操作)
在彈層提示的時候 導(dǎo)航條不會被遮蓋
面對的問題:
刷新頁面的時候, iframe 頁面會跳轉(zhuǎn)到 src 中的對應(yīng)路徑(不是當(dāng)前的 url)
地址欄滅有 url 變更, ios 就不會產(chǎn)生 底部導(dǎo)航條(可以通過這種方式去除 微信h5頁面的導(dǎo)航條)
解決問題:
在父頁面中 通過 sessionStorage 讀取src指向的 url, 在 iframe load 的時候往sessionStorage 中寫 url (注意一定要使用 session 而不是 local)a
判斷為 ios 設(shè)備的時候 就直接 parent.location.href … 不經(jīng)過 iframe 就ok 了
d
父頁面代碼如下
停車繳費
首頁子頁面添加 控制 左箭頭顏色代碼
注意
1. 一定要注意, 如果項目中有 jsapi 支付調(diào)用的時候 授權(quán)支付目錄 那么就存在兩個:
1.1. 一個是 ios 微信正常支付的授權(quán)目錄
1.2. 一個是 android 的父頁面授權(quán)目錄
2. 微信 JsApi 在 父window中
2.1 在安卓機器上測試結(jié)果:
alert(typeof WeiXinJsBridge) ;// undefined
alert(typeof parent.WeiXinJsBridge); // [object]
2.2 在 微信開發(fā)這個工具中, 無論子窗口還是 父窗口都能正常讀取 WeiXinJsBridge
2.3 解決方法
子 window 中的需要使用 WeiXinJsBridge的支付頁面
window.WeiXinJsBridge = window.WeiXinJsBridge || window.parent.WeiXinBridge;
通過 iframe 去掉微信端底部導(dǎo)航欄自己實現(xiàn)一個頂部導(dǎo)航欄也是一個不錯的注意
總結(jié)
以上是生活随笔為你收集整理的h5 android底部导航栏,安卓 微信端h5 页面 增加 底部导航栏总结的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: iphone版 天行skyline_A
- 下一篇: Java 实现多线程的四种方式