新手养成流---前端PC端上架浙里办单点登录，埋点及适老化（一）

阿喵派我来抓鱼

已于 2024-03-13 14:18:12 修改

阅读量2.7k

点赞数 48

分类专栏：前端PC端上架浙里办单点登录，埋点及适老化文章标签：前端

于 2024-03-12 15:02:34 首次发布

本文链接：https://blog.csdn.net/chl13218996367/article/details/136652423

版权

前端PC端上架浙里办单点登录，埋点及适老化专栏收录该内容

3 篇文章

订阅专栏

以下内容仅介绍PC端浙里办上架适老化内容，单点登录及埋点，请注意是PC端，PC端，PC端！

因内容量较多，本文只介绍适老化如何操作，莫急，莫急，单点登录及埋点后续就会更新，保证事无巨细，贯彻浙里办兜底服务宗旨

首先，说明一点，上架不是咱前端一个人的事，所以注意配合，出了问题也不要过多怀疑是自己的问题，一切皆有可能，好了，说一点前期的准备工作吧，为了你可以顺利上架，首先嘞，你要先有这些（没有的话找你们产品经理或者项目负责人要），这里我们介绍的是适老化，所以先看适老化相关的文件

至少要有这两个文件作为参考，还有就是在项目基本功能都开发完毕了，下面正式进入适老化内容：

1 触发适老化按钮，我们想要开启适老化，必定要有触发条件，并且要设置最少两种状态，正常模式和适老化模式，这个按钮的切换就是用来切换这两种模式的。

按钮一般放在头部组件里，可以按具体情况调整，下面写切换状态逻辑，展示为个人写法，仅供参考。

changeElder() {
let value;
if (this.$store.getters.uiStyle === "elder") {
value = "nomarl"; //正常模式
localStorage.setItem("mode", "");

$("body").removeClass("zjzwOLD");
_delCookiemode();
} else {
value = "elder"; //适老化模式
localStorage.setItem("mode", "2");
$("body").addClass("zjzwOLD");
_setCookiemode();
}
this.$store.dispatch("settings/SetUIStyle", value);
}

因为点击适老化后，需要切换页面等操作，所以需要在store仓库中存储，并做持久化处理。

2 可以切换状态之后，需要新建一个相应的适老化样式文件，当然，也可以在具体的页面加上适老化的类名处理，效果差不太多，为了统一处理，我们可以新建适老化样式文件elder.scss(命名自定义即可)

3 让样式文件在全局生效，状态可以切换为适老化模式了，样式文件也有了，最后一步，让样式文件与状态相关联即可。因为是要在全部样式生效，所以可以在我们的App.vue文件去设置全局适老化的类名

获取状态，设置类名，这样就可以在全局生效了

另外一点是，我们在之前写过mode字段在本地和cookie里，所以在App.vue里也要再写一段判断mode的代码（**这一点容易忽略，但是是浙里办提供方法，非常建议加上**）

getCookieMode((res) => {
if (res.mode == 2) {
// 适老化
let value = "elder";
this.$store.dispatch("settings/SetUIStyle", value);
localStorage.setItem("mode", "2");
$("body").addClass("zjzwOLD");
} else {
let value = "normal";
this.$store.dispatch("settings/SetUIStyle", value);
localStorage.setItem("mode", "");
$("body").removeClass("zjzwOLD");
}
});

最后的最后就可以检查了，如果切换成功就会切换类名，自由设置适老化模式了。