基于 Taro 3 开发微信小程序插件build-weapp-plugin 实战指南【免费下载链接】taro开放式跨端跨框架解决方案支持使用 React/Vue 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。项目地址: https://gitcode.com/gh_mirrors/tar/taro微信小程序插件支持将组件、页面和接口封装成独立单元供其他小程序直接引用大幅提升跨项目复用效率。本指南以 Taro 仓库中的 build-weapp-plugin 示例工程为完整骨架系统讲解在 Taro 3 项目中配置插件工程、开发三种插件形态自定义组件、页面、接口、打通插件与宿主小程序的数据流以及如何在微信开发者工具中调试与发布覆盖从零初始化到打包上线的全部关键步骤。示例工程概览build-weapp-plugin位于 Taro 仓库的 examples/build-weapp-plugin 目录是一个使用 React 编写、基于 Webpack 5 编译的微信小程序插件 Demo。它本身既是一个可独立编译的 Taro 工程又是一个标准的微信小程序插件项目因此同时包含两类文件宿主侧源码位于src/其中src/app.config.ts声明如何引用插件src/pages/index/index.tsx是用于验证插件能力的测试页面插件侧源码位于src/plugin/内含plugin.json插件配置清单、index.ts插件接口实现、components/avatar插件组件、pages/list插件页面。工程通过miniprogramRoot与pluginRoot将编译产物划分为两个相互独立的目录详见下文工程配置一节既保证插件目录不被宿主逻辑污染也便于微信开发者工具按插件类型识别。工程的依赖以 Taro 3.6 系为核心tarojs/taro、tarojs/react、tarojs/runtime、tarojs/components、tarojs/plugin-framework-react等均为3.6.24框架选用 React 18样式方案为 Sass完整依赖清单见 package.json。快速开始四步跑通示例1. 配置 appid插件与宿主小程序必须绑定同一 AppID否则开发者工具无法完成插件的注册与加载。按 README 要求修改两处project.config.json 中的appid字段示例中为wxa9abf43f10a7bdb0src/app.config.ts 中plugins.myPlugin.provider字段同样填该 AppID。若跳过此步微信开发者工具会使用默认的测试 appid插件将无法关联到宿主账号下进行真机调试与上传。2. 安装依赖并编译在examples/build-weapp-plugin目录下依次执行# 安装依赖 $ yarn # 开发模式监听文件变更实时重新编译 $ npm run dev # 生产模式产物压缩、体积优化 $ npm run build两个脚本在 package.json 中定义{ scripts: { dev: taro build --plugin weapp --watch, build: taro build --plugin weapp } }--plugin weapp是 Taro CLI 面向微信小程序插件的专用编译模式--watch开启监听开发时保存源码会自动增量编译产物输出到miniprogram/目录。3. 开发位置约定插件逻辑全部位于src/plugin内包括组件、页面与接口而src/pages/index则是用于测试插件的宿主页面它负责以使用者的视角调用插件验证组件事件、页面跳转与接口调用是否正常。二者隔离存放职责清晰。4. 导入开发者工具预览使用微信开发者工具导入项目时项目路径必须指向build-weapp-plugin/miniprogram即编译产物目录而非仓库根目录或src。导入后开发者工具根据project.config.json中的miniprogramRoot与pluginRoot自动区分宿主代码与插件代码。工程配置详解project.config.json插件类型项目声明{ miniprogramRoot: miniprogram/, pluginRoot: plugin/, compileType: plugin, appid: wxa9abf43f10a7bdb0, projectname: build-weapp-plugin }关键字段说明compileType: plugin向开发者工具声明这是一个插件项目而非普通小程序miniprogramRoot宿主测试小程序编译产物的根目录pluginRoot插件编译产物的根目录二者缺一不可appid插件所属小程序的 AppID必须与src/app.config.ts中的provider一致。config/index.jsTaro 构建配置Taro 侧的构建配置位于 config/index.js其中两个配置项与插件构建强相关outputRoot: miniprogram把 Taro 编译产物输出到miniprogram/与project.config.json的miniprogramRoot对应copy.patterns把宿主测试页引用插件时所需的额外文件复制进产物目录copy: { patterns: [ { from: src/my-export.js, to: miniprogram/miniprogram/my-export.js } ] }该 copy 配置服务于插件export机制详见插件接口一节由于宿主侧通过export: my-export.js引用该文件而插件与宿主是两套独立构建产物因此必须显式把src/my-export.js复制到宿主产物的miniprogram/miniprogram/下保证运行时能按相对路径找到。其余配置designWidth: 750、deviceRatio、framework: react、compiler.type: webpack5、mini.postcss中的pxtransform/url等与普通 Taro 工程一致此处不再展开。三种插件形态的开发示例通过 src/plugin/plugin.json 同时声明了三种插件能力{ publicComponents: { avatar: components/avatar/avatar }, pages: { list: pages/list/list }, main: index.ts }publicComponents对外暴露的插件组件键为宿主侧使用的组件名值为组件路径pages对外暴露的插件页面宿主可跳转main插件接口入口宿主通过Taro.requirePlugin调用。插件组件props 与事件传递插件组件 Avatar 位于 src/plugin/components/avatar/avatar.tsx核心代码如下export default class Avatar extends Component{ mode: any, onAvatarClick: any }, null { node: { ctx: any } handleClick () { if (process.env.TARO_ENV jd) { this.node.ctx.triggerEvent(avatarClick) } else { this.node.ctx.triggerEvent(avatar-click) } } render () { return ( View ref{node this.node node} TexttriggerEvent 触发点击事件/Text Image classNamelogo srchttp://storage.360buyimg.com/taro-static/static/images/logo.png mode{this.props.mode} onClick{this.handleClick.bind(this)} / Textprops 传递点击事件/Text Image classNamelogo srchttp://storage.360buyimg.com/taro-static/static/images/logo.png mode{this.props.mode} onClick{this.props.onAvatarClick} / /View ) } }该组件演示了插件组件的两条核心数据通道即 README 中提到的插件组件测试特性props 传递宿主把mode等属性直接传给插件组件组件在渲染层消费事件传递与触发事件入参宿主通过onAvatarClick回调把事件传入组件组件直接在onClick中调用事件出参组件内通过this.node.ctx.triggerEvent(avatar-click)触发事件上抛给宿主。注意 Taro 用ref拿到自定义组件实例再读取其内部ctxComponent 实例调用triggerEvent且京东端事件名需用驼峰avatarClick微信端用短横线avatar-click这是跨端命名差异的典型处理。在宿主测试页 src/pages/index/index.tsx 中两种方式同时被验证avatar onAvatarClick{() console.log(组件事件传递成功)} props{{ mode: aspectFit, onAvatarClick: () console.log(组件事件传递成功) }} /可见宿主既把onAvatarClick作为 props 直接传入又把它包裹在props对象中一并传递覆盖两种用法。插件页面选择器、分享与泛型组件插件页面list位于 src/plugin/pages/list/list.tsx对应 README 中的插件页面测试特性逐一验证了以下能力1. 获取小程序渲染层元素getElement () { const query Taro.createSelectorQuery().in(this.props.$scope) query.select(.page).boundingClientRect().exec(res { console.log(res) }) }通过Taro.createSelectorQuery()创建查询并用.in(this.props.$scope)把查询作用域限定到插件页面自身再.select(.page).boundingClientRect()获取元素布局信息。这是插件页面操作渲染层节点的标准姿势。2. 分享生命周期onShareAppMessage() { return { title: 测试分享, path: /pages/index/index } }插件页面同样可以定义onShareAppMessage分享生命周期钩子返回分享标题与路径。3.genericsImplementation泛型组件插件页面声明了泛型组件见 src/plugin/pages/list/list.config.tsexport default { componentGenerics: { mp-comp: true } }并在页面中使用占位mp-comp/mp-comp泛型组件的实际实现由宿主侧通过app.config.ts中的genericsImplementation指定genericsImplementation: { list: { mp-comp: component/comp } }即在名为list的插件页面里把泛型占位mp-comp替换为宿主自己的组件component/comp。这样插件页面可以留白给宿主填充组件实现页面骨架复用、外观定制的效果。注意宿主测试页 src/pages/index/index.tsx 中同样渲染了一个mp-comp/mp-comp注释说明这是 hack为了让genericsImplementation生效——因为当前构建链路还没有收集插件中使用到的第三方组件需要在宿主侧手动保留一个占位以触发泛型解析。插件页面中的ListItem组件src/plugin/components/listItem/listItem.tsx是一个纯展示组件接收name、value两个 props 渲染列表项用于验证插件页面内部使用自有组件的能力。插件接口main 入口与 export 参数1. main 入口Taro.requirePlugin插件接口实现在 src/plugin/index.tsexport function sayHello () { console.log(Hello plugin!) } export const answer 42宿主侧通过Taro.requirePlugin(myPlugin)拿到整个插件接口对象并调用usePluginInterface () { const myPluginInterface Taro.requirePlugin(myPlugin) myPluginInterface.sayHello() const answer myPluginInterface.answer console.log(answer: , answer) }Taro.requirePlugin是微信小程序requirePluginAPI 在 Taro 中的封装参数myPlugin与宿主app.config.ts中plugins字段声明的键名一致。2. 宿主页面通过 export 暴露参数给插件README 中其它测试插件页面list在componentDidMount中通过requireMiniProgram()反向读取宿主暴露的数据declare const requireMiniProgram: () { whoami: string } componentDidMount () { // 测试 export 京东小程序不支持在插件侧调用 if (process.env.TARO_ENV ! jd) { console.log(requireMiniProgram().whoami) } }宿主侧配套做了三件事定义暴露文件 src/my-export.jsmodule.exports { whoami: Wechat MiniProgram }在 src/app.config.ts 的插件声明中加入export: my-export.js在 config/index.js 中通过copy.patterns把该文件复制到miniprogram/miniprogram/my-export.js确保插件运行时能按相对路径加载。这一闭环演示了宿主向插件传递参数的机制插件侧拿到的是宿主小程序的导出模块可据此读取宿主上下文信息。同时代码注释标明京东小程序暂不支持在插件侧调用该能力是跨端兼容性的重要提示。宿主测试页完整结构宿主测试页 src/pages/index/index.tsx 汇总了上述全部能力的使用方式import Taro from tarojs/taro import React, { Component } from react import { View, Button, Navigator } from tarojs/components export default class Index extends Component { usePluginInterface () { /* 见上文 */ } render () { return ( View classNameindex {/** 测试插件组件 */} avatar onAvatarClick{...} props{{...}} / {/** 测试插件页面 */} Navigator urlplugin://myPlugin/list Button跳转到插件页面/Button /Navigator {/** 使用插件接口 */} Button onClick{this.usePluginInterface}测试插件接口/Button {/** hack为了让 genericsImplementation 生效 */} mp-comp/mp-comp /View ) } }几点关键用法插件页面跳转plugin://协议是微信小程序跳转插件页面的专用 scheme格式为plugin://插件名/页面路径这里对应plugin.json中pages.list的值pages/list/list宿主通过Navigator组件或Taro.navigateTo均可发起跳转宿主自身的页面声明在 src/app.config.ts 的pages数组插件声明在其plugins字段plugins: { myPlugin: { version: dev, provider: wxa9abf43f10a7bdb0, genericsImplementation: { ... }, export: my-export.js } }其中version: dev表示使用开发者工具中的开发版插件进行联调实际发布时需替换为正式版本号。插件文档编写约定src/plugin/doc目录用于存放插件文档README.md 给出了书写约定插件文档支持 Markdown 的多级标题引用图片时必须以相对路径引用doc目录下的本地图片如[](https://link.gitcode.com/i/f7e876ba49f22972bae62522118e590c)不能使用网络图片或doc目录之外的图片使用微信开发者工具编辑器的上传按钮可上传插件文档上传内容包括doc目录下的README.md与图片。该文档与示例中的 example.jpeg 一同构成插件详情页展示素材属于微信插件发布流程的一部分。从示例走向生产build-weapp-plugin覆盖了微信小程序插件开发的完整链路可作为生产项目的起点模板复用骨架把src/plugin下的plugin.json、组件、页面、接口入口整体迁移到业务工程替换appid与provider扩展能力按需在publicComponents、pages中追加新的插件组件与页面需要宿主定制外观时使用componentGenericsgenericsImplementation组合构建产物dev/build脚本产物在miniprogram/其中plugin/为插件本体、miniprogram/为测试宿主导入开发者工具时路径指向build-weapp-plugin/miniprogram发布前检查确认project.config.json的compileType: plugin与 appid 无误、export文件已通过copy.patterns正确复制、插件文档图片均为doc目录内的相对路径引用跨端注意事件命名avatarClick/avatar-click与requireMiniProgram可用性均存在京东端差异涉及京东小程序适配时需按process.env.TARO_ENV jd分别处理。至此你已经掌握在 Taro 3 中开发微信小程序插件组件、插件页面与插件接口的完整方法并理解了triggerEvent事件上抛、Taro.requirePlugin接口调用、genericsImplementation泛型替换与export参数回传四条关键数据通道的底层配合方式。【免费下载链接】taro开放式跨端跨框架解决方案支持使用 React/Vue 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。项目地址: https://gitcode.com/gh_mirrors/tar/taro创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/9/19 20:21:05 · 阅读 1.2k 基于 Taro 3 开发微信小程序插件：build-weapp-plugin 实战指南
基于 Taro 3 开发微信小程序插件build-weapp-plugin 实战指南【免费下载链接】taro开放式跨端跨框架解决方案支持使用 React/Vue 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。项目地址: https://gitcode.com/gh_mirrors/tar/taro微信小程序插件支持将组件、页面和接口封装成独立单元供其他小程序直接引用大幅提升跨项目复用效率。本指南以 Taro 仓库中的 build-weapp-plugin 示例工程为完整骨架系统讲解在 Taro 3 项目中配置插件工程、开发三种插件形态自定义组件、页面、接口、打通插件与宿主小程序的数据流以及如何在微信开发者工具中调试与发布覆盖从零初始化到打包上线的全部关键步骤。示例工程概览build-weapp-plugin位于 Taro 仓库的 examples/build-weapp-plugin 目录是一个使用 React 编写、基于 Webpack 5 编译的微信小程序插件 Demo。它本身既是一个可独立编译的 Taro 工程又是一个标准的微信小程序插件项目因此同时包含两类文件宿主侧源码位于src/其中src/app.config.ts声明如何引用插件src/pages/index/index.tsx是用于验证插件能力的测试页面插件侧源码位于src/plugin/内含plugin.json插件配置清单、index.ts插件接口实现、components/avatar插件组件、pages/list插件页面。工程通过miniprogramRoot与pluginRoot将编译产物划分为两个相互独立的目录详见下文工程配置一节既保证插件目录不被宿主逻辑污染也便于微信开发者工具按插件类型识别。工程的依赖以 Taro 3.6 系为核心tarojs/taro、tarojs/react、tarojs/runtime、tarojs/components、tarojs/plugin-framework-react等均为3.6.24框架选用 React 18样式方案为 Sass完整依赖清单见 package.json。快速开始四步跑通示例1. 配置 appid插件与宿主小程序必须绑定同一 AppID否则开发者工具无法完成插件的注册与加载。按 README 要求修改两处project.config.json 中的appid字段示例中为wxa9abf43f10a7bdb0src/app.config.ts 中plugins.myPlugin.provider字段同样填该 AppID。若跳过此步微信开发者工具会使用默认的测试 appid插件将无法关联到宿主账号下进行真机调试与上传。2. 安装依赖并编译在examples/build-weapp-plugin目录下依次执行# 安装依赖 $ yarn # 开发模式监听文件变更实时重新编译 $ npm run dev # 生产模式产物压缩、体积优化 $ npm run build两个脚本在 package.json 中定义{ scripts: { dev: taro build --plugin weapp --watch, build: taro build --plugin weapp } }--plugin weapp是 Taro CLI 面向微信小程序插件的专用编译模式--watch开启监听开发时保存源码会自动增量编译产物输出到miniprogram/目录。3. 开发位置约定插件逻辑全部位于src/plugin内包括组件、页面与接口而src/pages/index则是用于测试插件的宿主页面它负责以使用者的视角调用插件验证组件事件、页面跳转与接口调用是否正常。二者隔离存放职责清晰。4. 导入开发者工具预览使用微信开发者工具导入项目时项目路径必须指向build-weapp-plugin/miniprogram即编译产物目录而非仓库根目录或src。导入后开发者工具根据project.config.json中的miniprogramRoot与pluginRoot自动区分宿主代码与插件代码。工程配置详解project.config.json插件类型项目声明{ miniprogramRoot: miniprogram/, pluginRoot: plugin/, compileType: plugin, appid: wxa9abf43f10a7bdb0, projectname: build-weapp-plugin }关键字段说明compileType: plugin向开发者工具声明这是一个插件项目而非普通小程序miniprogramRoot宿主测试小程序编译产物的根目录pluginRoot插件编译产物的根目录二者缺一不可appid插件所属小程序的 AppID必须与src/app.config.ts中的provider一致。config/index.jsTaro 构建配置Taro 侧的构建配置位于 config/index.js其中两个配置项与插件构建强相关outputRoot: miniprogram把 Taro 编译产物输出到miniprogram/与project.config.json的miniprogramRoot对应copy.patterns把宿主测试页引用插件时所需的额外文件复制进产物目录copy: { patterns: [ { from: src/my-export.js, to: miniprogram/miniprogram/my-export.js } ] }该 copy 配置服务于插件export机制详见插件接口一节由于宿主侧通过export: my-export.js引用该文件而插件与宿主是两套独立构建产物因此必须显式把src/my-export.js复制到宿主产物的miniprogram/miniprogram/下保证运行时能按相对路径找到。其余配置designWidth: 750、deviceRatio、framework: react、compiler.type: webpack5、mini.postcss中的pxtransform/url等与普通 Taro 工程一致此处不再展开。三种插件形态的开发示例通过 src/plugin/plugin.json 同时声明了三种插件能力{ publicComponents: { avatar: components/avatar/avatar }, pages: { list: pages/list/list }, main: index.ts }publicComponents对外暴露的插件组件键为宿主侧使用的组件名值为组件路径pages对外暴露的插件页面宿主可跳转main插件接口入口宿主通过Taro.requirePlugin调用。插件组件props 与事件传递插件组件 Avatar 位于 src/plugin/components/avatar/avatar.tsx核心代码如下export default class Avatar extends Component{ mode: any, onAvatarClick: any }, null { node: { ctx: any } handleClick () { if (process.env.TARO_ENV jd) { this.node.ctx.triggerEvent(avatarClick) } else { this.node.ctx.triggerEvent(avatar-click) } } render () { return ( View ref{node this.node node} TexttriggerEvent 触发点击事件/Text Image classNamelogo srchttp://storage.360buyimg.com/taro-static/static/images/logo.png mode{this.props.mode} onClick{this.handleClick.bind(this)} / Textprops 传递点击事件/Text Image classNamelogo srchttp://storage.360buyimg.com/taro-static/static/images/logo.png mode{this.props.mode} onClick{this.props.onAvatarClick} / /View ) } }该组件演示了插件组件的两条核心数据通道即 README 中提到的插件组件测试特性props 传递宿主把mode等属性直接传给插件组件组件在渲染层消费事件传递与触发事件入参宿主通过onAvatarClick回调把事件传入组件组件直接在onClick中调用事件出参组件内通过this.node.ctx.triggerEvent(avatar-click)触发事件上抛给宿主。注意 Taro 用ref拿到自定义组件实例再读取其内部ctxComponent 实例调用triggerEvent且京东端事件名需用驼峰avatarClick微信端用短横线avatar-click这是跨端命名差异的典型处理。在宿主测试页 src/pages/index/index.tsx 中两种方式同时被验证avatar onAvatarClick{() console.log(组件事件传递成功)} props{{ mode: aspectFit, onAvatarClick: () console.log(组件事件传递成功) }} /可见宿主既把onAvatarClick作为 props 直接传入又把它包裹在props对象中一并传递覆盖两种用法。插件页面选择器、分享与泛型组件插件页面list位于 src/plugin/pages/list/list.tsx对应 README 中的插件页面测试特性逐一验证了以下能力1. 获取小程序渲染层元素getElement () { const query Taro.createSelectorQuery().in(this.props.$scope) query.select(.page).boundingClientRect().exec(res { console.log(res) }) }通过Taro.createSelectorQuery()创建查询并用.in(this.props.$scope)把查询作用域限定到插件页面自身再.select(.page).boundingClientRect()获取元素布局信息。这是插件页面操作渲染层节点的标准姿势。2. 分享生命周期onShareAppMessage() { return { title: 测试分享, path: /pages/index/index } }插件页面同样可以定义onShareAppMessage分享生命周期钩子返回分享标题与路径。3.genericsImplementation泛型组件插件页面声明了泛型组件见 src/plugin/pages/list/list.config.tsexport default { componentGenerics: { mp-comp: true } }并在页面中使用占位mp-comp/mp-comp泛型组件的实际实现由宿主侧通过app.config.ts中的genericsImplementation指定genericsImplementation: { list: { mp-comp: component/comp } }即在名为list的插件页面里把泛型占位mp-comp替换为宿主自己的组件component/comp。这样插件页面可以留白给宿主填充组件实现页面骨架复用、外观定制的效果。注意宿主测试页 src/pages/index/index.tsx 中同样渲染了一个mp-comp/mp-comp注释说明这是 hack为了让genericsImplementation生效——因为当前构建链路还没有收集插件中使用到的第三方组件需要在宿主侧手动保留一个占位以触发泛型解析。插件页面中的ListItem组件src/plugin/components/listItem/listItem.tsx是一个纯展示组件接收name、value两个 props 渲染列表项用于验证插件页面内部使用自有组件的能力。插件接口main 入口与 export 参数1. main 入口Taro.requirePlugin插件接口实现在 src/plugin/index.tsexport function sayHello () { console.log(Hello plugin!) } export const answer 42宿主侧通过Taro.requirePlugin(myPlugin)拿到整个插件接口对象并调用usePluginInterface () { const myPluginInterface Taro.requirePlugin(myPlugin) myPluginInterface.sayHello() const answer myPluginInterface.answer console.log(answer: , answer) }Taro.requirePlugin是微信小程序requirePluginAPI 在 Taro 中的封装参数myPlugin与宿主app.config.ts中plugins字段声明的键名一致。2. 宿主页面通过 export 暴露参数给插件README 中其它测试插件页面list在componentDidMount中通过requireMiniProgram()反向读取宿主暴露的数据declare const requireMiniProgram: () { whoami: string } componentDidMount () { // 测试 export 京东小程序不支持在插件侧调用 if (process.env.TARO_ENV ! jd) { console.log(requireMiniProgram().whoami) } }宿主侧配套做了三件事定义暴露文件 src/my-export.jsmodule.exports { whoami: Wechat MiniProgram }在 src/app.config.ts 的插件声明中加入export: my-export.js在 config/index.js 中通过copy.patterns把该文件复制到miniprogram/miniprogram/my-export.js确保插件运行时能按相对路径加载。这一闭环演示了宿主向插件传递参数的机制插件侧拿到的是宿主小程序的导出模块可据此读取宿主上下文信息。同时代码注释标明京东小程序暂不支持在插件侧调用该能力是跨端兼容性的重要提示。宿主测试页完整结构宿主测试页 src/pages/index/index.tsx 汇总了上述全部能力的使用方式import Taro from tarojs/taro import React, { Component } from react import { View, Button, Navigator } from tarojs/components export default class Index extends Component { usePluginInterface () { /* 见上文 */ } render () { return ( View classNameindex {/** 测试插件组件 */} avatar onAvatarClick{...} props{{...}} / {/** 测试插件页面 */} Navigator urlplugin://myPlugin/list Button跳转到插件页面/Button /Navigator {/** 使用插件接口 */} Button onClick{this.usePluginInterface}测试插件接口/Button {/** hack为了让 genericsImplementation 生效 */} mp-comp/mp-comp /View ) } }几点关键用法插件页面跳转plugin://协议是微信小程序跳转插件页面的专用 scheme格式为plugin://插件名/页面路径这里对应plugin.json中pages.list的值pages/list/list宿主通过Navigator组件或Taro.navigateTo均可发起跳转宿主自身的页面声明在 src/app.config.ts 的pages数组插件声明在其plugins字段plugins: { myPlugin: { version: dev, provider: wxa9abf43f10a7bdb0, genericsImplementation: { ... }, export: my-export.js } }其中version: dev表示使用开发者工具中的开发版插件进行联调实际发布时需替换为正式版本号。插件文档编写约定src/plugin/doc目录用于存放插件文档README.md 给出了书写约定插件文档支持 Markdown 的多级标题引用图片时必须以相对路径引用doc目录下的本地图片如[](https://link.gitcode.com/i/f7e876ba49f22972bae62522118e590c)不能使用网络图片或doc目录之外的图片使用微信开发者工具编辑器的上传按钮可上传插件文档上传内容包括doc目录下的README.md与图片。该文档与示例中的 example.jpeg 一同构成插件详情页展示素材属于微信插件发布流程的一部分。从示例走向生产build-weapp-plugin覆盖了微信小程序插件开发的完整链路可作为生产项目的起点模板复用骨架把src/plugin下的plugin.json、组件、页面、接口入口整体迁移到业务工程替换appid与provider扩展能力按需在publicComponents、pages中追加新的插件组件与页面需要宿主定制外观时使用componentGenericsgenericsImplementation组合构建产物dev/build脚本产物在miniprogram/其中plugin/为插件本体、miniprogram/为测试宿主导入开发者工具时路径指向build-weapp-plugin/miniprogram发布前检查确认project.config.json的compileType: plugin与 appid 无误、export文件已通过copy.patterns正确复制、插件文档图片均为doc目录内的相对路径引用跨端注意事件命名avatarClick/avatar-click与requireMiniProgram可用性均存在京东端差异涉及京东小程序适配时需按process.env.TARO_ENV jd分别处理。至此你已经掌握在 Taro 3 中开发微信小程序插件组件、插件页面与插件接口的完整方法并理解了triggerEvent事件上抛、Taro.requirePlugin接口调用、genericsImplementation泛型替换与export参数回传四条关键数据通道的底层配合方式。【免费下载链接】taro开放式跨端跨框架解决方案支持使用 React/Vue 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。项目地址: https://gitcode.com/gh_mirrors/tar/taro创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考