<h2 id="h2_插件说明_1670401111777">插件说明</h2> <p><code class="language-javascript">猿如意</code> 效率工具模块基于开源项目<code class="language-javascript">rubick</code>设计,分为 <code class="language-javascript">UI插件</code>和<code class="language-javascript">系统插件</code> 2类。下面分别介绍这 2 类插件的区别和作用。</p> <ol> <li>UI 插件:都会有 UI 界面,用于和用户交互,且需要通过关键词搜索选择进行使用,比如 hosts切换 插件,有界面展示,且需要在搜索框内搜索关键词选择后进行打开才能使用。</li> <li>系统插件:可能不会有 UI 界面,在 <code class="language-javascript">猿如意</code> 启动的时候,会注册执行系统插件。比如<code class="language-javascript">超级面板</code> 插件,安装完成后,即可在 <code class="language-javascript">猿如意</code> 运行时随时使用,不需要任何关键词和匹配。</li> </ol> <h2 id="h2_开发-ui-插件_1670401111777">开发 UI 插件</h2> <p>一个最基础插件的目录是这样的:</p> <pre><code class="language-javascript">rubick-plugin-demo <span class="hljs-string">|-- index.html</span> <span class="hljs-string">|-- package.json</span> <span class="hljs-string">|-- preload.js</span> </code></pre> <h2 id="h2_文件说明_1670401112159">文件说明</h2> <h3 id="h3_packagejson_1670401112159">package.json</h3> <p>用于指定插件最基础的配置,一个最基础的配置信息如下:</p> <pre><code class="language-json">{ <span class="hljs-variable">&amp;quot</span>;name<span class="hljs-variable">&amp;quot</span>;: <span class="hljs-variable">&amp;quot</span>;rubick-ui-plugin-demo<span class="hljs-variable">&amp;quot</span>;, <span class="hljs-variable">&amp;quot</span>;pluginName<span class="hljs-variable">&amp;quot</span>;: <span class="hljs-variable">&amp;quot</span>;插件demo<span class="hljs-variable">&amp;quot</span>;, <span class="hljs-variable">&amp;quot</span>;description<span class="hljs-variable">&amp;quot</span>;: <span class="hljs-variable">&amp;quot</span>;rubick ui 插件demo<span class="hljs-variable">&amp;quot</span>;, <span class="hljs-variable">&amp;quot</span>;author<span class="hljs-variable">&amp;quot</span>;: <span class="hljs-variable">&amp;quot</span>;muwoo<span class="hljs-variable">&amp;quot</span>;, <span class="hljs-variable">&amp;quot</span>;main<span class="hljs-variable">&amp;quot</span>;: <span class="hljs-variable">&amp;quot</span>;<span class="hljs-keyword">index</span>.html<span class="hljs-variable">&amp;quot</span>;, <span class="hljs-variable">&amp;quot</span>;logo<span class="hljs-variable">&amp;quot</span>;: <span class="hljs-variable">&amp;quot</span>;https://www.img/demo.png<span class="hljs-variable">&amp;quot</span>;, <span class="hljs-variable">&amp;quot</span>;version<span class="hljs-variable">&amp;quot</span>;: <span class="hljs-variable">&amp;quot</span>;0.0.1<span class="hljs-variable">&amp;quot</span>;, <span class="hljs-variable">&amp;quot</span>;preload<span class="hljs-variable">&amp;quot</span>;:<span class="hljs-variable">&amp;quot</span>;preload.js<span class="hljs-variable">&amp;quot</span>;, <span class="hljs-variable">&amp;quot</span>;pluginType<span class="hljs-variable">&amp;quot</span>;: <span class="hljs-variable">&amp;quot</span>;ui<span class="hljs-variable">&amp;quot</span>; } </code></pre> <p>核心字段说明:</p> <ul> <li>name: 插件名称标识,必须同文件夹名称一致</li> <li>pluginName: 插件显示名称,用于展示给使用者</li> <li>description: 插件描述,描述这个插件的作用 </li> <li>author: 插件作者</li> <li>main: 入口文件,一般为 <code class="language-javascript">index.html</code></li> <li>logo: 尺寸建议 200 * 200, 插件的 logo </li> <li>version: 插件的版本 </li> <li>preload: 预加载脚本</li> <li>pluginType: 插件类型,枚举:ui, system. 当前选 ui </li> </ul> <h3 id="h3_indexhtml_1670401112258">index.html</h3> <p>插件的入口文件,用于展示插件的样式,一个最基础的 <code class="language-javascript">html</code> 结构可以是这样:</p> <pre><code class="language-html"><span class="hljs-variable">&amp;lt</span>;!DOCTYPE html<span class="hljs-variable">&amp;gt</span>; <span class="hljs-variable">&amp;lt</span>;html<span class="hljs-variable">&amp;gt</span>; <span class="hljs-variable">&amp;lt</span>;body<span class="hljs-variable">&amp;gt</span>; hello 猿如意 <span class="hljs-variable">&amp;lt</span>;button id=<span class="hljs-variable">&amp;quot</span>;showNotification<span class="hljs-variable">&amp;quot</span>;<span class="hljs-variable">&amp;gt</span>;通知<span class="hljs-variable">&amp;lt</span>;/button<span class="hljs-variable">&amp;gt</span>; <span class="hljs-variable">&amp;lt</span>;/body<span class="hljs-variable">&amp;gt</span>; <span class="hljs-variable">&amp;lt</span>;script<span class="hljs-variable">&amp;gt</span>; document.getElementById(<span class="hljs-string">'showNotification'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =<span class="hljs-variable">&amp;gt</span>; { <span class="hljs-keyword">window</span>.showNotificatio<span class="hljs-meta">n</span>(); }) <span class="hljs-variable">&amp;lt</span>;/script<span class="hljs-variable">&amp;gt</span>; <span class="hljs-variable">&amp;lt</span>;/html<span class="hljs-variable">&amp;gt</span>; </code></pre> <h3 id="h3_preloadjs_1670401112315">preload.js</h3> <p>细心的同学可能已经注意到上面的 <code class="language-javascript">index.html</code> 使用了一个全局函数 <code class="language-javascript">showNotification</code> 那么这个函数是在哪里定义的呢?<br>答案就是在 <code class="language-javascript">preload.js</code> 里面。<code class="language-javascript">preload.js</code> 可以为页面提供全局函数</p> <pre><code class="language-js"><span class="hljs-variable language_">window</span>.<span class="hljs-property">showNotification</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) { <span class="hljs-variable language_">window</span>.<span class="hljs-property">rubick</span>.<span class="hljs-title function_">showNotification</span>(<span class="hljs-string">'HI, 猿如意'</span>) } </code></pre> <h2 id="h2_api列表_1670401112330">API列表</h2> <h3 id="h3_事件_1670401112330">事件</h3> <table> <thead> <tr> <th>api</th> <th>说明</th> </tr> </thead> <tbody><tr> <td>onPluginEnter</td> <td>进入插件</td> </tr> <tr> <td>onPluginReady</td> <td>插件初始化</td> </tr> <tr> <td>onPluginOut</td> <td>退出插件</td> </tr> <tr> <td>onShow</td> <td>客户端唤起</td> </tr> </tbody></table> <h3 id="h3_方法_1670401112330">方法</h3> <table> <thead> <tr> <th>api</th> <th>说明</th> <th>示例</th> </tr> </thead> <tbody><tr> <td>openDevtool</td> <td>打开开发者工具</td> <td>window.rubick.openDevtool()</td> </tr> <tr> <td>showMainWindow</td> <td>显示主窗口</td> <td>window.rubick.showMainWindow()</td> </tr> <tr> <td>hideMainWindow</td> <td>隐藏主窗口</td> <td>单元格</td> </tr> <tr> <td>minimizeMainWindow</td> <td>最小化主窗口</td> <td>单元格</td> </tr> <tr> <td>setMainOpacity</td> <td>设置主窗口透明度</td> <td>window.rubick.setMainOpacity(0.8)</td> </tr> <tr> <td>showNotification</td> <td>发送桌面通知</td> <td>window.rubick.showNotification(&amp;amp;quot;Hello World!&amp;amp;quot;)</td> </tr> <tr> <td>isFullScreen</td> <td>返回窗口全屏状态</td> <td>window.rubick.isFullScreen()</td> </tr> <tr> <td>setMainWindowFullScreen</td> <td>设置窗口全屏状态</td> <td>window.rubick.setMainWindowFullScreen(true)</td> </tr> <tr> <td>login</td> <td>打开登录</td> <td>window.login()</td> </tr> <tr> <td>setExpendHeight</td> <td>设置窗口高度</td> <td>window.rubick.setExpendHeight(900)</td> </tr> <tr> <td>setSubInput</td> <td>设置顶部输入框状态</td> <td>window.rubick.setSubInput(onChange, placeholder, isFocus)</td> </tr> <tr> <td>setSubInputValue</td> <td>设置顶部输入框内容</td> <td>window.rubick.setSubInputValue('输入关键字搜索')</td> </tr> <tr> <td>removeSubInput</td> <td>清楚顶部输入框内容</td> <td>window.rubick.removeSubInput()</td> </tr> <tr> <td>dbStorage.getItem</td> <td>获取本地存储</td> <td>window.rubick.dbStorage.getItem(&amp;amp;quot;userInfo&amp;amp;quot;)</td> </tr> <tr> <td>dbStorage.setItem</td> <td>设置本地存储</td> <td>window.rubick.dbStorage.setItem(&amp;amp;quot;userInfo&amp;amp;quot;, { name: &amp;amp;quot;猿如意&amp;amp;quot; })</td> </tr> <tr> <td>dbStorage.removeItem</td> <td>删除本地存储</td> <td>window.rubick.dbStorage.removeItem(&amp;amp;quot;userInfo&amp;amp;quot;)</td> </tr> <tr> <td>shellOpenExternal</td> <td>使用默认浏览器打开</td> <td>window.rubick.shellOpenExternal(url)</td> </tr> <tr> <td>isMacOs</td> <td>是否为MacOs</td> <td>window.rubick.isMacOs</td> </tr> <tr> <td>isWindows</td> <td>是否为Windows</td> <td>window.rubick.isWindows</td> </tr> <tr> <td>isLinux</td> <td>是否为Linux</td> <td>window.rubick.isLinux</td> </tr> <tr> <td>shellShowItemInFolder</td> <td>在文件夹中打开</td> <td>window.rubick.shellShowItemInFolder(path)</td> </tr> </tbody></table> <h2 id="h2_测试写好的插件_1670401112330">测试写好的插件</h2> <ol> <li>打开 “猿如意” 客户端。进入“我的下载”</li> <li>点击左侧菜单 “创作中心”,然后进去 “效率工具”。</li> <li>把插件的package.json拖入虚线框内后,点击安装,进入我的下载点击运行即可;</li> <li>如需修改代码,无需删除重新安装,退出插件后再次点击运行即可看到更新</li> </ol> <h2 id="h2_提交插件到猿如意_1670401112330">提交插件到猿如意</h2> <p>仓库地址:<a href="https://gitcode.net/devbit/market" id="textarea_1670401111707_1670401112336_0" target="_blank"><span class="md_link_url">https://gitcode.net/devbit/market</span></a></p> <h3 id="h3_公共资源_1670401112330">公共资源</h3> <p>jquery: <a href="http://cdn-static-devbit.csdn.net/devbit-static/js/jquery-3.3.1.min.js" id="textarea_1670401111707_1670401112336_1" target="_blank"><span class="md_link_url">http://cdn-static-devbit.csdn.net/devbit-static/js/jquery-3.3.1.min.js</span></a><br>vue: <a href="http://cdn-static-devbit.csdn.net/devbit-static/js/vue.min.js" id="textarea_1670401111707_1670401112336_2" target="_blank"><span class="md_link_url">http://cdn-static-devbit.csdn.net/devbit-static/js/vue.min.js</span></a><br>tailwind.css: <a href="http://cdn-static-devbit.csdn.net/devbit-static/css/tailwind.min.css" id="textarea_1670401111707_1670401112336_3" target="_blank"><span class="md_link_url">http://cdn-static-devbit.csdn.net/devbit-static/css/tailwind.min.css</span></a></p>
Logo

猿如意是一款面向开发者的辅助开发工具箱,包含了效率工具、开发工具下载,文档教程,代码片段搜索,全网搜索等功能模块。帮助开发者提升开发效率,帮你从“问题”找到“答案”。

更多推荐