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

参见官方文档


相关文章
|
JavaScript 前端开发 数据处理
vue2、vue3中使用$forceUpdate()
vue2、vue3中使用$forceUpdate()
2645 0
|
10月前
|
API 开发工具 Android开发
【01】完整开发即构美颜sdk的uni官方uts插件—让所有开发者可以直接使用即构美颜sdk的能力-优雅草卓伊凡
【01】完整开发即构美颜sdk的uni官方uts插件—让所有开发者可以直接使用即构美颜sdk的能力-优雅草卓伊凡
385 23
【01】完整开发即构美颜sdk的uni官方uts插件—让所有开发者可以直接使用即构美颜sdk的能力-优雅草卓伊凡
|
5月前
|
监控 安全 应用服务中间件
网站出现“SSL handshake failed“?SSL握手失败(525)的错误修复指南
本文详细解析了Cloudflare中常见的SSL握手失败(525)错误,从问题定义到根源分析,再到具体解决方案,提供了一站式修复指南。通过检查证书域名匹配、有效性及时钟同步等问题,结合Nginx/Apache配置调整与Cloudflare设置优化,帮助用户彻底解决525错误。同时,文章还提供了预防措施,如自动续期和SSL状态监控,确保网站长期稳定运行。跟随步骤操作,可有效避免SSL相关故障,保障网站安全访问。
4399 0
网站出现“SSL handshake failed“?SSL握手失败(525)的错误修复指南
|
9月前
|
机器学习/深度学习 人工智能 自然语言处理
|
人工智能 开发框架 Java
重磅发布!AI 驱动的 Java 开发框架:Spring AI Alibaba
随着生成式 AI 的快速发展,基于 AI 开发框架构建 AI 应用的诉求迅速增长,涌现出了包括 LangChain、LlamaIndex 等开发框架,但大部分框架只提供了 Python 语言的实现。但这些开发框架对于国内习惯了 Spring 开发范式的 Java 开发者而言,并非十分友好和丝滑。因此,我们基于 Spring AI 发布并快速演进 Spring AI Alibaba,通过提供一种方便的 API 抽象,帮助 Java 开发者简化 AI 应用的开发。同时,提供了完整的开源配套,包括可观测、网关、消息队列、配置中心等。
7962 114
|
缓存
DevEco Studio 5.0.1 Beta3安装及配置
本文介绍了如何下载、安装和配置华为DevEco Studio 5.0.1 Beta3,并详细说明了安装HarmonyOS模拟器及创建虚拟机的步骤。包括下载安装包、卸载旧版本、选择安装目录、创建快捷方式、启动DevEco Studio、配置环境、进入设备管理器、下载虚拟机镜像、创建和启动虚拟机等操作。
1842 1
|
小程序 容器
微信小程序常用组件的简单使用 view,scroll-view,swiper,swiper-item,text,rich-text,button,image
本文介绍了微信小程序中常用组件的使用方法,包括view、scroll-view、swiper与swiper-item、text与rich-text、button以及image组件。详细解释了各组件的功能、属性以及如何在小程序页面中进行使用。
微信小程序常用组件的简单使用 view,scroll-view,swiper,swiper-item,text,rich-text,button,image
ELK 圣经:Elasticsearch、Logstash、Kibana 从入门到精通
ELK是一套强大的日志管理和分析工具,广泛应用于日志监控、故障排查、业务分析等场景。本文档将详细介绍ELK的各个组件及其配置方法,帮助读者从零开始掌握ELK的使用。
微信接口报错 "errcode":40163,"errmsg":"code been used, 如何处理?
【10月更文挑战第11天】微信接口报错 "errcode":40163,"errmsg":"code been used, 如何处理?
6295 1
|
前端开发 开发工具 git
[巨详细]使用HBuilder-X启动uniapp项目教程
【6月更文挑战第6天】使用HBuilder-X启动uniapp项目教程 先用HBuilder-X打开本地的uniapp项目
2571 0
下一篇
oss云网关配置