需求:實現開發的應用中切換主題色

如果只是需要一個主題色沒有切換的需要 完全可以使用uniapp裡面uni.scss檔案文件

思路:預先在一個公共css中定義你需要的主題顏色,這裡只是示例定義了兩種顏色

• 參考文件 從中獲得思路可以通過動態設定data-xx從而配合css屬性選擇器來動態改變主題色
• 本來是想通過mixin直接混入一個變數來達到全域性控住主題色,忽略了minxi的data需要是一個函式 所以返回的值在每個頁面之間是不關聯的,從而使用vuex,也可以定義一個全域性變數uni裡面使用全域性變數
• 使用store的原因是潘佳辰大佬使用store實現動態路由以及頭部欄的固定
• 上圖

實現

• 涉及到的知識點為uniappp vuex(這裡我使用了store的模組化)
• 全域性css在app.vue裡面引入

[data-theme='pink'] {
	background-color: pink;
	color: #fff;
}

[data-theme='blue'] {
	background-color: blue;
	color: #fff;
}

• 我們可以在vuex中定義一個appTheme全域性主題變數,並且寫入一個函式以此來修改主題變數

const state = {
	appTheme: 'pink'
};
const mutations = {
	TOGGLE_APP_THEME(state, color = 'pink') { //你可以傳入一個顏色引數(需要上面公共css中含有,如果不傳入預設為粉色)
		console.log(color)
		state.appTheme = color
	}

}
const getters = {}
const actions = {};
export default {
	state,
	actions,
	mutations,
	getters,
	namespaced: true
}

//getters中的資料(這裡的getters是單個檔案)
appTheme(state) {
		return state.setting.appTheme
}
 

• 在單頁面中給你所需要設定主題色的dom新增date-them屬性

//html
<text :data-theme="appTheme" @tap="toggleAppTheme('pink')">切換主題色</text>
//js
import { mapGetters } from 'vuex';
computed: {
		...mapGetters(['appTheme'])
}

• 為了省事我直接在main.js使用mixin混入了toggleAppTheme函式

Vue.mixin({
	methods: {
		toggleAppTheme(color = 'blue') {
			this.$store.commit('setting/TOGGLE_APP_THEME', color);
		}
	}
})
 

感覺這種方式挺麻煩的,期望大佬出現