开发uniapp前端通用价格组件提交到DCloud插件市场

需求描述

如果你开发商城类项目，必定会显示价格，如果想让价格显示的具有突出并且有美感，如下图所示，很显然是需要花费一些工夫的，我在开发商城的时候客户端、后台管理都需要展示价格，每天都要花费一些时间调整，所以我就开发了一个价格组件，将价格显示的样式放到插件市场，如果需要显示价格的时候，导入进来修改一下属性就能使用了。

上面显示的价格样式，在这篇文章“自定义价格尾数”讲过，如果使用css完整价格尾数的显示。

下面我们就通过上面的需求，开发一款可以给uniapp项目是使用的价格组件，介绍一下如何开发DCloud插件市场的插件。

📺综合商城实战项目：unipay支付微信小程序商城开发Vue3完整版

一、新建uni_modules插件

1.在根目录下“uni_modules”单击右键，“新建uni_modules插件”

2.为插件创建一个名称，前面最好加一个你的专属前缀，我的昵称是“咸虾米”，所以我的所有插件都用了xxm作为了前缀，就好比element-plus用的所有组件前缀都是el-类似，前缀后面的单词最好能准确表达创建的意思，方便别人检索你的插件。

然后，选择你开发的插件分类，我开发的这个插件是通用组件，所以选择第一个。

3.插件目录结构如下：

• components内的xxm-price.vue是你要写的组件
• changelog.md 是更新日志，这个不需要编写，提交时候会自动更新
• package.json 是插件的配置项，如插件说明及相关依赖等

readme.md 是插件的使用说明，会在插件市场详情页展示的文档

二、开发插件

如上目录所示，我们要想实现一个功能，核心代码是需要编写在xxm-price.vue文件中的。
这个就是一个普通的vue文件，如果你会写vue这个页面没什么要给介绍的，重点是需要接收一下父组件传递过来的属性，在当前组件中进行处理。

下面这个代码是完整的实现逻辑，可以作为参考，当然你开发自己的组件的话就编写自己的代码就可以了。

这个实现代码中，很多地方让AI给实现的，所以用AI辅助开发还是很方便的，甚至一行代码都不需要写，直接用自然语言描述，就可以生成一个你所需要的功能组件了。

<script setup>import{ ref, computed }from'vue';const props =defineProps({ price:{ type: Number,default:999}, symbol:{ type: String,default:'￥'}, size:{ type: Number,default:20}, smallSize:{ type: Number,default:undefined}, color:{ type: String,default:'#FF0F23'}, origPrice:{ type: Number,default:0}, origColor:{ type: String,default:'#999'}, origAlign:{ type: String,default:'right',validator:(val)=>['left','right','top','bottom'].includes(val)// 限制可选值}});const comFontSize =computed(()=>{// 如果传递了smallSize则使用，否则用size*0.618return props.smallSize ?? props.size *0.618;});// 计算flex-direction方向const flexDirection =computed(()=>{// left/right → row；top/bottom → columnreturn['left','right'].includes(props.origAlign)?'row':'column';});// 计算align-items值const alignItems =computed(()=>{// top/bottom → flex-start；left/right → flex-endreturn['top','bottom'].includes(props.origAlign)?'flex-start':'flex-end';});// 计算原价是否需要调整orderconst isOrigPriceFirst =computed(()=>{// top/left → order:-1return['top','left'].includes(props.origAlign);});functionformatPrice(num, option =0){// 第一步：校验num是否为有效数字if(typeof num !=='number'||isNaN(num)){return'无效的数字，第一个参数必须是有效数字';}// 提取公共计算逻辑：num/100（处理精度误差）const baseValue =(num + Number.EPSILON)/100;// 根据option分支处理if(option ===0){// 取百位及以上整数（向下取整）return Math.floor(baseValue);}elseif(option ===1){// 取小数点后两位（格式化为.xx形式的字符串）// 先保留两位小数，再截取小数部分const fixedValue = Math.round(baseValue *100)/100;// 精准保留两位小数const[, decimalPart ='00']= fixedValue.toString().split('.');return`.${decimalPart.padEnd(2,'0').slice(0,2)}`;}else{// 非0/1选项：返回num/100并保留两位小数（数字类型）return Math.round(baseValue *100)/100;}}</script><template><view class="price-wrap":style="{'--flex-direction': flexDirection,'--align-items': alignItems }"><view class="price":style="{ '--symbol': `'${symbol}'`, '--size': `${size}px`, '--color': `${color}`, '--com-size': `${comFontSize}px` }":data-suffix="formatPrice(price, 1)">{{formatPrice(price,0)}}</view><view class="origPrice" v-if="origPrice > 0":style="{ '--orig-color': origColor, '--com-size': `${comFontSize}px`, '--order': isOrigPriceFirst ? '-1' : 'initial' }">{{formatPrice(origPrice,-1)}}</view></view></template><style lang="scss" scoped>.price-wrap { display: flex; align-items: flex-start; align-items:var(--align-items); flex-direction:var(--flex-direction);// 动态控制布局方向 line-height:1em; gap:5px;.price { color:var(--color); font-size:var(--size); font-weight: bold;&::before { font-size:var(--com-size); content:var(--symbol);}&::after { font-size:var(--com-size); content:attr(data-suffix);}}.origPrice { text-decoration: line-through; color:var(--orig-color); font-size:var(--com-size); order:var(--order);// 动态控制排序}}</style>

三、提交插件

如果你的功能组件已经开发完毕了，那么就需要将该组件提交到插件市场了，那么给大家介绍一下如何操作。

发布到插件市场

在插件文件夹上单击右键，选择“发布到插件市场”，会出现插件描述的弹窗，可以在弹窗内填写插件的相关信息，也可以在“package.json”文件中填写，在package.json填写过的话，选择发布的时候再弹窗中也会展示你填写的内容，弹窗编写的内容只有提交后才会写入到package.json文件中。

不知道上面这些怎么填写？我以官方的uni-icons组件为例，告诉大家对应关系。

• 一定要注意将开发的组件选择适合的分类
• 插件显示名称、描述、标签一定要清晰明了，让别人看标题就知道是干什么的插件
• 插件ID是唯一的，所以最后前面加上你的个性标识，如el-、uni-、uv-等

其他配置大家就按照要求填写就可以了，如果没有问题就可以点击提交，就会发布到DCloud的插件市场了。

先发布的插件，会展示在插件市场的首页，插件市场是按照插件更新时间排序的，如果想要给插件增加多一些曝光度，经常更新插件是一个好的办法。

这样插件就发布成功了，插件地址：https://ext.dcloud.net.cn/plugin?name=xxm-price

在本插件的详情页可以看到对插件使用说明的介绍，这是因为我们在插件文件夹下的“readme.md”进行了编写，你可以将详细的使用文档进行编写，有利于让别人更好的入手你的插件。

四、应用插件

提交发布插件后，在DCloud插件市场就可以找到我们发布的插件了，和使用官方扩展组件一样，选择右上角的“下载插件并导入HBuilderX”，这样就会将该插件下载到你项目的“uni_modules”目录中，和使用自定义的组件一样使用即可。

在项目中使用

在任意的vue文件中，可以使用该插件，无需import导入价格插件，直接在页面中使用插件名称，便可展示价格样式了，在插件说明文档中有组件属性的说明，也可以参考下面代码来使用。

<template><view class="layout"><view class="row"><view class="title">基础样式：</view><xxm-price></xxm-price></view><view class="row"><view class="title">设置组件大小：</view><xxm-price :size="26"></xxm-price></view><view class="row"><view class="title">前缀货币符号：</view><xxm-price :size="26" symbol="$"></xxm-price></view><view class="row"><view class="title">显示原价和现价：</view><xxm-price :size="26":price="36987":origPrice="400355"></xxm-price></view><view class="row"><view class="title">设置小字尺寸：</view><xxm-price :size="26":price="36987":origPrice="400355":smallSize="12"></xxm-price></view><view class="row"><view class="title">设置原价和现价颜色：</view><xxm-price :size="26":price="36987":origPrice="400355" color="#E6A23C" origColor="green"></xxm-price></view><view class="row"><view class="title">设置原价显示位置：</view><xxm-price :size="26":price="36987":origPrice="400355" origAlign="bottom"></xxm-price></view></view></template>