vue移动端深坑之微信浏览器相关优化方案

admin管理员组

文章数量:1337119

       目前微信浏览器对前端还是比较友好的，最近正在搞的一个项目，同一个页面在iOS的夸克浏览器中页面会因为软键盘的弹出莫名其妙的移位，因为用了fixed布局，目前还没有解决，等有时间再优化适配吧毕竟微信浏览器没有发现这个问题，现在都想强制用户使用微信浏览器了，相对于dan疼各种移动端浏览器只要考虑iOS和安卓两个平台适配就好了。主要记录一下微信中开发的坑和解决方案。

微信浏览器坑一：针对无法取消的title bar的优化

虽说顶部这个titlebar经过几次更新之后确实挺好看了，但是也限制了开发者自己的页面加title-bar的自由，如果你的app有自己的titlebar，那么在微信中打开将会奇丑无比，无论你的titlebar设计的有多好。所以就要动态加载项目本身的titlebar，在微信里打开的时候隐藏，别的浏览器打开的时候可以显示（目前的浏览器基本都有全屏模式）。

1.判断浏览器

在main.js加入判断并标记浏览器的代码。

var globalConfig = {
  platform: 'web' // 全局配置项，标记项目运行平台，默认web
}
var userAgent = navigator.userAgent.toLowerCase();
var isWeixin = userAgent.indexOf('micromessenger') != -1;
if (isWeixin) {
  globalConfig.platform = 'weixin'; // 如果是微信浏览器平台改为weixin
}

2.vue组件全局访问浏览器标记并动态加载titlebar

不想在每个组件中都获取一遍globalConfig，所以要定义一个全局状态，这里用vux比较麻烦，所以直接用全局混入Vue.mixin来定义浏览器标记。

Vue.mixin({
  data() {
    return {
      screenWidth: document.documentElement.clientWidth, // 屏幕宽度
      screenHeight: document.documentElement.clientHeight, // 屏幕高度
      platform: window.globalConfig.platform //平台标示
    }
  },
  methods: {
    go(_name) { // 定义简单的全局跳转方法
      this.$router.replace({
        name: _name
      })
    }
  }
});

这样在项目的titlebar中加一个v-if判断一下即可动态加载titlebar，如果你的titlebar中有功能性按钮，可以想办法给他弄到页面里，然后按钮加v-if="platform=='weixin'"即可。

<mu-appbar v-if="platform!='weixin'"></mu-appbar>

3.建立路由守卫更改微信titlebar 的标题（title）

router.beforeEach((to, from, next) => {
  /* 路由发生变化修改页面title */
  if (to.meta.title) {
    document.title = to.meta.title
  }
  next();
});

在路由配置中加meta

export default [{
  name: 'ProductList',
  path: '/Home/ProductList',
  meta: {
    title: '商品管理'
  },
  component(resolve) {
    require.ensure([], () => resolve(require('../components/product/ProductList.vue')), 'ProductList')
  }
}]

4.关于页面颜色优化

微信更新之后titlebar的颜色也变成浅色了，如果项目中有底部导航栏，建议颜色设置为微信的titlebar颜色。ios的颜色代码为：#f8f8f8，颜色一致后真个页面就融为一体看上去很和谐了。

至此关于适应微信titlebar的优化目前就想到这么多，以后有了再补充。

微信浏览器坑二：iOS下面的前进/后退栏

这个问题是针对iOS的微信浏览器，不得不说这个设计太过于脑残了，不仅破坏了页面整体，还会莫名其妙上滑消失下滑显示，操作起来简直了。咱也不知道设计师咋想的，咱也不敢问，只能想办法干掉这样子才能满足自己的审美强迫症。

它这个后退主要是帮你记录一个history，由于vue是单页应用大不了我们不记录history，后退操作强行跳转路由，只要把this.$router.push()改成this.$router.replace()即可解决，目前还没有发现什么问题，但是心里还是没底的，碰见问题再说。

参考上面?全局定义的简单跳转方法go();

以后碰见坑再记录吧。最后放一张简洁的针对微信浏览器优化的页面。

本文标签： 深坑浏览器方案Vue