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

您当前的位置：首页 > 解决方案

导语：新建插件工程新建插件的操作非常简单。只需要在微信开发者工具中新建小程序项目，并选择「建立插件快速启动模板」即可，开发者工具就会自动创建插件项目。需要注意的是，新

新建插件工程

新建插件的操作非常简单。只需要在微信开发者工具中新建小程序项目，并选择「建立插件快速启动模板」即可，开发者工具就会自动创建插件项目。

需要注意的是，新建项目时，需要确保选择的项目目录是空目录，否则不会显示「建立插件快速启动模板」选项。

插件目录结构

生成的项目结构主要分为两大块，一个是 plugin，一个是 miniprogram。plugin 中放置我们插件的逻辑代码，主要分为 api 和 components 两个部分； miniprogram 中放置的是插件的使用示例或者测试示例。

插件 API 接口开发

以写一个返回「hello world!」的接口为例，我们可以在 plugin/api/data.js 中写下如下代码：

function sayHelloWorld() {  return 'hello world!'}module.exports = {
  sayHelloWorld
}

在 plugin/index.js 中将我们需要暴露出需要给插件使用者使用的接口：

var data = require('./api/data.js')module.exports = {
  sayHelloWorld: data.sayHelloWorld
}

然后在 plugin/plugin.json 的配置文件中，配置插件的入口，默认如下：

{  "main": "index.js"}

然后在 miniprogram 中使用该接口。如在 miniprogram/pages/index/index.js 中使用：

var plugin = requirePlugin("myPlugin")
Page({
 onLoad: function() {
  console.log(plugin.sayHelloWorld())
 }
})

其中 myPlugin 为我们的插件名，微信默认配置。

插件组件开发

同样，以写一个显示「hello world!」的组件为例，在 plugin/components 下新建一个 helloWorld 文件夹，点击该文件夹，右键生成组件，与普通组件一样，生成以下四个文件。

在 helloWorld.wxml 中编写视图代码：

<view>hello world!</view>

同样，在 plugin/plugin.json 中配置需要暴露给插件使用者使用的组件：

{
  "publicComponents": {
    "hello-world": "components/helloWorld/helloWorld"
  },
  "main": "index.js"
}

在需要引用到该组件的页面的配置文件中，做好配置即可，加入我们要在 index 页面使用，则需要在 miniprogram/pages/index/index.json 中进行如下配置：

{
  "usingComponents": {
    "hello-world": "plugin://myPlugin/hello-world"
  }
}

然后再在 miniprogram/pages/index/index.wxml 中使用：

<hello-world/>

接下来，我们只需完整开发插件，然后选择上传，最后提交审核、发布，其他人就可以使用你的插件了。

温馨提示：这篇文章没有解决您的问题？欢迎添加微信：18948083295，有微信小程序专业人员，保证有问必答。转载本站文章请注明转自http://www.okeydown.com/（微信小程序网）。

推荐版块

热门话题

热点关注

关注我们

微信小程序官方微信

栏目最新

栏目推荐