教你在微信中给Vue单页应用设置标题

前言

由于Vue React Angular等框架出来的应用都是SPA(single-page-application),所以就没有所谓的页面都是router

而网页的标题随着路由的改变而改变也就成了一个(伪)需求

问题

在iOS的微信中一个SPA应用想要改变微信顶部导航栏的标题使用document.title = xxx来改变网页标题是无效的

原因大致就是因为在微信中webview只加载网页标题一次动态改变是无效的除非都以新页面打开(那SPA的用户体验有什么卵用吗)

解决方案请直接看后记

既然js动态改变不能生效那为什么不尝试在路由切换完成后静默加载一个空iframe动态设置title呢?
这也是加载页面的一种方式不是吗?

代码 Github

file: utils/setWechatTitle.js

module.exports = function (title) {
  document.title = title
  var mobile = navigator.userAgent.toLowerCase()
  if (/iphone|ipad|ipod/.test(mobile)) {
    var iframe = document.createElement('iframe')
    iframe.style.display = 'none'
    // 替换成站标favicon路径或者任意存在的较小的图片即可
    iframe.setAttribute('src', '/favicon.ico')
    var iframeCallback = function () {
      setTimeout(function () {
        iframe.removeEventListener('load', iframeCallback)
        document.body.removeChild(iframe)
      }, 0)
    }
    iframe.addEventListener('load', iframeCallback)
    document.body.appendChild(iframe)
  }
}

file: main.js

import Vue from 'vue'
import App from './App'
import Router from 'vue-router'
import setWechatTitle from './utils/setWechatTitle.js'
Vue.use(Router)
var router = new Router()
// 这里用到的API是Vue-router1.x的对应Vuejs1.x
// 请注意根据不同版本的API去修改代码 包括下方的 afterEach
router.map({
  home: {
    name: 'home',
    title: '首页',
    component: require('./views/Home.vue')
  },
  order: {
    name: 'order',
    title: '订单',
    component: require('./views/Order.vue')
  },
  UCenter: {
    name: 'UCenter',
    title: '用户中心',
    component: require('./views/UCenter.vue')
  }
})
router.afterEach((transition) => {
  let title = transition.to.title + '-Custom-Suffix'
  setWechatTitle(title)
})
router.redirect({
  '*': '/home'
})
router.start(App, 'app')