真uni-app框架微信小程序深色模式配置教程

不要眼睛一红就觉得人间不值;散伙乃是人间常态,你我哪能例外

真uni-app框架微信小程序深色模式配置教程

唠叨一会

大家都知道从ios出现深色模式后,目前android也逐步更近;虽然部分第三方应用还是无法根据系统自动切换浅色/深色模式,但是在微信客户端和小程序这块做的还是比较好的!之前也说过要配置深色模式,但是枫瑞的星宿ui是uni-app框架非微信原生小程序开发就写了 踩坑记录;

 

配置差异

我们观看微信小程序开发文档的时候有提到这段话:

当app.json中配置darkmode为true时,小程序部分配置项可通过变量的形式配置,在变量配置文件中定义不同主题下的颜色或图标,

方法如下:在app.json中配置themeLocation,指定变量配置文件theme.json路径,

例如:在根目录下新增theme.json,需要配置”themeLocation”:”theme.json”在theme.json中定义相关变量;在app.json中以@开头引用变量

uni-app框架作为多端服务,基本结构是和微信小程序是一致的;同时我们也熟知app.josn就是uni框架的pages.json,同理我们应该只需要在pages.json 文件中插入该代码就可以了

// 开启深色模式
"darkmode": true,
// 切换主题颜色
"themeLocation":"theme.json"

真uni-app框架微信小程序深色模式配置教程

但是问题就运行到微信小程序开发工具之后,这段代码消失了,这时候就想到了制作《星宿UI 0.4 多端开源小程序优化 支持qq小程序添加好友 激励视频等》将代码配置manifest.json/源码视图中mp-weixin节点下

真uni-app框架微信小程序深色模式配置教程

配置教程

上部分提到配置中的差异之后我们开始真uni-app框架微信小程序深色模式配置教程,毕竟百度上的文章基本接近满分作文

1.manifest.json/源码视图中mp-weixin节点下插入以下代码

// 开启深色模式
"darkmode": true,
// 切换主题颜色
"themeLocation":"theme.json"

2.根目录新建theme.json(也就是和pages.json同级目录)插入官方给的代码

{
    "light": {
        "navBgColor": "#f6f6f6",
        "navTxtStyle": "black",
        "bgColor": "#ffffff",
        "bgTxtStyle": "light",
        "bgColorTop": "#eeeeee",
        "bgColorBottom": "#efefef",
        "tabFontColor": "#000000",
        "tabSelectedColor": "#3cc51f",
        "tabBgColor": "#ffffff",
        "tabBorderStyle": "black",
        "iconPath1": "image/icon1_light.png",
        "selectedIconPath1": "image/selected_icon1_light.png",
        "iconPath2": "image/icon2_light.png",
        "selectedIconPath2": "image/selected_icon2_light.png",
    },
    "dark": {
        "navBgColor": "#191919",
        "navTxtStyle": "white",
        "bgColor": "#1f1f1f",
        "bgTxtStyle": "dark",
        "bgColorTop": "#191919",
        "bgColorBottom": "#1f1f1f",
        "tabFontColor": "#ffffff",
        "tabSelectedColor": "#51a937",
        "tabBgColor": "#191919",
        "tabBorderStyle": "white",
        "iconPath1": "image/icon1_dark.png",
        "selectedIconPath1": "image/selected_icon1_dark.png",
        "iconPath2": "image/icon2_dark.png",
        "selectedIconPath2": "image/selected_icon2_dark.png",
    }
}

3.pages.json主题相关以外的配置项
将theme的配置使用@符号方式引入到配置中,这样就可以开启自动切换

{
    "window": {
        "navigationBarBackgroundColor": "@navBgColor",
        "navigationBarTextStyle": "@navTxtStyle",
        "backgroundColor": "@bgColor",
        "backgroundTextStyle": "@bgTxtStyle",
        "backgroundColorTop": "@bgColorTop",
        "backgroundColorBottom": "@bgColorBottom"
    },
    "tabBar": {
        "color": "@tabFontColor",
        "selectedColor": "@tabSelectedColor",
        "backgroundColor": "@tabBgColor",
        "borderStyle": "@tabBorderStyle",
        "list": [{
            "iconPath": "@iconPath1",
            "selectedIconPath": "@selectedIconPath1"
        }, {
            "iconPath": "@iconPath2",
            "selectedIconPath": "@selectedIconPath2"
        }]
    }
}

4.开启监听系统主题(可不操作)
在app.vue文件中配置应用生命周期

onThemeChange:function(options){
	console.log(options,'系统主题');
}

5.界面css深色模式切换

/* 暗黑模式下应用的样式 */
@media (prefers-color-scheme: dark) {
	  page{
	    background: #000000;
	  }
}

 

其他说明

1.调试库版本在 2.11 以上

2.微信开发者工具无法实现界面背景切换 需要在真机上预览

3.微信开发者工具 1.03.2004271 版本开始已支持 DarkMode 调试,在模拟器顶部可以切换 深色/浅色 模式进行,如图:

真uni-app框架微信小程序深色模式配置教程

 

案例源码下载

关注枫瑞博客网微信公众号回复“20921”下载

真uni-app框架微信小程序深色模式配置教程 1

 

0
分享到:

评论0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
掉头发中!小程序慢更新
没有账号? 忘记密码?
var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?18b345cf548f88d90a655d9ce1fa4140"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })();