閑言碎語
看到這樣一個需求呜舒，如果你和我一樣心里是WTF，那么請繼續(xù)往下讀昵慌。如果幸運的你使用了nui-app或者HTML5+，那么請你移步Dcloud淮蜈。如果說項目源于生活斋攀，那么產(chǎn)品經(jīng)理一定是生活中做白日夢的那個（哈哈哈，看到這篇文章的產(chǎn)品經(jīng)理千萬別懟我）梧田，開個玩笑淳蔼，懟歸懟，該實現(xiàn)的還是要實現(xiàn)裁眯。
這里才是正文
大部分沉浸式設計分為兩種：一種圖片通頂鹉梨，設置狀態(tài)欄透明；另一種穿稳，如果標題欄背景為純色存皂，那么可以設置狀態(tài)欄背景和標題欄一致，達到沉浸式的效果逢艘。那么旦袋，我們開發(fā)的是Vue WebApp項目，每個頁面是否為沉浸式它改，標題欄與狀態(tài)欄顏色是否一致疤孕，都應該由vue告訴原生，然后原生進行相應的設置央拖，然后大功告成胰柑。
- 三個問題
vue通過什么方式告訴原生？在什么地方告訴原生爬泥？參數(shù)如何傳遞柬讨？ - 解決問題
使用JSBridge進行vue與原生的交互；
在vue-route的導航守衛(wèi)中發(fā)送給原生袍啡；
將參數(shù)塞進vue-route的路由列表中踩官。
- 這里就不重復百度中的東西了，自行封裝一個JSBridge的方法（Ctrl+c Ctrl+v）境输。
- vue-route的導航守衛(wèi)蔗牡，這里使用全局前置守衛(wèi)beforeEach,傳送門https://router.vuejs.org/zh/guide/advanced/navigation-guards.html（我是有多懶颖系。。辩越。）
- 創(chuàng)建VueRoute實例嘁扼，配置路由參數(shù)的時候，根據(jù)設計要求黔攒，將是否為沉浸式趁啸，以及狀態(tài)欄顏色作為參數(shù)寫入meta字段中。
一切準備就緒督惰，開擼代碼（以本身項目為例）：
route.list.js
import testImmersion from './test/testImmersion';
export default function routes() {
return [
{path: '/testImmersion', component: testImmersion.App, meta: { isImmersion: true, color: '#ffffff'} }
]
}
route.js
.....省略
//這里將封裝好的JSBridge導入
import JSBridge from './lib/JSBridge.js'
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
//第一個參數(shù)：和原生端約定好的方法名不傅，vue端進行調(diào)用。
//第二個參數(shù)：將配置在路由表中的meta字段中的參數(shù)傳給原生赏胚。
//第三個參數(shù)：data為原生的回調(diào)方法
//next()方法可以在data回調(diào)中調(diào)用访娶，也可以直接和callHandler同步調(diào)用，特殊需求特殊對待
JSBridge.callHandler('setImmersion', {isImmersion: to.meta.isImmersion, color: to.meta.color}, (data) => {
next();
})
})
寫到這里觉阅，就可以實現(xiàn)沉浸式狀態(tài)欄了崖疤，也用在了自己項目中，以此記錄典勇！
