ScriptWidget 发布，创作专属你的小组件

想法来源

iOS14的Widget功能着实让iPhone的桌面热闹了起来，各种Widget雨后春笋般开发出来。作为开发者自然就想去开发一款App，然而在试用了各种Widget应用后，不擅长UI开发的我退缩了，这些Widget都太漂亮太好看了。其中在试用了JSBox和Scriptable后，惊叹Widget还可以用JavaScript编写，只是开发起来“不那么直观”。开发Widget应用的想法暂时搁置了。

直到去年年底，工作中接触了ReactJS这个强大的前端框架。突然某一天想到，能否用React JSX这样的标签语法来强化一下JSBox和Scriptable的Widget开发体验呢。

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

直到过年期间，各种查阅资料后，发现并不复杂。和普通JavaScript代码之间，只需要用babel来做一层翻译。

于是，就诞生了ScriptWidget。

简单介绍

先看最简单的ScriptWidget脚本：

$render(
  <text font="title">Hello ScriptWidget</text>
);

$render 就是指把括号中的UI结构画出来。
<text></text>标签是文本标签，显示出一个文本。
font="title" 就是设置文本的字体大小。title是内置的字符串描述的文本大小，还有其他的数值，可以见文档。

上面的代码，可以显示出下图的Widget（下图是在Widget中的预览功能）。

好了。就这么简单。

还支持哪些标签

上面展示了text标签，目前ScriptWidget所有支持的标签如下：

text 显示文本
image 显示图片
vstack 垂直布局
hstack 水平布局
zstack 上下布局（Z轴布局？不知道怎么称呼了）
spacer 自动填充空间
date 日期

是的，目前只支持这几个标签。

再看个稍微复杂的代码：

$render(
  <vstack frame="max">
    <text font="title">Hello ScriptWidget</text>
    <text font="caption" color="red">
      Hello ScriptWidget
    </text>
    <text font="caption" background="blue" color="white">
      Hello ScriptWidget
    </text>
  </vstack>
);