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)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。