Aphorism

grow in errors

overview

最近在寫(xiě)一個(gè) 移動(dòng)端的 jsp 項(xiàng)目， 應(yīng)項(xiàng)目需求須在安卓機(jī)器上實(shí)現(xiàn)一個(gè) ios 微信h5頁(yè)面 底部的 導(dǎo)航條

想到的實(shí)現(xiàn)方案：

通過(guò)jsp 寫(xiě)一個(gè) 父頁(yè)面然后 每個(gè)子頁(yè)面通過(guò) include 底部導(dǎo)航條， (android 和 ios 客戶(hù)端不好區(qū)分且導(dǎo)航條會(huì)有閃爍效果)

通過(guò) js 在每個(gè)頁(yè)面中 底部添加一個(gè)導(dǎo)航條(每個(gè)頁(yè)面的加載得判斷客戶(hù)端類(lèi)型且跳轉(zhuǎn)和刷新頁(yè)面導(dǎo)航條會(huì)閃爍)

經(jīng)過(guò)一段時(shí)間思考， 在我們寫(xiě) vue 的時(shí)候， 我們可以通過(guò)父組件來(lái)實(shí)現(xiàn) 不會(huì)閃爍的導(dǎo)航條 ，但是我們是 jsp 頁(yè)面。 功夫不負(fù)有心人， 可以通過(guò) iframe 來(lái)實(shí)現(xiàn)子組件(頁(yè)面) ， 我們將導(dǎo)航條放在父頁(yè)面中， 且 父頁(yè)面的職責(zé)就是 導(dǎo)航條的樣式和 邏輯 將導(dǎo)航條和 子頁(yè)面 分離開(kāi)。

使用 iframe 優(yōu)點(diǎn)如下：

解決了 跳轉(zhuǎn)刷新導(dǎo)航條問(wèn)題

子頁(yè)面和導(dǎo)航條的 分離開(kāi)來(lái)， (其實(shí)是為了以后維護(hù)， 不然去掉此功能的時(shí)候還得每個(gè)頁(yè)面操作)

在彈層提示的時(shí)候 導(dǎo)航條不會(huì)被遮蓋

面對(duì)的問(wèn)題：

刷新頁(yè)面的時(shí)候， iframe 頁(yè)面會(huì)跳轉(zhuǎn)到 src 中的對(duì)應(yīng)路徑(不是當(dāng)前的 url)

地址欄滅有 url 變更， ios 就不會(huì)產(chǎn)生 底部導(dǎo)航條(可以通過(guò)這種方式去除 微信h5頁(yè)面的導(dǎo)航條)

解決問(wèn)題：

在父頁(yè)面中 通過(guò) sessionStorage 讀取src指向的 url， 在 iframe load 的時(shí)候往sessionStorage 中寫(xiě) url (注意一定要使用 session 而不是 local)a

判斷為 ios 設(shè)備的時(shí)候 就直接 parent.location.href … 不經(jīng)過(guò) iframe 就ok 了

d

父頁(yè)面代碼如下

停車(chē)?yán)U費(fèi)

首頁(yè)子頁(yè)面添加 控制 左箭頭顏色代碼

注意

1. 一定要注意， 如果項(xiàng)目中有 jsapi 支付調(diào)用的時(shí)候 授權(quán)支付目錄 那么就存在兩個(gè)：

1.1. 一個(gè)是 ios 微信正常支付的授權(quán)目錄

1.2. 一個(gè)是 android 的父頁(yè)面授權(quán)目錄

2. 微信 JsApi 在 父window中

2.1 在安卓機(jī)器上測(cè)試結(jié)果：

alert(typeof WeiXinJsBridge) ;// undefined

alert(typeof parent.WeiXinJsBridge); // [object]

2.2 在 微信開(kāi)發(fā)這個(gè)工具中， 無(wú)論子窗口還是 父窗口都能正常讀取 WeiXinJsBridge

2.3 解決方法

子 window 中的需要使用 WeiXinJsBridge的支付頁(yè)面

window.WeiXinJsBridge = window.WeiXinJsBridge || window.parent.WeiXinBridge;

通過(guò) iframe 去掉微信端底部導(dǎo)航欄自己實(shí)現(xiàn)一個(gè)頂部導(dǎo)航欄也是一個(gè)不錯(cuò)的注意

總結(jié)

以上是生活随笔為你收集整理的h5 android底部导航栏,安卓 微信端h5 页面 增加 底部导航栏总结的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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