vue-wechat-title完美解决微信网页标题问题，底层原理内置浏览器和标准浏览器有很大的不同，尤其是在处理网页的

前言

常网IT源码上线啦！
本篇录入技术选型专栏，希望能祝君拿下Offer一臂之力，各位看官感兴趣可移步🚶。
有人说面试造火箭，进去拧螺丝；其实个人觉得问的问题是项目中涉及的点 || 热门的技术栈都是很好的面试体验，不要是旁门左道冷门的知识，实际上并不会用到的。
接下来想分享一些自己在项目中遇到的技术选型以及问题场景。

等待是痛苦的，在我们的社会中，比等待更痛苦的，是无所事事。
当然，无所事事这个词还不够精准，再精准一些，应该叫失去角色，或身份空档期。

御窑。

一、前言

今天像往常一样，开开心心的打代码编程。

测试说，你的网页在微信打开，不正常。

什么不正常？

说清楚点嘛！

标题不正常。

于是便有了今天这篇文章，一起来探讨一下。

当然，你也可以当做面试题。

二、分析

我们先来了解一下问题的根源。

为什么会不正常？

内置浏览器和标准浏览器有很大的不同，尤其是在处理网页的 title 标签时。微信常常会根据网页的内容、浏览的状态等因素决定展示什么标题，这意味着有时候我们在页面源码中设置的 title 并不一定会出现在微信的标签页上。

不同于其他浏览器，微信有时会缓存标题，甚至在页面切换或后退时，标题也不会即时更新。

三、vue-wechat-title：一行代码解决问题

vue-wechat-title 是一个专门为解决这个问题而设计的 Vue 插件。

它的功能非常简单，但却非常实用：通过它，可以方便地在 Vue 项目中动态修改微信内置浏览器的标题。

安装 vue-wechat-title

npm install vue-wechat-title --save
# 或者
yarn add vue-wechat-title

安装完成后，你只需要在项目的入口文件中（如 main.js 或 main.ts）进行简单的配置。

import Vue from 'vue';
import WeChatTitle from 'vue-wechat-title';

Vue.use(WeChatTitle);

接下来，在你的 Vue 组件中，你只需要通过 this.$wechatTitle 来设置微信标题。例如：

export default {
  mounted() {
    this.$wechatTitle('好帅的标题');
  }
}

除了在 mounted 钩子中设置静态标题外，可以根据需要动态修改标题。

export default {
  watch: {
    '$route': function (to) {
      if (to.name === 'Home') {
        this.$wechatTitle('首页 - 我的Vue应用');
      } else if (to.name === 'About') {
        this.$wechatTitle('关于我们 - 我的Vue应用');
      }
    }
  }
}

使用还可以这样子添加到div元素

<div  v-wechat-title="我是标题"></div>

无副作用：不会影响其他浏览器，微信外的浏览器仍然按照标准的 title 标签进行展示。

四、底层原理

通过生命周期钩子函数来监听路由的变化，并在路由发生变化时动态更新页面标题。当路由变化时，可以使用 document.title 属性来设置页面的标题。

而为了避免重复代码，可以通过 Vue 的混入（mixin）机制实现这一功能。

为了确保在微信浏览器中标题能够正确显示，需要使用微信 JS-SDK 提供的 wx.ready 接口。当 JS-SDK 配置完成并准备就绪后，可以调用 wx.setDocumentTitle 方法来设置微信浏览器中的标题。这个过程可以通过 Vue.js 的插件（plugin）机制来实现，以确保与微信浏览器的兼容性和功能的完整性。

以下是vue-wechat-title的底层实现示例代码：

mixin.js

// mixin.js
export default {
  mounted() {
    this.$nextTick(() => {
      document.title = this.$route.meta.title || 'Default Title';
    });
  },
  activated() {
    this.$nextTick(() => {
      document.title = this.$route.meta.title || 'Default Title';
    });
  }
};

plugin.js

// plugin.js
export default {
  install(Vue, { setTitle }) {
    if (typeof wx === 'undefined') {
      return;
    }
    wx.ready(() => {
      setTitle(document.title);
    });
  }
};

在上述示例中，mixin.js 定义了一个混入对象，该对象会在 Vue.js 组件的 mounted 和 activated 生命周期钩子中被调用。每当路由发生变化时，这个混入对象会动态更新 document.title 属性，从而实现浏览器标题的实时修改。

而 plugin.js 定义了一个 Vue.js 插件对象，利用 Vue.js 插件机制进行配置。在插件安装时，它会检查微信 JS-SDK 是否可用，然后调用 wx.ready 接口，并在回调函数中设置微信浏览器的标题。

插件（plugin）会在Vue实例化之前被触发。使用Vue.use()方法来安装插件时，插件的install函数会被调用。

我们使用<div v-wechat-title="我是标题"></div>就可以实现，是因为用了vue的插件plugin，内部帮我们实现了上述的功能。

补充一点：使用微信 JS-SDK 动态设置微信标题

为了在微信浏览器中正确设置标题，我们需要使用微信的 JS-SDK 来调用 wx.setDocumentTitle 方法。在微信的 JS-SDK 中，在 wx.ready 接口被调用之后，修改页面标题。

引入微信的 JS-SDK，并进行初始化。

在 main.js 或单独的 js 文件中引入微信 JS-SDK

import wx from 'weixin-js-sdk';

export default {
  install(Vue) {
    // 检查微信 JS-SDK 是否准备就绪
    wx.config({
      debug: false, // 开启调试模式，发布时可以关闭
      appId: 'your-app-id', // 公众号的唯一标识
      timestamp: 1234567890, // 生成签名的时间戳
      nonceStr: 'your-nonce-str', // 生成签名的随机串
      signature: 'your-signature', // 签名
      jsApiList: ['setDocumentTitle'] // 需要使用的 JS 接口
    });

    wx.ready(() => {
      // 在微信 JS-SDK 准备好之后，动态设置标题
      document.addEventListener('DOMContentLoaded', function () {
        const pageTitle = document.title;  // 获取当前标题
        wx.setDocumentTitle(pageTitle);   // 设置微信浏览器中的标题
      });
    });

    // 当配置失败时的回调
    wx.error((error) => {
      console.error("微信配置失败：", error);
    });
  }
};

在 Vue 项目中使用微信 JS-SDK 插件

在 main.js 中，安装并使用上面的微信 JS-SDK 插件。

import Vue from 'vue';
import App from './App.vue';
import WeChatPlugin from './plugins/weChatPlugin';

Vue.config.productionTip = false;

// 使用微信插件
Vue.use(WeChatPlugin);