猿如意效率工具开发文档
猿如意效率工具开发文档
·
<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">&quot</span>;name<span class="hljs-variable">&quot</span>;: <span class="hljs-variable">&quot</span>;rubick-ui-plugin-demo<span class="hljs-variable">&quot</span>;,
<span class="hljs-variable">&quot</span>;pluginName<span class="hljs-variable">&quot</span>;: <span class="hljs-variable">&quot</span>;插件demo<span class="hljs-variable">&quot</span>;,
<span class="hljs-variable">&quot</span>;description<span class="hljs-variable">&quot</span>;: <span class="hljs-variable">&quot</span>;rubick ui 插件demo<span class="hljs-variable">&quot</span>;,
<span class="hljs-variable">&quot</span>;author<span class="hljs-variable">&quot</span>;: <span class="hljs-variable">&quot</span>;muwoo<span class="hljs-variable">&quot</span>;,
<span class="hljs-variable">&quot</span>;main<span class="hljs-variable">&quot</span>;: <span class="hljs-variable">&quot</span>;<span class="hljs-keyword">index</span>.html<span class="hljs-variable">&quot</span>;,
<span class="hljs-variable">&quot</span>;logo<span class="hljs-variable">&quot</span>;: <span class="hljs-variable">&quot</span>;https://www.img/demo.png<span class="hljs-variable">&quot</span>;,
<span class="hljs-variable">&quot</span>;version<span class="hljs-variable">&quot</span>;: <span class="hljs-variable">&quot</span>;0.0.1<span class="hljs-variable">&quot</span>;,
<span class="hljs-variable">&quot</span>;preload<span class="hljs-variable">&quot</span>;:<span class="hljs-variable">&quot</span>;preload.js<span class="hljs-variable">&quot</span>;,
<span class="hljs-variable">&quot</span>;pluginType<span class="hljs-variable">&quot</span>;: <span class="hljs-variable">&quot</span>;ui<span class="hljs-variable">&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">&lt</span>;!DOCTYPE html<span class="hljs-variable">&gt</span>;
<span class="hljs-variable">&lt</span>;html<span class="hljs-variable">&gt</span>;
<span class="hljs-variable">&lt</span>;body<span class="hljs-variable">&gt</span>;
hello 猿如意
<span class="hljs-variable">&lt</span>;button id=<span class="hljs-variable">&quot</span>;showNotification<span class="hljs-variable">&quot</span>;<span class="hljs-variable">&gt</span>;通知<span class="hljs-variable">&lt</span>;/button<span class="hljs-variable">&gt</span>;
<span class="hljs-variable">&lt</span>;/body<span class="hljs-variable">&gt</span>;
<span class="hljs-variable">&lt</span>;script<span class="hljs-variable">&gt</span>;
document.getElementById(<span class="hljs-string">'showNotification'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =<span class="hljs-variable">&gt</span>; {
<span class="hljs-keyword">window</span>.showNotificatio<span class="hljs-meta">n</span>();
})
<span class="hljs-variable">&lt</span>;/script<span class="hljs-variable">&gt</span>;
<span class="hljs-variable">&lt</span>;/html<span class="hljs-variable">&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;quot;Hello World!&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;quot;userInfo&amp;quot;)</td>
</tr>
<tr>
<td>dbStorage.setItem</td>
<td>设置本地存储</td>
<td>window.rubick.dbStorage.setItem(&amp;quot;userInfo&amp;quot;, { name: &amp;quot;猿如意&amp;quot; })</td>
</tr>
<tr>
<td>dbStorage.removeItem</td>
<td>删除本地存储</td>
<td>window.rubick.dbStorage.removeItem(&amp;quot;userInfo&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>
猿如意是一款面向开发者的辅助开发工具箱，包含了效率工具、开发工具下载，文档教程，代码片段搜索，全网搜索等功能模块。帮助开发者提升开发效率，帮你从“问题”找到“答案”。
更多推荐
5
1- 0
已为社区贡献11条内容
所有评论(0)