• 插件发布

  • [分享] 关于模板插件自定义设置界面的其中一种做法

maoyiba

这是一个使用 webpack 打包的项目源码，webpack 类比 maven，需要使用 webpack 将源码重新打包，打包的结果是 preload.js，项目源码并不能直接运行

解压源码后，以utools-template-setting-ts为例，在项目目录依次执行命令行

npm install
npm run build

在生成的 dist 目录里可以看到重新打包后的结果，这才是最终的插件目录

      5 个月 后

      https://files.catbox.moe/uu4tte.png
      如图,我以前买过会员,现在版本升级以后,显示我不是会员,要重新开会员

      leqq00

      首先重启 uTools 或重新登录 uTools 账号尝试一下，最近 uTools 账号自动退出导致很多人都出了问题；然后检查一下网络情况，uTools 的网络有没有被拦截；最后如果还是有问题，麻烦再 @ 我一下，我会和 uTools 官方一起查一下付款信息有没有问题。

        lanyuanxiaoyao 大佬，我使用你的模板尝试开发。但是引入第三方包node-fetch 却不能正常使用，fetch打印出来显示是module，而正常情况下，应该是f函数。

          // noinspection JSXNamespaceValidation

const Nano = require('nano-jsx')
const fetch = require('node-fetch')
const { Fragment, jsx } = require('nano-jsx')
const { PureCss, CustomCss } = require('./css')

const SettingUI = () => {
  let submit = async event => {
    utools.dbStorage.setItem("username", document.getElementById('username').value)
    utools.dbStorage.setItem("password", document.getElementById('password').value)
    utools.showNotification('保存成功')
  }

  return jsx`
<${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 id="username" class="pure-input-1"  placeholder="请输入邮箱" />
        <label for="stacked-password">密码</label>
        <input id="password" class="pure-input-1" placeholder="请输入密码" />
        <div class="form-button-group">
          <button type="submit" class="pure-button pure-button-primary" onclick=${event => submit(event)}>保存</button>
          <button class="pure-button"  onclick=${event => utools.outPlugin()}>取消</button>
        </div>
    </fieldset>
  </form>
</body>
</${Fragment}>`
}

window.exports = {
  'setting': {
    args: {
      enter(action, callback) {
        utools.setExpendHeight(480)
        Nano.render(jsx`${SettingUI}`, document.documentElement)
        document.getElementById('username').value = utools.dbStorage.getItem("username")
        document.getElementById('password').value = utools.dbStorage.getItem("password")
      }
    },
    mode: 'none'
  },
  'index': {
    args: {
      enter(action, callback) {
        document.getElementById('setting')?.remove()
        callback([
          {
            title: '新建工单',
            description: '默认科室信息科',
            icon: 'logo.png'
          }
        ])
      },
      search: (action, searchWord, callbackSetList) => {
        // 获取一些数据
        // 执行 callbackSetList 显示出来
        callbackSetList([
          {
            title: '新建工单',
            description: '默认科室信息科',
            icon: 'logo.png',
            text: searchWord
          }
        ])
      },
      select: async (action, itemData, callbackSetList) => {

       console.log(fetch)                  //Module
       fetch("http://xxxx")               //报错fetch not a fun

      },
      placeholder: "新建工单"
    },
    mode: 'list'
  }
}

            梧桐叶纷飞

            我简单试了一下类似的代码，我在 ts 的模板里没有问题，js 的模板里有问题，那就应该 node-fetch 这个库的模块类型的问题，我之前没有用过 node-fetch，也许时 webpack 打包的时候需要额外的设置

            无论如何，如果你只是想要使用 fetch 的话，可以直接拥 fetch，也不用额外的三方库，Electron 没有跨域问题，浏览器的 fetch 就行了

              lanyuanxiaoyao
              感谢大佬的耐心解答，我发现 有道翻译 这个插件，他是用另一种方案实现的 设置界面 和 主程序界面。
              可以明显看出 其设置界面与 这种方案不同。 大佬有思路吗，可以指点下其如何实现的设置界面。
              1

                leqq00

                你还有其他付费插件吗？他们正常吗？因为这个插件不涉及第三方服务，都是直连 uTools 服务的，此外，在发生这个事情之前有做过其他操作吗？比如杀毒软件有没有拦截 uTools 的相关接口？

                  yftls

                  你这种情况就是连接 uTools 服务不稳定导致的，像之前很多人遇到过账号直接退出的情况，说不定是同一个问题，后面对于这种情况插件应该加入更友好一点的提示，后面版本加上相关的排查功能，可能问题就更清晰一些，现在我也码不准是什么问题导致的，但过往没有出现过问题的话，现在也应该没有问题，这个付费的逻辑上线之后就已经快一年没有改动了

                    7 天 后
                    说点什么吧...
                    闽ICP备18007474号