前言

uTools 官方的模板插件对于简单查询插件的开发是非常友好的，但是模板插件虽然免除了写 UI 上的繁琐步骤，但是在设置插件参数的时候又显得捉襟见肘，非常难受，一些简单的文本参数还可以变通一下，但是复杂的参数便无能为力，于是简单整理了一个还算简单的模板插件自定义设置界面的做法，抛砖引玉。

模板插件的本质

模板插件也是 uTools 插件，众所周知，普通的 uTools 插件其实是一个单页 web 应用，运行在 Electron 提供的 “浏览器” 里，模板插件也不例外，在模板插件的开发者工具中可以看到，模板插件也是一个完整的 web 应用，模板插件只是在 uTools 里把模板代码的相关参数传进这个通用的 web 插件里面。

既然模板插件也是一个 web，那么留给我们的可操作空间就大了很多，其中一个念头就是:

把模板插件本身的 web 代码给扔了，直接换上我们自己的代码

。

替换

其实很多年前我们就是这么写前端代码的，在 JavaScript 里面，如果我们要改某个页面元素的内容，会用document.getElementById('id').innerHTML='<div>xxx</div>'这样的语句来操作，也就是说，我们在任何时候都可以直接修改页面元素，直接替换成我们自己想要的. 后来在有了现代化的 web 框架之后，这种方式就被抛弃了，但实际上，如果你认真看 vue 或 react 的文档，就会发现，其实这些框架也是用同样的做法实现自己的功能，只不过在被 webpack 等开发工具包装之后，隐藏了这些细节，或者放在不被人注意到的地方。

// Vue
Vue.createApp({
  render() {
    return <h1>Hello, world!</h1>
  }
}).mount('#counter');
// React
ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

所以, 我们通过这种方式来达到自定义设置界面的功能。

编写 UI

虽然用innerHTML可以改变任意元素的内容，但是如果全程使用这个特性来操作的话，那难受程度简直难以想象，有没有省时省力的方式在 JavaScript 里面写 UI 界面呢，答案是JSX，这是一个在 JavaScript 书写 HTML 内容的方案，react 里面用得非常广泛，但 JSX 并不是 react 特有的，实际上 vue 也支持这种方式。

工具

尽管 vue 和 react 的功能和生态都很强大，但是一个小小的模板插件，我们只是想画个简单的 UI，根本不需要用牛刀. 这里推荐一个简单的库来实现: nano-jsx，这是一个号称只有「1kb」大小的 JSX 解析库，并且提供了 TypeScript 和 JavaScript 两种环境下写模板 HTML 的方法。

编码

通过实际的代码来说明上述的内容，这里演示的是 TypeScript 项目代码，JavaScript 项目也是同样的，只要把类型忽略掉就是了。

这是代码的目录结构

utools-template-setting-ts
 ├── webpack.config.js
 ├── tsconfig.json
 ├── public
 │   ├── logo.png
 │   └── plugin.json
 ├── src
 │   ├── css.ts
 │   └── index.tsx
 └── package.json