微信小程序暗黑模式

WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。

WXS 与 JavaScript 是不同的语言，有自己的语法，并不和 JavaScript 一致。

增强 wxml 标签的表达能力

WXS 对性能的贡献就只有一点：与 WXML 是在同一个线程运行的，避免了跨线程通信的开销。

号称 『wxs 目前在 iOS 设备的效率，会比JS快 2~20倍。在 Android 则无差异

WXS模块

每一个 .wxs 文件和 <wxs> 标签都是一个单独的模块。

每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数，默认为私有的，对其他模块不可见。

一个模块要想对外暴露其内部的私有变量与函数，只能通过 module.exports 实现。

module 对象

eg:

// /page/tools.wxs

var foo = "'hello world' from tools.wxs";
var bar = function (d) {
  return d;
}

// 对象形式导出
module.exports = {
  FOO: foo,
  bar: bar,
};
// 单独导出某一个
module.exports.msg = "some msg";

require

在 wxs 中引用其它 wxs 文件文件模块，可以使用 require 函数，引用的时候需要注意以下几点问题：

  1. 只能引用 .wxs 文件模块，且必须使用相对路径。
  2. wxs 模块均为单例，wxs 模块在第一次被引用时，会自动初始化为单例对象。多个页面，多个地方，多次引用，使用的都是同一个 wxs 模块对象。
  3. 如果一个 wxs 模块在定义之后，一直没有被引用，则该模块不会被解析与运行。
var tools = require("./cat.wxs");

console.log(tools.tip);
console.log(tools.msg);

标签

<wxs> 标签有两个属性，一个是 module，一个是 src.

此标签可以使用单标签闭合的写法

module 属性

当前 <wxs> 标签的模块名。必填字段。

在单个 wxml 文件内，建议其值唯一。有重复模块名则按照先后顺序覆盖（后者覆盖前者）。不同文件之间的 wxs 模块名不会相互覆盖。

module 属性值的命名必须符合下面两个规则：

  1. 首字符必须是：字母（a-zA-Z），下划线（_）
  2. 剩余字符可以是：字母（a-zA-Z），下划线（_）， 数字（0-9）

src 属性

引用 .wxs 文件的相对路径。仅当本标签为单闭合标签或标签的内容为空时有效

src 属性可以用来引用其他的 wxs 文件模块。

引用的时候，要注意如下几点：

  1. 只能引用 .wxs 文件模块，且必须使用相对路径。
  2. wxs 模块均为单例，wxs 模块在第一次被引用时，会自动初始化为单例对象。多个页面，多个地方，多次引用，使用的都是同一个 wxs 模块对象。
  3. 如果一个 wxs 模块在定义之后，一直没有被引用，则该模块不会被解析与运行。

这里的规则同 require 函数。

<wxs> 模块只能在定义模块的 WXML 文件中被访问到。使用 <include> 或 <import> 时，<wxs> 模块不会被引入到对应的 WXML 文件中。

<template> 标签中，只能使用定义该 <template> 的 WXML 文件中定义的 <wxs> 模块.

变量

  1. WXS 中的变量均为值的引用。
  2. 没有声明的变量直接赋值使用，会被定义为全局变量。
  3. 如果只声明变量而不赋值，则默认值为 undefined。
  4. var表现与javascript一致，会有变量提升

...
其余的都与JavaScript相差不大，不再赘述。

注意

  1. <wxs> 模块只能在定义模块的 WXML 文件中被访问到。使用 <include> 或 <import> 时，<wxs> 模块不会被引入到对应的 WXML 文件中。
  2. <template> 标签中，只能使用定义该 <template> 的 WXML 文件中定义的 <wxs> 模块。
  3. 不支持es6语法

小程序暗黑模式

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

  1. 在app.json中配置 themeLocation，指定变量配置文件 theme.json 路径，例如：在根目录下新增theme.json，需要配置"themeLocation":"theme.json"
  2. 在theme.json中定义相关变量；
  3. 在app.json中以@开头引用变量。

支持通过变量配置的属性：

全局配置的 window 属性与页面配置下的属性

  1. navigationBarBackgroundColor
  2. navigationBarTextStyle
  3. backgroundColor
  4. backgroundTextStyle
  5. backgroundColorTop
  6. backgroundColorBottom

全局配置 window.tabBar 的属性

  1. color
  2. selectedColor
  3. backgroundColor
  4. borderStyle
  5. list
  6. iconPath
  7. selectedIconPat

相关配置：

app.json

  "themeLocation": "theme.json",
  "darkmode": true,
  "window": {
    "navigationBarBackgroundColor": "@navBgColor",
    "navigationBarTextStyle": "@navTxtStyle",
    "backgroundColor": "@bgColor",
    "backgroundTextStyle": "@bgTxtStyle",
    "backgroundColorTop": "@bgColorTop",
    "backgroundColorBottom": "@bgColorBottom"
  }

theme.json

必须包含 light、dark 属性

{
  "light": {
    "navBgColor": "#f6f6f6",
    "navTxtStyle": "black",
    "bgColor": "#ffffff",
    "bgTxtStyle": "light",
    "bgColorTop": "#eeeeee",
    "bgColorBottom": "#efefef"
  },
  "dark": {
    "navBgColor": "#191919",
    "navTxtStyle": "white",
    "bgColor": "#1f1f1f",
    "bgTxtStyle": "dark",
    "bgColorTop": "#191919",
    "bgColorBottom": "#1f1f1f"
  }
}

Attention：

  1. 在小程序中，若使用编译打包的形式，直接在app.js中写入时，如果打包出来的 theme.json 引入报错，可采用在 config 中 copy theme.json 文件 的方式
  2. 必须配置darkmode和themeLocation才会生效

原文：https://yolkpie.net/2020/11/01/微信小程序暗黑模式/

posted @ 2021-03-05 13:34  yolkpie  阅读(789)  评论(0)  编辑  收藏  举报