被星球大战2的 “For the better, right?” meme 刷屏，心血来潮点子萌生想把这个搬到 Wallpaper Engine
找种子->下电影->截图->拼接->发布图片壁纸，一气呵成，但是总觉得什么都不加的 meme 少了味道，于是又想加入自定义文字
Wallpaper Engine 的场景和视频壁纸并不支持，只能通过网页壁纸来实现
下文将展示如何在 Wallpaper Engine 的网页壁纸中添加用户自定义文字（其他用户属性同理）
环境
- Windows 10
- Wallpaper Engine 1.6.22
参考
步骤
以下步骤假设已经写好网页 index.html，内容大致如下
<head>
<!-- meta -->
<!-- some css -->
</head>
<body>
<div>
<span id="text1"></span>
</div>
<div>
<span id="text2"></span>
</div>
<div>
<span id="text3"></span>
</div>
<div>
<span id="text4"></span>
</div>
<script></script>
</body>
需要实现：在 Wallpaper Engine 中用户可以自定义这四个 span 中的内容
在壁纸项目中添加用户属性
在壁纸编辑器中打开 编辑 – 更改项目设置 – 添加属性，出现对话框（下图为场景壁纸的选项，网页壁纸还会多两个文件和目录选项）
添加四个文本框属性，并记住它们的关键字 (key)
添加 wallpaperPropertyListener 代码
打开 index.html，在 script 标签内添加 js 代码
window.wallpaperPropertyListener = {
applyUserProperties: function(properties) {
if (properties.text1) {
var span = documents.getElementById("text1");
span.innerHTML = properties.text1.value;
}
if (properties.text2) {
var span = documents.getElementById("text2");
span.innerHTML = properties.text2.value;
}
if (properties.text3) {
var span = documents.getElementById("text3");
span.innerHTML = properties.text3.value;
}
if (properties.text4) {
var span = documents.getElementById("text4");
span.innerHTML = properties.text4.value;
}
},
};
wallpaperPropertyListener 是 Wallpaper Engine 独有的对象，在其他浏览器中无效
壁纸项目中添加的用户属性通过 properties.[属性关键字] 来访问
if (properties.属性关键字) 实现了在对应关键字 (key) 的属性发生变化时执行 if 内的逻辑
在 if 声明中可以添加更加复杂的逻辑
其他属性的使用可以查看官方文档 Wallpaper Engine – Designer Documentation – User Properties
效果
