uniapp 制作和发布插件指南

目录

背景

开发前提条件

easycom规范

前置：

easycom组件规范：

说明

插件开发步骤

一、新建uni_modules插件

二、编写插件内容

---

背景

uni_modules是uni-app的插件模块化规范（HBuilderX 3.1.0+支持），通常是对一组js sdk、组件、页面、uniCloud云函数、公共模块等的封装，用于嵌入到uni-app项目中使用，也支持直接封装为项目模板。

插件开发者，可以像开发uni-app项目一样编写一个uni_modules插件，并在HBuilderX中直接上传至插件市场。

uni_modules开发的插件，可以直接在uniapp的任意页面直接使用，与easycom组件模式类似，避免了每个页面引入才能使用。

更多uni_modules相关内容：uniapp.dcloud.io/uni_modules

开发前提条件

• 开发环境HBuider X
• 用于开发插件的uniapp项目
• 开发和测试环境（我用的微信开发工具、手机）

easycom规范

前置：

官方推荐新建符合easycom规范的组件，不推荐手动引入组件。方法：

1.根目录下新建components目录，右键新建组件，然后在对应的组件名称/组件名称.vue文件里编写代码。

2.根目录下新建uni_modules目录（选择uni ui项目模板，会自动生成uni_modules目录），右键新建uni_modules插件，然后在对应的components/组件名称/组件名称.vue文件里编写代码。

官方推荐在HBuilderX新建项目时，直接选择uni ui项目模板，然后在代码里直接敲u，所有组件都拉出来，不用引用、不用注册，直接就用。

这时项目目录下会有一个uni_modules文件夹，即是存放uni ui插件的文件夹。

为什么这些组件不用引用、不用注册，直接就能用？因为有easycom。

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。uni-app的easycom将其精简为一步。

easycom组件规范：

 只要组件安装在项目的components目录下或uni_modules目录下，并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册，直接在页面中使用。

注意：并不是必须在项目的components目录新建自定义组件，也可以在uni_modules目录下新建自定义uni_modules插件，然后在对应的components/组件名称/组件名称.vue文件里编写代码。

easycom是自动开启的，不需要手动开启。有需求时可以在pages.json的easycom节点进行个性化设置，如关闭自动扫描，或自定义扫描匹配组件的策略。

如果你的组件名称或路径不符合easycom的默认规范，可以在pages.json的easycom节点进行个性化设置，自定义匹配组件的策略

说明

• easycom方式引入的组件无需在页面内import，也不需要在components内声明，即可在任意页面使用
• easycom方式引入组件不是全局引入，而是局部引入。例如在H5端只有加载相应页面才会加载使用的组件
• 在组件名完全一致的情况下，easycom引入的优先级低于手动引入（区分连字符形式与驼峰形式）
• 考虑到编译速度，直接在pages.json内修改easycom不会触发重新编译，需要改动页面内容触发。
• easycom只处理vue组件，不处理小程序专用组件（如微信的wxml格式组件）。不处理后缀为.nvue的组件。但vue组件也可以全端运行，包括小程序和app-nvue。可以参考uni ui，使用vue后缀，同时兼容nvue页面。
• nvue页面里引用.vue后缀的组件，会按照nvue方式使用原生渲染，其中不支持的css会被忽略掉。这种情况同样支持easycom。

插件开发步骤

一、新建uni_modules插件

1. 在uniapp项目根目录新建uni_modules文件夹（如果有可以忽略这步）。
2. 右击uni_modules文件夹，点击新建uni_modules插件。

   

3. 弹出对话框，填写插件id和地址和分类，点击【创建】。

   

   创建的插件在这里：

uni-modules的目录结构请参考：uniapp.dcloud.io/uni_modules…

二、编写插件内容

这里的内容就不展示了，这里我开发了一个支付键盘 相关内容 支付键盘 金额键盘 - DCloud 插件市场

• 编写插件文档
• 编写插件下面的readme.md插件文档。
• 发布到插件市场 鼠标右击uni_modules目录下写好的插件，弹出选择框，选择发布到插件市场。

 

弹出发布到插件市场的对话框，填好相应的信息，一般会自动填充命的名字。但是是否符合要求需要仔细阅读 插件ID命名规范。继续下滑内容填写相关信息，填完后确认无误，提交。

 

注意：

• 上面的信息可以在插件里的package.json中填写配置。配置的详细说明请参考：添加链接描述
• 更新日志为必填项。添加的更新日志，会与文件changelog.md同步。
• 提交后就会发布到插件市场，可到管理中心查看：ext.dcloud.net.cn/manage

快来动手开发自己的第一个插件吧！🌹