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、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目录

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

719f92cde0ec466ebbbc54833ec8711b.png


2、新建uni_modules插件

2.1、新建

d525cc9212df43f9aada19b65ce5020c.png

fc946e3c515941dc9c89531fae900c04.png

插件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、目录结构说明

生成的插件目录结构如813d4a7cb6834fcfa2e8e77b7ecb605d.png下:


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


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、发布到插件市场

94092b2f7d00448aa41909a2065c5f54.png

ffcc470ed4ec4a759765b9bfe8ce216e.png

4、修改插件基本信息

ed8e737f034e447fb86bf46c026fe65c.png


5、发布新版本

ffc9388b78e54ad4a0952ad85df164ed.png


6、查看发布的插件


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


7、示例


这里写了示例,可以了参考一下:


组件:https://ext.dcloud.net.cn/plugin?id=6937

页面:https://ext.dcloud.net.cn/plugin?id=6938

参见官方文档


相关文章
|
Web App开发 安全
navigator.mediaDevices是undefined怎么办
navigator.mediaDevices是undefined怎么办
2576 1
|
对象存储
关于uniapp解决单/多文件上传的解决思路
关于uniapp解决单/多文件上传的解决思路
958 0
|
移动开发 JavaScript 小程序
小程序开发.uniapp.生命周期
小程序开发.uniapp.生命周期
1146 0
|
API 开发工具 Android开发
【01】完整开发即构美颜sdk的uni官方uts插件—让所有开发者可以直接使用即构美颜sdk的能力-优雅草卓伊凡
【01】完整开发即构美颜sdk的uni官方uts插件—让所有开发者可以直接使用即构美颜sdk的能力-优雅草卓伊凡
623 23
【01】完整开发即构美颜sdk的uni官方uts插件—让所有开发者可以直接使用即构美颜sdk的能力-优雅草卓伊凡
|
编解码 应用服务中间件 nginx
DemuxException: type = CodecUnsupported, info = Flv: Unsupported codec in video frame: 2
DemuxException: type = CodecUnsupported, info = Flv: Unsupported codec in video frame: 2
1293 0
|
移动开发 小程序 测试技术
自定义多级联动选择器指南(uni-app)
在本文中,探讨了如何在uni-app中创建自定义多级联动选择器组件。这个组件具有强大的多端支持,可适用于H5、APP、微信小程序、支付宝小程序等多种平台。
1534 1
自定义多级联动选择器指南(uni-app)
|
前端开发 JavaScript 应用服务中间件
【uniapp】谷歌授权登录,前端uniapp直调(含源码)
本文介绍如何在uniapp项目中实现谷歌授权登录,无需后端参与。文章分为三部分:1)谷歌授权登录流程,详细说明从用户点击登录到获取用户信息的整个过程;2)谷歌开发者控制台配置,包括创建项目、配置同意屏幕及OAuth客户端ID等步骤;3)uniapp前端实操,提供具体代码示例,展示如何获取授权码并用其交换访问令牌,最终获取用户信息
1668 2
【uniapp】谷歌授权登录,前端uniapp直调(含源码)
|
缓存
DevEco Studio 5.0.1 Beta3安装及配置
本文介绍了如何下载、安装和配置华为DevEco Studio 5.0.1 Beta3,并详细说明了安装HarmonyOS模拟器及创建虚拟机的步骤。包括下载安装包、卸载旧版本、选择安装目录、创建快捷方式、启动DevEco Studio、配置环境、进入设备管理器、下载虚拟机镜像、创建和启动虚拟机等操作。
2715 1
|
存储 小程序 Java
【小程序分包】小程序包大于2M,来这教你分包啊
本文介绍了如何通过分包解决uniapp小程序包体积过大的问题。由于版本升级导致包体积超过2M,即使压缩静态资源也无法满足发布要求。文章详细讲解了分包的原因、步骤及注意事项,并提供了实操示例,帮助读者理解并实现小程序分包,从而减小主包大小
1348 2
【小程序分包】小程序包大于2M,来这教你分包啊