# config

**Repository Path**: scriptableJS/config

## Basic Information

- **Project Name**: config
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-03-09
- **Last Updated**: 2021-03-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Scriptable Config 使用方式

```javascript

const web = new WebView();
const baseConfig = encodeURIComponent(JSON.stringify([
  {
    title: '组件设置',
    settings: [
      {
        id: 'refreshAfterDate',
        name: '刷新时间',
        val: this.settings.refreshAfterDate,
        type: 'input',
      },
      {
        id: 'BoxJS',
        name: '域名',
        val: this.settings.boxjsDomain,
        type: 'input',
      },
    ],
  },
  {
    title: '颜色设置',
    settings: [
      {
        id: 'lightOpacity',
        name: '亮色透明',
        val: this.settings.lightOpacity,
        type: 'slider',
      },
      {
        id: 'darkOpacity',
        name: '暗色透明',
        val: this.settings.darkOpacity,
        type: 'slider',
      },
      {
        id: 'lightColor',
        name: '亮色字体',
        val: this.settings.lightColor,
        type: 'colorPicker',
      },
      {
        id: 'darkColor',
        name: '暗色字体',
        val: this.settings.darkColor,
        type: 'colorPicker',
      },
      {
        id: 'lightBgColor',
        name: '亮色背景',
        val: [],
        step: 2,
        type: 'colorPickers',
      },
      {
        id: 'darkBgColor',
        name: '暗色背景',
        val: [],
        step: 2,
        type: 'colorPickers',
      },
    ],
  },
]));
const url = `https://scriptablejs.gitee.io/config/#/config?config=${baseConfig}`;
await web.loadURL(url);
injectEventhandler(webView);
await web.present(true);

/**
 * SC 和 web 的通信回调接口，response:返回表单值，固定属性 key
 * response.key: setting(保存回调键)  reset(重置回调键)
 * @param webView
 * @returns {Promise<*>}
 */
function injectEventhandler(webView) {
  const js = `window.addEventListener('catalog-event', (event) => completion(event.detail), false);`;
  return webView.evaluateJavaScript(js, true).then((response) => {
    if (response.key === 'setting') {
      const settings = { ...response };
      delete settings.key;
      console.log(settings);
    }
    if (response.key === "rest") {
        
    }
    return injectEventhandler(webView);
  });
}

```

# Config 组件调用类型

```Typscript
  
  // 配置数组的单个对象
  type settingGroup = {
    title: string;
    html?: string;
    settings: settingType[];
  };
  
  // settings 设置取值  带 ？的属性不必填
  type settingType = {
    id: string; // 保存时，返回的对象的 ID
    name: string; // 组件的中文名称
    val: any; // 组件的值，当组件为colorPickers时，请传入数组。slider时，请传入数字，范围在最大值和最小值间
    type: 'boolean' | 'input' | 'select' | 'radio' | 'colorPicker' | 'colorPickers' | 'slider' | 'dataPicker';
    desc?: string;
    placeholder?: string; // 仅对 input，select 生效，输入框提示文字
    options?: { value: any; text: string }[]; // 仅对 select，radio 生效，显示选项
    min?: number; // 仅对 slider 生效，滑块最小值
    max?: number; // 仅对 slider 生效，滑块最大值
    step?: number; //仅对 colorPickers 颜色选择的个数，slider 滑块值生效
    format?:string; // moment 的 format 仅对 dataPicker 生效
  };

```

# 赞赏码

<img src="https://raw.githubusercontent.com/dompling/Scriptable/master/birthdayCountDown/2Ya.jpg"  width="200" height="200" align="bottom" />