- 已编辑
前言
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其中index.tsx是插件的入口，里面定义了所有东西，其中的内容如下，需要解释的部分有一些注释:
import Nano, {Component, Fragment} from 'nano-jsx'
import {CustomCss, PureCss} from './css'
class Setting extends Component {
submit() {
alert('submit')
}
render() {
return (
<Fragment>
<head>
<title>Setting</title>
<style>{PureCss}</style>
<style>{CustomCss}</style>
// 这一行必须要有(在下面会详说)
<script src="index.js"/>
</head>
<body>
// 这一行也必须要有(在下面会详说)
<div id="root"/>
<form id="setting" class="pure-form pure-form-stacked">
<fieldset>
<legend>用户设置</legend>
<label for="stacked-email">邮箱</label>
<input
class="pure-input-1"
type="email"
placeholder="请输入邮箱"
/>
<label for="stacked-password">密码</label>
<input
class="pure-input-1"
type="password"
placeholder="请输入密码"
/>
<div class="form-button-group">
<button
type="submit"
class="pure-button pure-button-primary"
onclick={() => this.submit()}
>
保存
</button>
<button class="pure-button">取消</button>
</div>
</fieldset>
</form>
</body>
</Fragment>
)
}
}
// @ts-ignore
window.exports = {
'setting': {
args: {
enter(action, callback) {
utools.setExpendHeight(480)
Nano.render(<Setting/>, document.documentElement)
},
},
mode: 'none',
},
'index': {
args: {
enter(action, callback) {
document.getElementById('setting')?.remove()
callback([
{
title: 'Title',
description: 'Description',
icon: 'logo.png',
},
])
},
},
mode: 'list',
},
}UI
如果只有干瘪的原生界面，那就远远称不上好看，因此在上述例子里引入了一个纯 CSS 的 UI 库PureCSS，用来美化界面，为什么选择纯 CSS 的库，主要是考虑到模板插件本来就是逻辑简单，体积小巧，再引入一些庞大的 UI 库，有点累赘，所以使用纯 CSS 库，引入 CSS 资源的方式，我采用直接硬编码到代码里面，因为这个使用 JSX 实现的页面并不在 webpack 的管理下，所以 CSS 文件没有办法被自动加载到页面里，所以使用硬编码引入会简单很多。
成果
最后完成的效果如下:
- 模板列表界面
这是模板插件默认的列表界面
- 设置界面
问题和兼容
上面代码中的 JSX 里面有两行代码写着必须要有，分别是 head 里的<script src="index.js"/>和 body 里的<div id="root"/>，这是为什么呢？
前言里提到，这个方案的原理是将页面代码替换掉，而我们又知道模板代码的本质是一个自定义插件，那么新的问题来了，将页面代码替换之后，原来模板插件的页面代码去哪了呢？ 答案就是不见了，也因此带来了一个 bug: 以上述插件为例，在去掉上面那两行不能去掉的代码后，按Setting -> Esc -> Index的顺序操作，会发现，Index 页面并不能正常得显示，显示的内容还是 Setting，尽管插件高度是 Index 的高度。
要说明这个 bug，首先要明白的是，模板插件里面的每个 Feature，都是同一个插件的不同入口，但本质上，不同的 Feature 打开的是同一个插件页面，只是根据 Feature 的不同显示了不同的内容，并没有任何页面上的切换，所以当我们在 Setting 里将页面替换之后，原来模板插件的页面和处理逻辑都被抛掉了，自然无法处理其他 Feature 进入时需要的内容展示。
解决方法也很简单，不要破坏原有的模板插件的结构和引入，在 mode 设置为 none 的情况下，模板插件不会显示内容，自然也不影响 Setting 页面的展示，在其他 Feature 的入口，将 Setting 页面隐藏起来，就不会影响到正常模板插件页面的显示了. 而上面的两行「必要代码」，其实就是原本模板插件的页面结构和引入，保留在我们自己定义的设置页面里，就可以让自定义的页面代码和模板插件的页面代码共存了。
结束
这就是在模板插件里面实现自定义设置界面的简单方式，具体的应用可以在插件市场搜索「书签与历史记录」插件体验(给个好评
). 方案的核心是在 JavaScript 里直接替换掉原有的模板插件页面，达到自定义的效果，并通过 JSX 简化在 JavaScript 里写 HTML 的复杂程度，最终达到不错的效果，足以应付一般的使用场景。
文中提到的示例代码分为 JavaScript 版本和 TypeScript 版本，没有什么区别，看哪个用起来顺手罢了，代码提供在这里: 下载源码
希望你也能体验到通过写插件满足自己需求的乐趣
感谢分享
