首页 > 代码库 > 教你在微信中给Vue单页应用设置标题

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

2024-09-13 10:15:48   221人阅读

前言

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

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

问题

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

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

解决方案 请直接看后记

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

代码 Github

file: utils/setWechatTitle.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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‘)

效果

技术分享
技术分享

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


联系
我们