cover_image

开发 | 一篇文章,带你从 0 到 1 开发小程序插件

cloud小程序微信教程开发插件
Astrian 🦊

<p><img class="aligncenter size-full wp-image-872597" src="https://images.ifanr.cn/wp-content/uploads/2017/07/minapp-dev-final-feature.jpg" alt="" width="1200" height="750" srcset="http://www.ifanr.com/wp-content/uploads/2017/07/minapp-dev-final-feature.jpg 1200w, http://www.ifanr.com/wp-content/uploads/2017/07/minapp-dev-final-feature-360x225.jpg 360w, http://www.ifanr.com/wp-content/uploads/2017/07/minapp-dev-final-feature-768x480.jpg 768w, http://www.ifanr.com/wp-content/uploads/2017/07/minapp-dev-final-feature-1024x640.jpg 1024w" sizes="(max-width: 1200px) 100vw, 1200px" /></p> <p><span style="color: #605eac;"><strong>知晓程序注:</strong></span></p> <p><span style="color: #808080;">前不久,微信释放了一个重磅新能力:微信小程序插件功能。有了它,小程序开发者就可以通过这个功能,强化自身小程序能力;小程序服务提供商也可以用它,为开发者、用户提供强大的小程序功能支持,进一步拓展小程序能力。</span></p> <p><span style="color: #808080;">插件固然好,但如何从零开发一个插件呢?今天,知晓程序就来手把手,教你如何从零开发一款微信小程序插件。</span></p> <p><span style="color: #808080;">需要注意的是,本推送为全文节选。关注「<span style="color: #605eac;">知晓程序</span>」微信公众号,回复「<span style="color: #605eac;">教程全文</span>」,获取本教程全文下载地址。</span></p> <h3><span style="color: #605eac;">新建插件</span></h3> <p>新建插件的操作非常简单。只需要在微信开发者工具中新建小程序项目,并选择「建立插件快速启动模板」即可,开发者工具就会自动创建插件项目。</p> <p>需要注意的是,新建项目时,需要确保选择的项目目录是空目录,否则不会显示「建立插件快速启动模板」选项。</p> <p><img class="aligncenter size-full wp-image-997027" src="https://images.ifanr.cn/wp-content/uploads/2018/03/Artboard-3.jpg" alt="" width="1000" height="1058" srcset="http://www.ifanr.com/wp-content/uploads/2018/03/Artboard-3.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2018/03/Artboard-3-360x381.jpg 360w, http://www.ifanr.com/wp-content/uploads/2018/03/Artboard-3-768x813.jpg 768w, http://www.ifanr.com/wp-content/uploads/2018/03/Artboard-3-968x1024.jpg 968w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <h3><span style="color: #605eac;">插件目录结构</span></h3> <p>生成的项目结构主要分为两大块,一个是 <code>plugin</code>,一个是 <code>miniprogram</code>。<code>plugin</code> 中放置我们插件的逻辑代码,主要分为 <code>api</code> 和 <code>components</code> 两个部分; <code>miniprogram</code> 中放置的是插件的使用示例或者测试示例。</p> <p><img class="aligncenter size-full wp-image-997029" src="https://images.ifanr.cn/wp-content/uploads/2018/03/Artboard-3-1.jpg" alt="" width="1000" height="1058" srcset="http://www.ifanr.com/wp-content/uploads/2018/03/Artboard-3-1.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2018/03/Artboard-3-1-360x381.jpg 360w, http://www.ifanr.com/wp-content/uploads/2018/03/Artboard-3-1-768x813.jpg 768w, http://www.ifanr.com/wp-content/uploads/2018/03/Artboard-3-1-968x1024.jpg 968w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <h3><span style="color: #605eac;">插件 API 接口开发</span></h3> <p>以写一个返回「hello world!」的接口为例,我们可以在 <code>plugin/api/data.js</code> 中写下如下代码:</p> <pre><code>function sayHelloWorld() { return 'hello world!' } module.exports = { sayHelloWorld }</code></pre> <p>在 <code>plugin/index.js</code> 中将我们需要暴露出需要给插件使用者使用的接口</p> <pre><code>var data = require('./api/data.js') module.exports = { sayHelloWorld: data.sayHelloWorld }</code></pre> <p>然后在 plugin/plugin.json 的配置文件中,配置插件的入口,默认如下:</p> <pre><code>{   "main": "index.js" }</code></pre> <p>然后在 miniprogram 中使用该接口。如在 miniprogram/pages/index/index.js 中使用:</p> <pre><code>var plugin = requirePlugin("myPlugin") Page({  onLoad: function() {   console.log(plugin.sayHelloWorld())  } })</code></pre> <p>其中 myPlugin 为我们的插件名,微信默认配置。</p> <h3><span style="color: #605eac;">插件组件开发</span></h3> <p>同样,以写一个显示 「hello world!」的组件为例,在 plugin/components 下新建一个 helloWorld 文件夹,点击该文件夹,右键生成组件,与普通组件一样,生成以下四个文件。</p> <p><img class="aligncenter size-full wp-image-997145" src="https://images.ifanr.cn/wp-content/uploads/2018/03/image.png" alt="" width="1000" height="311" srcset="http://www.ifanr.com/wp-content/uploads/2018/03/image.png 1000w, http://www.ifanr.com/wp-content/uploads/2018/03/image-360x112.png 360w, http://www.ifanr.com/wp-content/uploads/2018/03/image-768x239.png 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <p>在 helloWorld.wxml 中编写视图代码:</p> <pre><code>&lt;view&gt;hello world!&lt;/view&gt;</code></pre> <p>同样,在 pluginj/plugin.json 中配置需要暴露给插件使用者使用的组件:</p> <pre><code>{ "publicComponents": {    "hello-world": "components/helloWorld/helloWorld"   },   "main": "index.js" }</code></pre> <p>在需要引用到该组件的页面的配置文件中,做好配置即可,加入我们要在 index 页面使用,则需要在 miniprogram/pages/index/index.json 中进行如下配置:</p> <pre><code>{   "usingComponents": {    "hello-world": "plugin://myPlugin/hello-world"   } }</code></pre> <p>然后再在 miniprogram/pages/index/index.wxml 中使用:</p> <pre><code>&lt;hello-world/&gt;</code></pre> <p>接下来,我们只需完整开发插件,然后选择上传,最后提交审核、发布,其他人就可以使用你的插件了。</p> <p><strong>关注「<span style="color: #605eac;">知晓程序</span>」微信公众号,回复「<span style="color: #605eac;">开发</span>」,让你的小程序性能再上一层楼。</strong></p> <p class=""><img class="size-full wp-image-963729 aligncenter" src="https://images.ifanr.cn/wp-content/uploads/2018/01/qrcode.gif" alt="" width="750" height="375" srcset="http://www.ifanr.com/wp-content/uploads/2018/01/qrcode.gif 750w, http://www.ifanr.com/wp-content/uploads/2018/01/qrcode-360x180.gif 360w" sizes="(max-width: 750px) 100vw, 750px" /></p>