微信小程序「法语记忆:学背单词动词变位」V3.3.0 更新:增加了黑夜模式

小程序主页法语记忆 学背单词动词变位

这次更新的内容 🚀

这次更新的主要内容表面上看其实就只有两点:

  1. 增加了黑夜模式
  2. 优化了部分界面和功能。

但是,如果一条条详细列出来的话,大概有以下这一些改进:

  1. 增加了黑夜模式
  2. 优化了设置保存方式和同步。
  3. 删减了无用的代码。
  4. 修改了设置界面的数量显示。
  5. 修复动词变位查询页「若动词本身无法在小程序内查到时,无法显示变位」的问题。
  6. 修复了「分类记忆为null」的问题。(因使用率极低,此功能暂时删除)
  7. 修改了部分按钮的显示样式。

黑夜模式 🚀

因为微信还没有正式发布黑夜模式的版本,昨天刚刚用上安卓v7.0.10测试版的黑夜模式(2019.12.24),这个时候小程序已经再提交审核了。所以黑夜模式的颜色参考基本上都是参考ios13的配置。反正这里用了最简单粗暴的方式,直接截屏然后取色,取完的颜色hex值如下:

  • #000000 底层背景
  • #1C1C1E 次要背景(比如说块状模块)
  • #9A999E 图标和次要文字(副标题或者正文)* #FEFEFF 主要文字(标题或者需要突出显示的文本)* #F93A5B 选中后的图标(彩色,以apple music为例)

然后就模仿着上述的配色将小程序的配色进行更改,其中原本的按键什么的没有经过重新的颜色调整,在这一版中还是维持白色模式的颜色。要增加黑色模式,实质上就是进行“主题换肤”,在每一个想要“换肤”的标签<view>里加上:

{{dark_mode==true?'blk-bg-black':'bg-gradual-blue'}}

意思是:创建一个变量dark_mode,当它为true的时候就变黑(夜模式),如果是false的话就变白(天模式)。就像这样:

<view class=" padding radius text-center shadow-blur title_css page {{dark_mode==true?'blk-bg-black':'bg-gradual-blue'}}">

在和页面相关的js文件内加入这些:

dark_mode: function(e) {
    var settings = wx.getStorageSync('settings')   //从缓存内调取设置数据

    if (e.detail.value == true) {       //如果开关为true,那么就为黑夜模式
      settings[0].dark_mode = true;
      wx.setStorageSync('settings', settings)   //存入缓存
    } else {                          //如果开关为false,那么就为白天模式
      settings[0].dark_mode = false;
      wx.setStorageSync('settings', settings)   //存入缓存
    }
    
    this.setData({
      dark_mode: settings[0].dark_mode,     //为了在wxml中显示(当然先要在页首的data处定义一下)
    })
    
    if (getCurrentPages().length != 0) {     //刷新当前页面的数据,为了及时看到变化效果
      getCurrentPages()[getCurrentPages().length - 1].onLoad()
    }
  },

黑夜模式带来的一些问题 🚀

设置的问题 🚀

加上黑夜模式之后,也带来了一系列问题。之前由于将每一个设置都是分开来储存的,所以这样比较难管理和修改。于是这一次将所有设置的结果都保存到了一个js对象中,比方说:

settings=[{"type":[false,false,true],"dark_mode":true,"freq":[true,false,false],"freq":60,"count":5,"time_type":[false,false,false]}]

在这个对象中保存着各种设置,比如数组类型的、字符串类型的、布尔类型的、数字类型的等等。想要存取的时候就直接查询对象就行了(就像python里面的字典):

settings[0].dark_mode    //返回true和false

页面闪屏的问题 🚀

此外,这样写的黑夜模式会带来一个严重的问题,就是“闪屏”(极短时间的白屏)。在其他界面闪屏都没有太大关系,但是在背单词的界面尤为明显,严重影响背单词,效果就像下面的动图一样。要解决这个问题,那就把所有的东西都放在同一个页面上,然后通过不断地更新这个页面避免页面间跳转、重新判断dark_mode是真是假所带来的白屏。

其他的修改 🚀

(本文所有的图片都是用ppt做的,ppt真万能[滑稽][滑稽])

2019.12.24 巴黎