quick-start.md

快速上手

1. 克隆本项目：

   git clone https://github.com/2214962083/ios-scriptable-tsx.git

2. 进入 ios-scriptable-tsx 目录，执行 npm install 安装依赖

3. 在 ./src/scripts 目录下新创建一个文件叫 helloWorld.tsx

4. 把下面代码粘贴上去：

    class HelloWorld {
      async init() {
        // ListWidget 实例
        const widget = (await this.render()) as ListWidget
        // 注册小部件
        Script.setWidget(widget)
        // 调试用
        !config.runsInWidget && (await widget.presentMedium())
        // 脚本结束
        Script.complete()
      }
      async render(): Promise<unknown> {
        return (
          <wbox>
            <wspacer></wspacer>
            <wtext font={30} textAlign="center">
              Hello World
            </wtext>
            <wspacer></wspacer>
          </wbox>
        )
      }
    }
    
    new HelloWorld().init()

5. 然后，去 ./src/index.ts 删除已有的东西，引入helloWorld.tsx

   // 打包入口默认是 ./src/index.ts
   // 这样引入其他位置的脚本，就会打包进来
   import './scripts/helloWorld.tsx'

6. 执行 npm run watch，并用手机扫描命令终端的二维码，打开引导页（手机和 pc 必须处于同一个局域网下面），我的是这样的：

   

7. 根据引导页提示操作，此举是用来安装基础包，若已安装基础包，无需再进引导页：

   

8. 在 scriptable 右上角 + 创建一个空脚本，命名为 你好世界 ：

   

9. 点击基础包，选择远程开发， 选择 你好世界.js：

   

10. 输入同步地址，http://IP地址:端口/打包后的文件 ，默认是 pc 上提示的链接加上 /index.js，同步成功，看到小部件预览效果了：

    

11. 长按桌面，点击添加 scriptable 小部件，然后长按小部件，点击编辑小部件 ：

    

12. Script 选择 你好世界，就能看到效果了，恭喜你完成新手教学 ：

    

命令说明

命令	命令作用	补充说明
npm run dev	以开发环境打包单个文件	process.env.NODE_ENV = development 默认不混淆代码、不加密代码 单文件打包入口默认是./src/index.ts 可在 scriptable.config.js 里配置 inputFile 以修改它的打包入口文件。
npm run dev:all	以开发环境打包多个文件	process.env.NODE_ENV = development 默认不混淆代码、不加密代码 多文件打包入口默认是./src/scripts/ 可在 scriptable.config.js 里配置 inputDir 以修改它的打包入口文件夹。
npm run build	以生产环境打包单个文件	process.env.NODE_ENV = production 默认混淆代码、加密代码 单文件打包入口默认是./src/index.ts 可在 scriptable.config.js 里配置 inputFile 以修改它的打包入口文件。
npm run build:all	以生产环境打包多个文件	process.env.NODE_ENV = production 默认混淆代码、加密代码 多文件打包入口默认是./src/scripts/ 可在 scriptable.config.js 里配置 inputDir 以修改它的打包入口文件夹。
npm run watch	以开发环境打包单个文件 并开启 server ，监听文件修改实时编译	在执行 npm run dev 的基础上，开启了本地 9090 端口的 server server 会自动映射打包后的文件夹到 http:// 127.0.0.1:9090/ 默认是 ./dist 文件夹，可在 scriptable.config.js 的 outputDir 配置它。

所有打包输出文件夹默认都是 ./dist，你可以在 scriptable.config.js 里配置 outputDir 以修改它的打包输出的文件夹

注意

由于打包器保留字 module 和 Scriptable 的全局变量 module 冲突，所以建议在访问 Scriptable  module 变量时，改用 MODULE 访问。