uniapp主题切换功能的方式终结篇(全平台兼容)

这篇具有很好参考价值的文章主要介绍了uniapp主题切换功能的方式终结篇(全平台兼容)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前面我已经给大家介绍了两种主题切换的方式,每种方式各有自己的优势与缺点,例如“scss变量+vuex”方式兼容好但不好维护与扩展,“scss变量+require”方式好维护但兼容不好,还不清楚的可点下面链接直达了解一下

uniapp主题切换功能的第一种实现方式(scss变量+vuex)

uniapp主题切换功能的第二种实现方式(scss变量+require)

理解了这些才能更好的理解我接下来给大家总结的。

最后做的这个能兼容所有平台的主题切换效果,大家可以微信扫码一睹为快,切换功能在”个人中心“那里(模仿的b站),目前分白天与夜间模式

接下来就给大家介绍一下如何做一个兼容好,又好维护的主题切换功能

解决思路

uniapp应用在做开发的时候,拆分页面其实就分两大部分,主体部分+导航栏与tabbar

为什么要这么分,因为主体部分的样式通常是普通css代码控制的,而导航栏+tabBar(例如原生的情况)须要通过api去修改。而css与js目前还不能完全互通。

因此要做全平台兼容同样须要维护主体部分的样式(纯css)与导航栏+tabBar部分的样式(js),明白了原理,接下来就上代码

第一部分:全局“主体部分”主题样式

这样其实就是之前讲过的,上代码

定义common/css/_theme.scss

$themes: (
	// 白天模式
    light:(
        page: (
            background-color: #fff,
            color: (
                color: #333,
            ),
            block: (
                background-color: #333,
                color: (
                    color: #fff,
                ),
            ),
        ),
        user-page: (
            background-color: #f2f2f2,
            color: (
                color: #666,
            ),
            block: (
                background-color: #999,
                color: (
                    color: #000,
                ),
            ),
        ),
    ),
	// 夜间模式
    dark:(
        page: (
            background-color: #333,
            color: (
                color: #fff,
            ),
            block: (
                background-color: #fff,
                color: (
                    color: #000,
                ),
            ),
        ),
        user-page: (
            background-color: #1a1a1a,
            color: (
                color: #fff,
            ),
            block: (
                background-color: #FFFFFF,
                color: (
                    color: #000,
                ),
            ),
        ),
    )
);

生成主题样式

@mixin map-to-class($map, $divider: "-", $select: ".theme", $isRoot: false, $root-select: ".theme") {
    $select: if($select== "" and &, &, $select);
    @each $k, $v in $map {
        $currSelect: if($isRoot, #{$root-select}#{$divider}#{$k}, #{$select}#{$divider}#{$k});
        #{$currSelect} {
            @if type-of($v) ==map {
                @include map-to-class($v, $divider, "", true) {
                    @content;
                }
            } @else {
                @at-root #{$select} {
                    #{$k}: $v !important;
                }
            }
        }
    }
}

@each $key, $mode in $themes {
    @if $key== "light" {
        @include map-to-class($mode);
    }
}
// 或
@each $key, $mode in $themes {
    @if $key== "dark" {
        @include map-to-class($mode);
    }
}

其实可以循环一次性输出,这个交给你们了。。。

页面使用

<template>
	<view class="tpf-page theme-page">
		<text class="theme-color">订单</text>
		<view class="theme-block block flex flex-align-center flex-pack-center">
			<text class="theme-color">板块里面的文本</text>	
		</view>
		<view class="flex flex-align-center flex-pack-justify change-theme">
			<text class="button" @tap="changeTheme('light')">白天模式</text>
			<text class="button dark" @tap="changeTheme('dark')">夜间模式</text>
		</view>	
	</view>
</template>

这里主要通过加theme前缀(你自己可以改成想要的)的类theme-pagetheme-colortheme-block等等等的方式给内容块加背景,给字体加颜色等

这样页面是不是就很好维护,不同颜色的页面,你只须要在_theme.scss主题里面进行添加或修改后,在页面添加回应的theme-xxx类即可。

这样就处理了主体部分的样式主题切换问题。

第二部分:全部“导航栏+tabBar”主题样式

因为这部分涉及到原生操作,须要用到api,所以必须是js来维护主题样式

定义theme.js

// 定义导航栏 与 tabbar 主题色
const themes = {
	light:{
		navBar:{
			backgroundColor:'#FFF',
			frontColor:"#000000"
		},
		tabBar:{
			backgroundColor:'#FFF',
			color:'#333',
			selectedColor:'#0BB640',
			borderStyle:'white'
		}
	},
	dark:{
		navBar:{
			backgroundColor:'#333',
			frontColor:"#ffffff"
		},
		tabBar:{
			backgroundColor:'#333',
			color:'#fff',
			selectedColor:'#0BB640',
			borderStyle:'black'
		}
	}
}
export default themes; 

第一种使用方式vue.prototype的全局挂载(不推荐)

不推荐的原因:::有兼容问题!!!

mian.js

//引入主题
import themes from '@/common/theme/theme.js';
....
//全局挂载
Vue.prototype.$themes = themes;

第二种使用方式:Vuex / globalData

为什么使用这两种,因为他们是目前官方兼容所有平台的,这里我只介绍Vuex的方式

创建store.js

import Vue from 'vue'
import Vuex from 'vuex'
// 引入主题
import themes from '@/common/theme/theme.js';
Vue.use(Vuex);
 
const store = new Vuex.Store({
	state: {
		theme:themes[uni.getStorageSync('theme') || 'light']
	},
	getters: {
 
	},
	mutations: {
		updateTheme(state,mode = 'light'){
			state.theme = themes[mode];
		}
	}
})
 
export default store

页面使用

创建好store之后,就可以在页面里面动态设置导航栏与tabBar了,具体大家自己去根据喜好封装。

onReady(){
    //Vuex的方式 
    // 设置导航条
    uni.setNavigationBarColor(this.$store.state.theme.navBar);
    // 设置tabbar
    uni.setTabBarStyle(this.$store.state.theme.tabBar); 
},

如何实现切换

更新就是更改store的状态,因为他是全局的,所有页面都能应用到

this.$store.commit("updateTheme",mode);
// 设置导航条
uni.setNavigationBarColor(this.$store.state.theme.navBar);
// 设置tabbar
uni.setTabBarStyle(this.$store.state.theme.tabBar);

最后总结

要想实现全端兼容,肯定所有的代码都要考虑到兼容所有平台,因为做的时候要就考虑到。

主题切换对于应用来说是一个大工程,原理给大家说了,实现部署还须要大家好好的思考,其中扩展性,可维护性等都必须事先考虑的,不然项目肯定做不大。

想看我做的最终成品怎么样,可以扫码看看

有什么做得不好的,或没有考虑到位的,欢迎大家留言讨论交流,共同学习进步。文章来源地址https://www.toymoban.com/news/detail-475463.html

到了这里,关于uniapp主题切换功能的方式终结篇(全平台兼容)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp切换主题颜色(后台管理系统)

    需求:在现有已经做好的后台管理系统添加一个切换主题颜色的功能 分析:该项目用了很多uniapp的组件,css样式没有统一,类名也没有统一 使用混合mixin.scss,并使用vuex 效果图 功能:按钮背景颜色、部分样式、字体图标、分页跟随主题颜色变化也变化 每一个用户喜欢的主题

    2024年02月10日
    浏览(46)
  • (详解)vue中实现主题切换的三种方式

    目录 一、背景 二、实现思路  方法1:定义全局的CSS变量  方法2:切换已定义好的css文件  方法3:切换顶级CSS类名 (需使用css处理器,如sass、less等) 在我们开发中我们会遇到像是需要切换程序风格、 主题切换 啦这种应用场景。 参考大佬博客!!! vue中实现 ‘换肤 / 切换样

    2024年02月08日
    浏览(41)
  • 记录uniapp切换主题色能在抖音小程序上无效问题

    东西很简单,就是一个data-theme=\\\"light\\\"这种,就可以换不同的主题色 但是运行到抖音小程序无效,但是改成 class=“theme-light” 就可以,但是仅限于页面层级的,组件的也不行 不知道现在怎么回事,也不知道该咋改了 css html

    2024年02月09日
    浏览(48)
  • Vue项目如何配置、切换主题颜色(mixin + scss方式,简单高效)

    但图多 基本样式: 红色主题: 蓝色主题: 看到这里,是不是有人已经开始安耐不住了 ?😏 一. 首先,引入scss依赖(node-sass, sass-loader) 二.项目样式文件目录介绍 1.此处我将项目中的公共样式文件放到了 src/style目录下,其中 index.scss是以供全局使用的一些基本样式,在main

    2024年02月04日
    浏览(43)
  • 前端实现动态切换主题色-使用 css/less 动态更换主题颜色(换肤功能)或通过单击更改背景颜色

    提示: 以下是本篇文章正文内容,主要描述 使用 css/less 动态更换主题色(换肤功能) 提示: 使用 css/less 动态更换主题色(换肤功能), 方法共通,不限制技术栈: 其实在日常项目开发中经常会遇到有些用户想要一些自定义的的主题色来满足不同的视觉需求,这时候就需

    2024年02月15日
    浏览(67)
  • uniapp tab切换及tab锚点效果(兼容wx小程序及H5端)

    效果如下 H5端 H5端tab切换及tab锚点效果 小程序端 小程序端tab切换及tab锚点效果 代码实现-重要几点 渲染页面循环数组时,每一个item都需要给不重复的id tab使用uviewUI库实现的,list值里面每一个元素也需要给上id值。如[‘1-20’,‘21-40’,…],那么21-40给的是第21个item的id。 这里

    2024年02月03日
    浏览(43)
  • uniapp扫码功能兼容h5

    saoma.vue 页面 (这个页面用兼容h5扫码的) 还有个二维码页面 receiptPayment.vue h5 兼容扫码用htm-qrcode的 通过扫码获取到 uid:, type2个字段在传给后端,注意扫码哪个二维码加个白色边距,不然可能会扫码不了 ,这个我是h5游览器展示的,实际手机的h5可以扫码的,app端用uniapp的那

    2024年02月03日
    浏览(46)
  • Naive UI+Vue3来实现点击按钮一键切换明暗主题的功能

    记录一下如何使用Naive UI+Vue3代码来实现一键切换明暗主题的功能。 效果如下: 终端下输入: 起好项目的名称,然后一路回车即可。 至此Vue3的项目已经搭建完毕,打开http://127.0.0.1:5173/就可以看到项目的默认首页了。 安装Naive UI依赖库 然后我们根据官方出的配置对项目进行

    2024年02月12日
    浏览(42)
  • uniapp音频播放组件,兼容微信小程序、h5等,可倍数播放,快进快退,切换上下音频等

    template   !--父组件--   view     cxAdudioPlay       :list=\\\"list\\\"       :BsNav=\\\"BsNav\\\"       :autoplays=\\\"true\\\"       :slideYes=\\\"true\\\"       :autoNext=\\\"true\\\"       :switAud=\\\"true\\\"     /cxAdudioPlay   /view /template script /*      list      --   音频文件传入 不传无法播放/数组形式      Faskms    --   快进

    2024年02月03日
    浏览(82)
  • uniapp实现扫码功能兼容小程序和h5

    主要是针对h5端,uniapp自带的扫码方法不支持h5的 对于h5而言需要借助jweixin来实现,也就是微信的扫码功能 实现方式: 可通过npm安装 npm install jweixin-module 引入安装的npm包 import jweixin from \\\'jweixin-module\\\' 在onLoad方法中加载获取签名的方法 onLoad() {             this.wx_sanCode() }

    2024年02月13日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包