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

       目前微信浏览器对前端还是比较友好的,最近正在搞的一个项目,同一个页面在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'"即可。

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移动端深坑之微信浏览器相关优化方案_第1张图片

 

你可能感兴趣的:(前端开发)