微信小程序开发之——插件

最新推荐文章于 2025-03-20 09:53:25 发布

PGzxc

最新推荐文章于 2025-03-20 09:53:25 发布

阅读量1.7k

点赞数

分类专栏：微信小程序文章标签：小程序插件

本文链接：https://blog.csdn.net/Calvin_zhou/article/details/120830501

版权

微信小程序专栏收录该内容

99 篇文章

订阅专栏

本文详细介绍了小程序插件的开发过程，包括创建插件项目、自定义组件开发、插件JS接口方法的实现以及插件配置。通过示例展示了如何将组件封装成插件，并提供了测试插件的方法，涉及组件、页面和接口的配置与编写。同时，文章还涵盖了插件目录结构、测试用的小程序页面配置以及如何在小程序中使用插件的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一概述

插件是对js接口(export一些js接口方法)，自定义组件或页面的封装，用于嵌入到小程序中使用
插件的开发和上传发布和小程序一样，插件一旦发布，第三方使用时无法查看插件的代码
插件开发完成，未发布前，可以使用miniprogram目录中编写小程序代码来测试插件

二插件目录结构介绍

2.1 创建插件项目

2.2 默认插件项目

插件项目预览

插件项目目录介绍

plugin目录：插件代码目录
miniprogram目录：防止一个小程序，用于调试插件
doc目录：用于放置插件开发文档

插件(plugin)目录结构

个插件可以包含若干个自定义组件、页面，和一组 js 接口

plugin
├── components
│   ├── hello-component.js   // 插件提供的自定义组件（可以有多个）
│   ├── hello-component.json
│   ├── hello-component.wxml
│   └── hello-component.wxss
├── pages
│   ├── hello-page.js        // 插件提供的页面（可以有多个，自小程序基础库版本 2.1.0 开始支持）
│   ├── hello-page.json
│   ├── hello-page.wxml
│   └── hello-page.wxss
├── index.js                 // 插件的 js 接口
└── plugin.json              // 插件配置文件

三插件开发(将组件包装成插件)

3.1 自定义组件开发

my-component.json配置

{
  "component":true,
  "usingComponents": {}
}

my-component.wxml页面

<view class="list" wx:for="{{list}}" wx:key="*this">
  <text>我是第{{item}}项</text>
</view>
<button bindtap="addItem">add</button>
<button bindtap="delItem">del</button>

my-component.wxss样式

.list{
  text-align: center;
  background-color: #ccc;
  border-top: 1rpx solid #fff;
}

my-component.js—自定义组件

Component({
  data: {
    list: [1, 2, 3, 4, 5]
  },
  methods: {
    addItem: function () {
      var list = this.data.list
      list.push(list.length + 1)
      this.setData({
        list: list
      })
    },
    delItem: function () {
      var list = this.data.list
      if (list.length > 0) {
        list.pop()
      }
      this.setData({
        list: list
      })
    }
  }
})

3.2 插件的js接口方法(index.js)

module.exports = {
  sayHello() {
    console.log('Hello plugin!')
  },
  answer: 42
}

3.3 插件配置文件(plugin.json)

{
  "publicComponents": {
    "my-component": "components/my-component"
  },
  "main": "index.js",
  "pages": {
    "index": "pages/index"
  }
}

说明：

my-component：自定义组件
index：pages/index页面
index.js：所有js接口方法

四插件的测试(miniprogram)

4.1 miniprogram/pages/index/index.json配置

{
  "usingComponents": {
    "my-list": "plugin://my-plugin/my-component"
  }
}

4.2 使用

miniprogram/pages/index/index.wxml

<navigator id="nav" url="plugin://my-plugin/index">
  Go to Plugin page
</navigator>
<my-list/>

miniprogram/pages/index/index.wxss

#nav {
  text-align: center;
  background: #eeeeee;
  margin: 1em;
  padding: 1em;
  border-radius: 5px;
}

#add {
  margin: 1em;
}

miniprogram/pages/index/index.js

const plugin = requirePlugin('my-plugin')
Page({
  data: {
    items: [],
    currentItem: 0
  },
  onLoad() {
    plugin.sayHello()
    const world = plugin.answer
    console.log(world)
  }
})