uniapp切換主題顏色（後臺管理系統）

来源:https://www.cnblogs.com/quanminglin/archive/2023/09/04/17677099.html
-Advertisement-
Play Games

需求：在現有已經做好的後臺管理系統添加一個切換主題顏色的功能 分析：該項目用了很多uniapp的組件，css樣式沒有統一，類名也沒有統一 使用混合mixin.scss,並使用vuex 效果圖 功能：按鈕背景顏色、部分樣式、字體圖標、分頁跟隨主題顏色變化也變化 每一個用戶喜歡的主題顏色都不一樣，後端已 ...


需求：在現有已經做好的後臺管理系統添加一個切換主題顏色的功能

分析：該項目用了很多uniapp的組件，css樣式沒有統一，類名也沒有統一

使用混合mixin.scss,並使用vuex

效果圖

功能：按鈕背景顏色、部分樣式、字體圖標、分頁跟隨主題顏色變化也變化

每一個用戶喜歡的主題顏色都不一樣，後端已經在用戶數據表加了一個用於存儲主題顏色的欄位預設是1（綠色）

1.先在用戶登錄成功後，把用戶的主題顏色保存在本地存儲中

 uni.setStorageSync('theme',data.Theme);//當前用戶的主題配色

2.在vuex添加全局變數

 有些人的可能不是這樣的，但是不重要，我們只需要在你們的vuex的 state、mutations、getters、actions添加對應的方法就行，直接上代碼

curThemeType是存放當前用戶的主題顏色的標識符，我這邊後端用1，2，3，4來表示不同顏色，你們也可以不需要寫，

curThemeColor存放的是顏色值，後期是全局的一個顏色值，只需要在用的地方用插值表達式或者字元拼接的方式就行

state: {

//測試變色
curThemeType: 1,
curThemeColor:'',
},
mutations: {

//測試變色
setCurThemeType(state, data) {
state.curThemeType = data;
},
setCurThemeType2(state, data) {
state.curThemeColor = data;
},
},
getters: {

//測試變色
themeType(state) {
return state.curThemeType;
},
//測試變color色
themeType2(state) {
return state.curThemeColor;
}
},

actions: {

handleActionAgree(context, boo) {
context.commit('setCurThemeType', boo)
},
handleActionAgree2(context, boo) {
context.commit('setCurThemeType2', boo)
},

}

 3.在存放公共文件里添加一個mixin.js

代碼：

import { mapGetters, mapMutations } from 'vuex';
export default {
install(Vue) {
Vue.mixin({
data() {
return {
};
},
methods: {
...mapMutations(['setCurThemeType','setCurThemeType2']),
},
computed: {
...mapGetters(['themeType','themeType2'])
},

});
}
};

 4.然後去入口文件引入

 

import myMixin from './common/mixin.js'; //--實現換膚 引入 myMixin
Vue.use(myMixin) //實現換膚 調用 myMixin

5.準備工作已經好了，現在去APP.vue裡面判斷用戶上一次使用的主題顏色也就是之前在登錄存在本地存儲的值

代碼：

先在APP.vue引入

//換膚引入
import {mapMutations} from 'vuex';

然後在onLaunch（）里去拿本地存儲的值，然後賦予顏色值然後存在vuex，然後就可以使用了

onLaunch: function() {
console.log('App Launch');
const that = this;
//項目啟動獲取緩存中的皮膚
let SwitchNameID = parseInt(uni.getStorageSync('theme')); //當前配色ID
if (SwitchNameID == '') {
SwitchNameID = 1;
}
console.log('當前配色ID', SwitchNameID);
// Vuex
that.setCurThemeType(SwitchNameID);
//用於動態的改變定義在vuex當中的變數，達到動態換膚的效果
that.$store.dispatch('handleActionAgree', SwitchNameID); //存放當前ID

//--------- color色--------------------------
// 背景顏色跟單選多選的顏色
let colorS = '';
if (SwitchNameID == 1) {
colorS = '#7AC463';
} else if (SwitchNameID == 2) {
colorS = '#EFB46F';
} else if (SwitchNameID == 3) {
colorS = '#cf2532';
} else if (SwitchNameID == 4) {
colorS = '#3c9cff';
}
// Vuex
console.log('當前顏色值', colorS);
that.setCurThemeType2(colorS);
//用於動態的改變定義在vuex當中的變數，達到動態換字體顏色換單選多選顏色的效果
that.$store.dispatch('handleActionAgree2', colorS); //存放當前顏色
window.document.documentElement.setAttribute('data-theme', SwitchNameID);
},

6.去頁面使用，使用的方法是在頁面上使用style綁定變數值

1.:style="{ 'background-color': themeType2}" 

2.:style="'background-color:' + themeType2"  (微信小程式用這種)

 

 

themeType2就是一個全局的顏色值，在需要用的地方直接使用就行了

 在這裡其實已經可以實現根據後端的值去改變主題顏色了，

 

 

7.接下來寫功能.根據自己的需求在對應的地方添加下拉框，或者選擇框，由於我這邊的框架是uniapp而且需要在頂部顯示，我就在對應的文件寫以下的代碼

在你需要的地方的文件加入下拉框(uniapp官網)，我這邊的下拉框數據是後端已經寫好的，方便後期維護（你們根據自己的情況來，也可以自己定義下拉框內容）

我的數據長這樣

接下來在這個頁面的created（）或者onLoad()里把本地存儲的拿出來存到vuex中

主要代碼：

let SwitchNameID = parseInt(uni.getStorageSync('theme')); //當前配色ID
if (SwitchNameID == '') {
SwitchNameID = 1;
}
// Vuex
that.setCurThemeType(SwitchNameID);
//用於動態的改變定義在vuex當中的變數，達到動態換膚的效果
that.$store.dispatch('handleActionAgree', SwitchNameID);
window.document.documentElement.setAttribute('data-theme', SwitchNameID);

 

然後寫一個方法，在用戶在下拉框選擇了其他顏色，就是去修改vuex的值，實現切換項目中的主題顏色，然後再去修改資料庫該用戶裡面的值

 代碼：

// 配色
ChangeSwitchTopic(e) {
const that = this;
let i = e.detail.value
that.SwitchTopicName = that.SwitchTopicAddList[i].BasicDataName;
let SwitchValue = that.SwitchTopicAddList[i].BasicDataCode;
// 將選中的模式存儲緩存
uni.setStorageSync('theme', parseInt(SwitchValue));
// Vuex
that.setCurThemeType(SwitchValue);
//用於動態的改變定義在vuex當中的變數，達到動態換膚的效果
that.$store.dispatch('handleActionAgree', parseInt(SwitchValue));

// 然後再調用介面去修改當前用戶喜歡的配色，下次就還是這套
let value = uni.getStorageSync("user");
api.get({
url: 'User/SetTheme',
data: {
UserID: value, //登錄的商家用戶ID
LanguageType: that.LanguageTypeId,
Theme: SwitchValue, //配色ID
},
success: data => {
console.log('配色切換', data);
}
});

//--------- color色--------------------------
// 顏色跟單選多選的顏色是在APP.vue跟top-window.vue設置的，如果要添加或者修改，需要修改兩個地方
let colorS = '';
if (SwitchValue == 1) {
colorS = '#7AC463';
} else if (SwitchValue == 2) {
colorS = '#EFB46F';
} else if (SwitchValue == 3) {
colorS = '#cf2532';
} else if (SwitchValue == 4) {
colorS = '#3c9cff';
}
// Vuex
this.setCurThemeType2(colorS);
//用於動態的改變定義在vuex當中的變數，達到動態換字體顏色換單選多選顏色的效果
this.$store.dispatch('handleActionAgree2', colorS);

window.document.documentElement.setAttribute('data-theme', SwitchValue);
},

結束---------

這樣已經可以實現基本切換主題顏色的顏色值了

註意：微信小程式以下方法不可用

但是那些用了uniapp組件的沒辦法直接在頁面上修改，就只能再添加一個混合了（mixin.scss）

1.再創建一個mixin.scss

 代碼：

// 想要在css用,需要先在uni.scss里引入
// 添加或者修改,需要在uni.scss里添加或者修改
// @include ft_color($bj-color-theme1);
// @include bg_color($bj-color-theme1);
// $bj-color-theme1 是在uni.scss里定義的顏色，data-theme會判斷當前是什麼值用對應的顏色
//該方法針對uniapp原生組件無法在view視圖直接修改，要操作css樣式修改的

@mixin bg_color($color) { //更換背景
background-color: $color ;
[data-theme = "1"] & {
background-color: $bj-color-theme1 !important;
}
[data-theme = "2"] & {
background-color: $bj-color-theme2 !important;
}
[data-theme = "3"] & {
background-color: $bj-color-theme3 !important;
}
[data-theme = "4"] & {
background-color: $bj-color-theme4 !important;
}
}
@mixin ft_color($color) { //更換文字顏色
color: $color;
[data-theme = "1"] & {
color: $bj-color-theme1 !important;;
}
[data-theme = '2'] & {
color: $bj-color-theme2 !important;;
}
[data-theme = "3"] & {
color: $bj-color-theme3 !important;;
}
[data-theme = '4'] & {
color: $bj-color-theme4 !important;;
}
}

 然後去uni.scss引入並且定義初始顏色

 @import '@/common/mixin.scss';//引入混入背景

/*
切記一定要在 uni.scss 預載入文件中 引入 自定義的 mixin.scss 並設置皮膚色
*/

$bj-color-theme1: #7AC463; //背景主題顏色預設（綠色）
$bj-color-theme2: #EFB46F; //背景主題顏色1（黃色）
$bj-color-theme3: #cf2532; //背景主題顏色2（紅色）
$bj-color-theme4: #3c9cff; //背景主題顏色3(藍色)

 

2.再去APP.vue修改組件顏色，F12找到對應的類名，然後修改

 

<style lang="scss">

//時間選擇器選中顏色
.uni-calendar-item--multiple .uni-calendar-item--before-checked,
.uni-calendar-item--multiple .uni-calendar-item--after-checked,
.uni-calendar-item__weeks-box .uni-calendar-item--checked,
.uni-datetime-picker--btn,
{
@include bg_color($bj-color-theme1);
}
//時間選擇器選中顏色 -- 確定按鈕
.confirm-text{
@include ft_color($bj-color-theme1);
}

 </style>

 效果;

這是我的工作中實現的，有很多不足，還需要努力，供大家參考，網上還有很多方式，根據自己的需求來修改

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 伺服器顯卡：驅動高性能計算和人工智慧應用
    伺服器顯卡在高性能計算和人工智慧應用中扮演著至關重要的角色。高性能計算廣泛應用於科學計算、工程設計、氣象預測等領域，而人工智慧應用則涵蓋了機器學習、深度學習、圖像識別等領域。這些應用需要大量的計算資源和高效的演算法來處理大規模的數據集，而伺服器顯卡正是在這樣的應用中發揮重要作用。 ...
  • NineData：高效可靠的MongoDB遷移及同步方案
    為解決用戶面臨的 MongoDB 遷移問題，玖章算術旗下的雲原生智能數據管理平臺 NineData 推出了 MongoDB 業務不停服數據遷移能力。NineData 實現了完全自動化的全量數據遷移，以及增量數據的採集複製能力。 ...
  • 淺談Mysql讀寫分離的坑以及應對的方案
    本文簡單介紹了讀寫分離架構，和出現主從延遲後，如果我們用的讀寫分離的架構，那麼我們應該怎麼處理這種情況，相信在日常我們的主從還是或多或少的存在延遲。上面介紹的幾種方案，有些方案看上去十分不靠譜，有些方案做了一些妥協，但是都有實際的應用場景，需要我們根據自身的業務情況，合理選擇對應的方案。 ...
  • 數倉資源管控理論已掌握，是時候實戰了
    本文分享自華為雲社區《直播回顧 | 數倉資源管控理論已掌握，是時候實戰了》，作者：胡辣湯 。 混合負載場景下，如何高效運維資料庫，防止資料庫系統過載？GaussDB(DWS)資源管控為資料庫平穩可靠運行提供了哪些助力？本期《數倉專家手把手教您資源管控與運維實戰》的主題直播中，我們邀請到華為雲Gaus ...
  • SQL 查詢的執行順序
    瞭解 SQL 查詢的執行順序對我們解決一些問題很有幫助，有時我們可能會疑惑為什麼不能對分組的結果進行篩選這樣類似的問題？之前一直不是理解這個問題，在瞭解了SQL 查詢的執行順序之後這個問題也就迎刃而解。在我們對 SQL 查詢語句進行分析優化時，掌握執行順序也是有一定幫助的。 ...
  • iOS代碼加固與保護方法詳解 - 提升iOS應用安全性的關鍵步驟
    摘要：作為一名從事iOS開發多年的技術博主，長期以來我都沒有重視代碼加密和加固。然而，最近瞭解到使用IPA Guard工具可以對iOS應用進行混淆保護，我開始重新審視iOS應用的安全性問題。本文將詳細介紹如何使用IPA Guard工具進行代碼加固和保護，以提高iOS應用的安全性和抵禦逆向分析的風險。 ...
  • 記錄--移動端的雙擊事件好不好用？
    這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 前言 2023年了，我不允許還有人不會自己實現移動端的雙擊事件。 過來，看這裡，不足 50 行的代碼實現的雙擊事件。 聽筆者娓娓道來。 dblclick js原生有個dblclick雙擊事件，但是幾乎不支持移動端。 而且，該dblclic ...
  • 舊系統網頁性能收集，相容IE5，低侵入收集網頁腳本
    # 開發背景 - 短時間內完成網頁性能統計上傳，考慮到企業內實際環境，很多網頁/系統需要運行在IE 5 相容模式下，開發一個腳本，在不影響原網頁的情況下，收集相應 用戶電腦 打開網頁的性能指標。 # 收集要素 - 進入頁面時間，載入Js時間 - 頁面所有元素載入完成時間 - 因為在原網頁將該腳本放到 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類