uniapp：uni_modules组件开发与发布

一、前言

1、uni_modules定位：是uni-app插件的模块化规范（HBuilderX 3.1.0+支持），是对一组js sdk、组件、页面、uniCloud云函数、公共模块等的封装，用于嵌入到uni-app项目中使用，也支持直接封装为项目模板。
2、开发便捷性：开发者可以像开发uni-app项目一样编写一个uni_modules插件，然后在HBuilderX中直接上传至插件市场。
3、uni_modules特点：uni_modules开发的插件，可以直接在uniapp的任意页面直接使用，与easycom组件模式类似，避免了每个页面引入才能使用。

详见官方文档。

二、开发准备

1、开发环境HBuider X
2、用于开发插件的uniapp项目
3、开发和测试环境（微信开发工具、浏览器、手机）

三、 uni_modules 插件开发

1、创建uni_modules目录

已有则忽略，进入下一步。

2、新建uni_modules插件

2.1、新建

插件ID命名规范：
1、格式为：‘作者ID-插件英文名称’，示例：‘xx-yy’，其中作者ID和插件英文名称只能包含英文、数字
2、作者ID由插件作者自定义，不能使用’DCloud’、'uni’等关键字，长度要求至少2位字符
3、插件名称需直观表达插件的作用，例如：tag、button等

小细节：
uni_modules插件可以在package.json的uni_modules->dependencies节点配置三方依赖（依赖的插件也必须是uni_modules插件），如果是依赖了三方的npm插件，可以使用标准的dependencies节点配置。

2.2、目录结构说明

生成的插件目录结构如下：

其目录结构说明，见官方文档。

2.3、package.json配置

package.json在每个uni_modules插件中都必须存在，包含了插件的基本信息，是插件发布的核心，所以每个字段的含义，都必须了解清楚。

{
    // 注意，不能直接拷贝本段代码到编辑器中，package.json 目前不支持注释。本段代码加的注释只是用于解释代码。
    "id": "作者ID-插件英文名称", // 必填，插件ID，格式为：'作者ID-插件英文名称'，例如：'xx-yy'，其中作者ID和插件名称只能包含英文、数字，作者ID不能使用'DCloud'、'uni'等关键字
    "displayName": "插件显示名称", // 必填，用于展示在插件市场的显示名称
    "version": "1.0.0", // 必填，插件版本
    "description": "插件描述", // 必填，插件描述
    "keywords": [], // 必填，插件标签关键词，最多5个
    "repository": "github:user/repo", // 仓库地址
    "engines": { // HBuilderX/cli 最低兼容版本
        "HBuilderX": "^3.1.0"
    },
    "dcloudext": { // DCloud插件市场配置
      "category": ["前端组件", "通用组件"], // 必填， 插件市场分类
      "sale": { // 销售 （目前仅限uniCloud类插件）
          "regular": { // 普通授权版价格，单位为元，如果为免费插件，设置普通授权版价格为 0 即可。
              "price": "0.00"
          },
          "sourcecode": { // 源码授权版价格，单位为元
              "price": "0.00"
          }
      },
      "contact": { // 插件作者 QQ，方便管理员审核时与作者快速沟通。
          "qq": ""
      },
      "declaration": { // 隐私、权限及商业化声明
          "ads": "", //  必填，本插件是否包含广告，如包含需详细说明广告表达方式、展示频率，请如实填写，如不包含，可填“无”
          "data": "", // 必填，本插件采集的数据、发送的服务器地址、以及数据用途说明，请如实填写，如不采集任何数据，可填写“插件不采集任何数据”，如果使用的三方SDK需要采集数据，可填写“插件使用的 XX SDK会采集数据，详情可参考：https://other-sdk.com/"
          "permissions": "" // 必填，本插件需要申请的系统权限列表，请如实填写，如不需要任何权限，可填“无”
      },
      "npmurl":"" // npm 地址
    },
    "uni_modules": { // uni_modules配置
        "dependencies": [], // 依赖的 uni_modules 插件ID列表
        "encrypt": [ // 配置云函数，公共模块，clientDB Action加密
            "uniCloud/cloudfunctions/uni-admin/controller/permission.js" // 注意这里是真实的文件路径，uni_modules下的uniCloud不带-aliyun、-tcb后缀，但是项目根目录下的uniCloud是带有后缀的
        ],
        "platforms": { // 平台兼容性：y 表示 Yes，支持；n 表示 No，不支持；u 表示 Unknown，不确定；默认为 u
            "cloud": { // 云端平台兼容性
                "tcb": "y",
                "aliyun": "y"
            },
            "client": { // 前端平台兼容性
                "App": {
                    "app-vue": "y",
                    "app-nvue": "n"
                },
                "H5-mobile": {
                    "Safari": { // 当需要指定最小版本才支持时，可以配置minVersion
                        "minVersion": "14.0.2"
                    },
                    "Android Browser": "y",
                    "微信浏览器(Android)": "u",
                    "QQ浏览器(Android)": "u"
                },
                "H5-pc": {
                    "Chrome": "y",
                    "IE": "u",
                    "Edge": "u",
                    "Firefox": "u",
                    "Safari": "u"
                },
                "小程序": {
                    "微信": "y",
                    "阿里": "y",
                    "百度": "y",
                    "字节跳动": "y",
                    "QQ": "y"
                },
                "快应用": {
                    "华为": "u",
                    "联盟": "u"
                }
            }
        }
    }
}

有意思的是，上述配置基于npm package.json规范扩展的，所以标准的package.json属性也同样支持，比如可以通过files来控制要上传的插件包内容。

3、发布到插件市场

4、修改插件基本信息

5、发布新版本

6、查看发布的插件

发布成功之后可以去我的插件列表查看。

7、示例

这里写了示例，可以了参考一下：

• 组件：https://ext.dcloud.net.cn/plugin?id=6937
• 页面：https://ext.dcloud.net.cn/plugin?id=6938

参见官方文档

---

---