想法来源

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>
);

1. $render 就是指把括号中的UI结构画出来。
2. <text></text>标签是文本标签，显示出一个文本。
3. 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>
);

可见vstack下的所有的text都是垂直排列。

支持哪些API

• console 控制台输出日志，主要用于调试
• fetch 发起网络请求
• $device 获取设备信息
• $gradient 创建渐变颜色
• $render 渲染UI结构

emmm，目前确实只支持这些，刚发布第一个版本嘛～

今天是星期五吗？

再实现个稍微复杂的，直接上手机截图：

预览是这样：

手机里展示这样：

emmm，貌似显示不全，可以调整文字大小哈。

下载地址

App Store搜索 ScriptWidget 即可，或点击链接：

https://apps.apple.com/cn/app/scriptwidget/id1555600758

使用步骤

使用方法很常规，大家直接见图哈

创建脚本

点击右上角加号，进入 Create from templates:

例如选择星期五这个 Is Friday Today, 然后点击创建 Create 

添加Widget

1. 长按iPhone的桌面
2. 找到 ScriptWidget 应用.
3. 选择一个Widget大小
4. 然后点击桌面上的Widget，默认显示 No script selected ，选择刚才创建的脚本。
5. 选择执行频率，不选择的话，默认1小时执行一次脚本。
6. 完成。