Vue WebApp适配Ios和Android实现沉浸式状态栏

闲言碎语

看到这样一个需求，如果你和我一样心里是WTF，那么请继续往下读。如果幸运的你使用了nui-app或者HTML5+，那么请你移步Dcloud。如果说项目源于生活，那么产品经理一定是生活中做白日梦的那个（哈哈哈，看到这篇文章的产品经理千万别怼我），开个玩笑，怼归怼，该实现的还是要实现。

这里才是正文

大部分沉浸式设计分为两种：一种图片通顶，设置状态栏透明；另一种，如果标题栏背景为纯色，那么可以设置状态栏背景和标题栏一致，达到沉浸式的效果。那么，我们开发的是Vue WebApp项目，每个页面是否为沉浸式，标题栏与状态栏颜色是否一致，都应该由vue告诉原生，然后原生进行相应的设置，然后大功告成。

• 三个问题
  vue通过什么方式告诉原生？在什么地方告诉原生？参数如何传递？
• 解决问题
  使用JSBridge进行vue与原生的交互；
  在vue-route的导航守卫中发送给原生；
  将参数塞进vue-route的路由列表中。

1. 这里就不重复百度中的东西了，自行封装一个JSBridge的方法（Ctrl+c Ctrl+v）。
2. vue-route的导航守卫，这里使用全局前置守卫beforeEach,传送门https://router.vuejs.org/zh/guide/advanced/navigation-guards.html（我是有多懒。。。）
3. 创建VueRoute实例，配置路由参数的时候，根据设计要求，将是否为沉浸式，以及状态栏颜色作为参数写入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) => {
  //第一个参数：和原生端约定好的方法名，vue端进行调用。
  //第二个参数：将配置在路由表中的meta字段中的参数传给原生。
  //第三个参数：data为原生的回调方法
  //next()方法可以在data回调中调用，也可以直接和callHandler同步调用，特殊需求特殊对待
  JSBridge.callHandler('setImmersion', {isImmersion: to.meta.isImmersion, color: to.meta.color}, (data) => {
    next();
  })
})

写到这里，就可以实现沉浸式状态栏了，也用在了自己项目中，以此记录！