小程序-插件:了解“微信小程序插件 / 嵌入到其他小程序进行赋能” / 基于uniapp基础项目 改造为 小程序插件项目
本文内容基于文心一言和deepsick,存在未经验证的部分,如有不准确之处,欢迎指正
微信小程序的插件功能是一项强大的扩展能力,允许开发者将自己的功能模块封装为插件,供其他小程序调用和使用。本文认为插件是很重要的一个能力。
一、插件功能概述
功能封装:开发者可以将一些通用的功能或服务封装成插件,例如支付功能、地图服务、AI识别等。
跨小程序使用:一旦插件开发完成并发布,其他小程序可以直接通过API调用这些插件,无需重复开发相同的功能。
提升开发效率:插件功能有助于减少开发时间和成本,提高小程序的开发效率和质量。
以下是将上述内容整理成表格的形式:
| 时间 | 里程碑事件 | 说明/来自deepsick |
|---|---|---|
| 2018-03-13 | 功能正式宣布上线 | 微信官方发布公告,小程序插件功能正式对外开放,同时开发者工具新增“代码片段”功能。 |
| 2018-03-23 | 首批插件过审 | 距离功能发布仅11天,“知晓云SDK”和“腾讯地图”成为首批通过审核的小程序插件,开发者可以直接在小程序中使用它们来快速实现后端能力和地图服务。 |
| 2018-03-24 | 首个“插件市场”发布 | 第三方服务平台“知晓程序”发布了行业内首个“插件市场”,为开发者提供插件的展示和交易服务。 |
| 虽然2018年就上市了,但是本文到github、gitee查看项目,真的很少,身边项目有使用插件的,也没看到有谁在开发插件,看需求吧,本文觉得还是很有用的 | ||
二、插件开发流程
创建插件项目:在微信开发者工具中,选择创建插件类型的项目。
开发插件:根据插件的需求和功能,进行插件的开发和调试。
配置插件信息:包括插件的名称、版本、描述、图标等信息。
提交审核:插件开发完成后,需要提交给微信团队进行审核。
发布插件:审核通过后,插件可以发布到微信插件市场,供其他小程序使用。
三、插件使用流程
搜索并选择插件:在微信开发者工具或插件市场中,搜索并选择需要使用的插件。
引入插件:在小程序的项目配置中,引入所选插件。
调用插件API:在小程序的代码中,通过调用插件提供的API来使用插件功能。
处理插件回调:根据插件的API设计,处理插件的回调函数,以获取插件执行的结果或状态。
四、插件功能优势
功能复用:插件功能实现了功能的复用,避免了重复开发。
降低开发难度:对于一些复杂的功能,通过调用插件可以降低开发难度和门槛。
提升用户体验:插件通常经过优化和测试,能够提供更好的用户体验和性能。
五、注意事项
插件兼容性:在使用插件时,需要注意插件的兼容性和版本问题,确保插件与小程序的版本和运行环境相匹配。
插件安全性:插件可能涉及用户的敏感信息或权限,因此需要确保插件的安全性,避免信息泄露或滥用。
遵守微信规范:插件的开发和使用需要遵守微信的相关规范和政策,确保合规性。
简而言之,微信小程序的插件功能是一项非常有用的扩展能力,可以帮助开发者提高开发效率、降低开发难度,并提升小程序的功能和用户体验。
六、市场上一些优秀的微信小程序插件
来自文心一言
| 插件名称 | 功能描述 | 优势 | 适用场景 |
|---|---|---|---|
| 微信支付插件 | 提供完整的微信支付功能,包括JSAPI支付、小程序支付等 | 简化支付流程,提高支付成功率,保障交易安全 | 电商、在线服务、生活缴费等需要支付功能的小程序 |
| 腾讯地图插件 | 提供地图显示、地点搜索、路线规划等功能 | 精准定位,丰富的地图数据和API接口,支持个性化定制 | 出行、旅游、餐饮等需要地图服务的小程序 |
| 腾讯云AI插件 | 集成腾讯云的人工智能服务,如人脸识别、图像识别、语音识别等 | 强大的AI能力,易于集成,提升小程序的智能化水平 | 智能客服、图像识别、语音交互等需要AI功能的小程序 |
| 友盟统计插件 | 提供小程序的用户行为统计和分析功能 | 帮助开发者了解用户行为,优化小程序功能和用户体验 | 需要数据分析以优化运营策略的小程序 |
| 即速应用插件 | 提供丰富的模板和组件,支持快速搭建小程序 | 降低开发门槛,提高开发效率,适合非专业开发者 | 快速搭建小程序,特别是对于没有专业开发团队的小企业或个人 |
| 芝麻信用插件 | 集成芝麻信用服务,提供信用评估、信用免押等功能 | 增强小程序的信用体系,提升用户信任度 | 需要信用评估或信用免押服务的小程序,如租赁、金融等 |
| 腾讯云微低码插件 | 提供低代码开发平台,支持快速构建和部署小程序 | 简化开发流程,降低开发成本,提高开发效率 | 需要快速迭代和开发的小程序,特别是对于初创企业或项目 |
| 腾讯云RTC插件 | 提供实时音视频通信功能,支持一对一、一对多等多种通信场景 | 高质量的音视频通信,低延迟,高稳定性 | 需要实时音视频通信功能的小程序,如在线教育、远程会议等 |
| 微信同声传译 | 微信同声传译由微信智聆语音团队、微信翻译团队与公众平台联合推出的同传开放接口,首期开放语音转文字、文本翻译、语音合成接口,为开发者赋能。 | 微信官方-同声传译 |
七、小程序插件可以和主程序进行数据交互
可以。而且很重要。
| 数据交互方式 | 说明 | 优势 | 注意事项 |
|---|---|---|---|
| 参数传递 | 主程序在调用插件时,通过参数将数据传递给插件。插件接收参数后,根据需求进行处理。 | 实现简单,适用于一次性数据传递。 | 参数大小和类型可能受限,需确保参数的有效性。 |
| 事件回调 | 插件在执行过程中,通过触发事件将数据或状态信息返回给主程序。主程序监听这些事件,并执行相应操作。 | 实现插件与主程序的异步通信,提升用户体验。 | 需定义清晰的事件类型和回调函数,避免事件冲突。 |
| 全局变量/缓存 | 插件和主程序通过共享全局变量或缓存空间进行数据交互。 | 适用于需要长期保存或共享的数据。 | 需谨慎管理全局变量或缓存,避免数据污染和安全问题。 |
| 自定义API接口 | 插件提供自定义的API接口,主程序通过调用这些接口与插件进行数据交互。 | 提供灵活的数据交互方式,支持复杂的数据处理。 | 需确保API接口的稳定性和兼容性,避免接口变更带来的影响。 |
八、可以封装成一个收费的插件吗,别人调用的时候先验证身份,然后提供使用
8.1、身份验证与授权使用
身份验证:当其他小程序想要调用你的收费插件时,你需要进行身份验证。这可以通过多种方式实现,比如要求调用方提供API密钥、OAuth令牌或其他身份验证信息。
授权使用:在身份验证通过后,你可以授权调用方使用你的插件。这通常涉及到生成一个临时的访问令牌或授权码,调用方在调用插件时需要提供这个令牌或授权码。
使用监控:为了确保插件的合规使用和防止滥用,你可以对插件的使用情况进行监控。这包括记录调用方的身份信息、调用时间、调用次数等。
8.2、封装收费插件
功能开发:首先,你需要开发一个具有特定功能的微信小程序插件。这个插件可以是任何你认为有价值的功能,比如数据分析、图像处理、AI识别等。
插件封装:将开发好的功能封装成微信小程序插件。这通常涉及到在微信开发者工具中创建插件项目,并配置插件的相关信息。
设置收费:在插件发布前,你可以在微信插件市场或相关平台上设置插件的收费方式。这可以是按次收费、按时间收费或按其他方式收费。
九、把一个功能相近的普通小程序转变成一个小程序插件 难吗
9.1、难度评估
设计复杂度:如果原有小程序的设计相对简单,功能模块之间耦合度低,那么将其转变为插件的难度会相对较低。反之,如果小程序设计复杂,功能模块之间高度耦合,那么转变过程可能会更加困难。
功能模块独立性:插件需要具有较高的独立性,以便能够被其他小程序方便地调用。如果原有小程序的功能模块已经相对独立,那么转变为插件的过程会更容易。
开发者经验:如果开发者对微信小程序插件的开发规范、API接口以及身份验证等机制有深入了解,那么转变过程会更加顺利。反之,如果开发者对这些方面不熟悉,可能需要花费更多时间来学习和适应。
9.2、转变步骤
分析原有小程序:首先,需要对原有小程序的功能、架构和代码进行深入分析,确定哪些部分可以提取出来作为插件的核心功能。
设计插件接口:根据插件的需求和功能,设计合理的API接口和数据交互方式。这包括确定插件的输入参数、输出结果以及回调函数等。
重构代码:将原有小程序中与插件功能相关的代码进行重构,提取出核心功能,并封装成插件的形式。这可能需要修改部分代码逻辑,以适应插件的开发规范。
测试与调试:对重构后的插件进行充分的测试和调试,确保其功能正常、性能稳定,并且与其他小程序的兼容性良好。
发布与审核:将插件提交到微信插件市场进行审核和发布。在发布前,需要确保插件符合微信平台的规定和相关法律法规。
十、对插件的代码体积有限制吗
来自文心一言
微信小程序插件的代码体积(包括代码、资源等文件)主包(首个代码包)的限制通常是不超过2MB,而单个分包或资源文件的限制则是不超过2MB(对于分包资源包,整体项目加一起不超过4MB(主机页面对应的主包1个+ 分包N个+ 资源包N个,总大小不超过 4MB ) ,但插件情况主要关注主包限制),同时整个插件所有分包总大小也有相应限制(一般是不超过16MB )
十一、UniApp 开发微信小程序插件的可行性
来自文心一言,未验证
原生限制:UniApp 本身是一个跨平台框架,默认不直接支持微信小程序插件开发,因为插件需要遵循微信的特定规范和结构。
工具支持:通过 uniapp2wxpack 工具,可以将 UniApp 项目转换为符合微信小程序插件开发要求的项目结构,从而支持插件开发。
十二、需要在微信小程序管理后台开通权限


提交后

十三、一个小程序主体可以开通几个插件
deepcisk回答
一个小程序主体(即一个 AppID)只能创建一个插件。
十四、如果插件不想要了,可以删除吗
deepcisk回答
微信官方后台目前不提供直接删除插件的按钮。即便在管理后台关闭所有授权、设置为“仅自己可见”,也无法找到删除或下架的入口
十五、同一个主体下 微信小程序id 和 小程序插件id是一个吗
deepsick回答
对于同一个主体,微信小程序和小程序插件的 ID 是同一个,小程序插件没有独立的 AppID,它使用的是与之关联的小程序的 AppID 。
不过需要注意的是,虽然 AppID 相同,但在微信后台的逻辑里,它们仍然被视为两个不同的“应用实体”。
ID 是同一个:当你为同一个主体创建小程序插件时,微信平台使用的 AppID 就是该主体已有小程序(或专门为插件创建的小程序)的 AppID 。你可以在微信公众平台的小程序后台申请开通插件功能,该小程序便同时具备了“宿主”和“插件开发者”的双重身份。
逻辑上是分离的:尽管 AppID 相同,但插件本身是一个独立的代码包,拥有自己的开发项目、版本号和审核流程 。其他小程序在引用你的插件时,需要填写你的小程序 AppID 作为插件的提供方(provider)。
从微信开发工具也能看出来,当“开发模式”选择了“插件”,边显示了宿主AppID
如果是小程序那么只有一个AppID


十六、在项目里如何区分是 小程序项目 还是 小程序插件 项目
deepsick回答
通过 project.config.json 文件中的 compileType 字段来区分当前项目是小程序还是小程序插件
当 compileType 为 plugin 时,该项目是一个插件项目,用于开发和维护插件代码。
当 compileType 为 miniprogram(或其他值)时,该项目是一个普通的小程序项目,可用于编写插件的使用示例或作为独立小程序运行。
十七、开发小程序和小程序插件 差别大吗
开发微信小程序和开发微信小程序插件的区别,可以这样理解:基础语法同源,但项目结构、核心职责和运行逻辑完全不同。
如果说开发一个小程序是盖一栋完整的楼(包含所有房间、水电、物业),那么开发一个插件,就是造一个标准化的“整体厨房”。它有自己的柜体、水管和电路,但必须被安装进别人的楼里才能发挥作用。
以下是图片内容的表格输出:
| 维度 | 微信小程序开发 | 微信小程序插件开发 | 关键差异点 |
|---|---|---|---|
| 核心目标 | 构建一个完整的、可直接面向用户提供服务的独立应用。 | 封装一组可复用的功能/服务(如快递查询、支付组件),供其他小程序使用。 | 小程序是“最终产品”,而插件是“功能模块”。 |
| 项目结构 | 标准的页面目录(pages),全局配置文件(app.json)。 | 独特的插件目录(plugin),包含组件、页面、接口,以及关键的导出配置文件(plugin.json),用于声明哪些功能对外开放。 | 插件项目核心是“封装与导出”,小程序核心是“构建与呈现”。 |
| 运行环境 | 独立运行在自己的环境中,拥有完整的生命周期。 | 寄生运行在宿主小程序的上下文中,但与宿主的环境在逻辑上是隔离的,无法直接访问宿主的数据。 | 插件需要依赖宿主才能运行,其生命周期也由宿主控制。 |
| 身份标识 | 拥有唯一的 AppID,通过审核发布后,用户可直接搜索、使用。 | 没有独立的 AppID,它使用与其绑定的“小程序主体”的 AppID。 | 插件只是一个附属功能,无法独立存在。 |
| 代码限制 | 可以使用绝大部分微信官方提供的 API。 | 部分 API(如用户登录 wx.login)获取的用户标识是插件维度的(与宿主不同),且部分高级能力(如支付)需通过“功能页”实现。 |
插件在 API 调用上存在更多限制,以确保宿主安全。 |
| 版本管理 | 一个线上版本。 | 多版本并存。一个插件可以有多个版本,由宿主小程序决定引用哪个版本,无需插件重复发布。 | 插件的版本管理更灵活,可以同时服务于不同需求的宿主。 |
| 开发目的 | 为用户提供完整的产品体验。 | 代码复用和商业服务分发(如将自己的核心服务打包成插件卖给其他开发者)。 | 插件天生就是为“被集成”而生。 |
这个表格总结了微信小程序开发与微信小程序插件开发在各个维度上的主要特点和差异。
从上表可以看出,两者的区别根源在于“职责”不同。开发小程序时,你需要考虑整个应用的导航、页面流转、用户体系和数据存储。而开发插件时,你更像一个“供应商”,思考的是如何设计一个高内聚、低耦合的模块,让它能顺滑地“插入”到各种不同的小程序环境中,同时还要保证自身的安全和稳定。
这就像我们之前聊到的,同一个 AppID 下,你既可以运行小程序项目,也可以运行插件项目,通过配置文件中的 compileType 字段来区分。这也再次印证了,它们是同一个开发主体下的“两种不同生物”。
十八、uniapp基础项目
小程序-uni-app:uni-app-base项目基础配置及使用 / uni-app+vue3+ts+vite+vscode
十九、基于uniapp基础项目 改造为 小程序插件项目
目录

19.1、project.config.json
"compileType": "plugin",
"pluginRoot": "src/pages/",
project.config.json
{
"appid": "111222333",
"compileType": "plugin",
"libVersion": "2.24.2",
"packOptions": {
"ignore": [],
"include": []
},
"setting": {
"urlCheck": true,
"coverView": true,
"es6": true,
"postcss": true,
"lazyloadPlaceholderEnable": false,
"preloadBackgroundData": false,
"minified": true,
"autoAudits": false,
"uglifyFileName": false,
"uploadWithSourceMap": true,
"enhance": true,
"useMultiFrameRuntime": true,
"showShadowRootInWxmlPanel": true,
"packNpmManually": false,
"packNpmRelationList": [],
"minifyWXSS": true,
"useStaticServer": true,
"showES6CompileOption": false,
"checkInvalidKey": true,
"babelSetting": {
"ignore": [],
"disablePlugins": [],
"outputPath": ""
},
"disableUseStrict": false,
"useCompilerPlugins": false,
"minifyWXML": true,
"condition": false,
"compileWorklet": false,
"localPlugins": false,
"swc": false,
"disableSWC": true
},
"condition": {},
"editorSetting": {
"tabIndent": "insertSpaces",
"tabSize": 2
},
"pluginRoot": "src/pages/",
"miniprogramRoot": "dist/dev/mp-weixin/",
"description": "项目配置文件,详见文档:https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
"srcMiniprogramRoot": "unpackage/dist/dev/mp-weixin/",
"simulatorPluginLibVersion": {}
}
19.2、pages/plugin.json
{
"pages": {
"hello": "pages/index/index"
},
"main": "index.js"
}
19.3、pages/index.js
export function hello(name) {
console.log(`Hello ${name}`);
}
19.4、pages.json
"plugins": {
"your-plugin-name": { // 将 "your-plugin-name" 替换为实际的插件名称
"version": "dev", // 可以是 "dev" 表示开发版本,或者具体的版本号,如 "1.0.0"
"provider": "112233" // 插件提供者的 appid
}
},
{
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
},
{
"path": "pages/friends/index",
"style": {
"navigationBarTitleText": "朋友"
}
},
{
"path": "pages/message/index",
"style": {
"navigationBarTitleText": "消息"
}
},
{
"path": "pages/my/index",
"style": {
"navigationBarTextStyle": "white",
"navigationBarTitleText": "我的",
"navigationBarBackgroundColor": "#ff0000",
"backgroundColor": "#4d84ff"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"tabBar": {
"borderStyle": "black",
"selectedColor": "#fb7299",
"color": "#444444",
"list": [
{
"pagePath": "pages/index/index",
"iconPath": "static/logo.png",
"selectedIconPath": "static/logo.png",
"text": "首页"
},
{
"pagePath": "pages/friends/index",
"iconPath": "static/logo.png",
"selectedIconPath": "static/logo.png",
"text": "朋友"
},
{
"pagePath": "pages/message/index",
"iconPath": "static/logo.png",
"selectedIconPath": "static/logo.png",
"text": "消息"
},
{
"pagePath": "pages/my/index",
"iconPath": "static/logo.png",
"selectedIconPath": "static/logo.png",
"text": "我"
}
]
},
"plugins": {
"kuaixue": {
"version": "dev",
"provider": "112233"
}
},
"easycom": {
"autoscan": true,
"custom": {
// uni-ui 规则如下配置
"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
}
}
}
19.5、启动项目
pnpm run dev:mp-weixin
19.6、项目启动后
简单的页面显示出来了

二十、上传代码

上传成功

打开后台管理,看到刚刚上传的开发版本,同时也验证了上传成功

二十一、微信小程序,开发版本的插件是否可以使用
可以,这样方便开发调试
见 本文 “19.4、pages.json”
开发版本插件只能在微信开发者工具中运行,无法在真机上调试(除非插件已发布正式版本)。
如果尝试在真机上运行,会报错:"plugin not found or version invalid"。
{
"plugins": {
"yourPlugin": {
"version": "dev-abcdef0123456789abcdef0123456789", // 开发版ID 不能直接用 dev 否则报错如下图
"provider": "插件提供方的小程序AppID"
}
}
}
发版后
{
"plugins": {
"your-plugin-name": {
"version": "1.0.0", // 正式版本
"provider": "插件提供者的appid"
}
// 第二个插件
}
}

二十二、宿主小程序 使用 插件小程序
22.1、src/manifest.json 的 mp-weixin 节点中配置
{
"mp-weixin": {
"appid": "你的宿主小程序AppID",
"setting": {
"urlCheck": false
},
"usingComponents": true,
"plugins": {
"yourPlugin": { // 插件别名,可自定义
"version": "dev-id", // 关键:开发版填 "dev" + 开发版本id
"provider": "插件提供方的小程序AppID" // 就是你上传插件时用的那个AppID
}
}
}
}
//如何获取开发版ID 见下图
22.2、开发板id

22.3、开发版授权使用
因为使用的是开发板,在开发工具提示没有授权,右侧有一个“添加插件”的按钮,点击

出现弹窗,出现“添加”按钮,点击


打开小程序插件项目,通过审核

操作后,状态变成 已通过

开发工具点击 编译按钮,页面显示正常,可以使用插件了
22.4、在 pages.json 中配置
{
"pages": [
{
"path": "pages/index/index",
"style": {
"mp-weixin": {
"usingComponents": {
"hello-component": "plugin://yourPlugin/hello-component"
}
}
}
}
]
}

22.5、跳转到插件页面
uni.navigateTo({
url: 'plugin://yourPlugin/hello-page'
})
22.6、调用插件JS接口
const plugin = requirePlugin('yourPlugin')
plugin.someMethod()


测试成功
欢迎交流指正
更多推荐



所有评论(0)