微信小程序在WXS中使用split实现金额小数点前的数比后面的大的效果

可能标题描述的不是太清晰，那我们就看下原型图吧。如图：UI原型.png

实际上就是：小数点前的数字比小数点后面的数字大

二、思路分析
通常情况，金额（价格）是一个字段。比如：price，所以不存在小数点前后字号不一致的问题。但既然原型是这样画的，那要怎么实现呢？让后端改接口，改成两个字段？这后端肯定是不干的且也不合理！所以，只能靠前端来实现了。

那前端怎么实现呢？看官会发现 小数点 是分界线。所以，想办法把小数点前后的数字分别取到就解决了问题。

三、split()方法
在js中，如果要把数字15.32变成15、.和32的话，最简单的方法就是使用split()方法。在微信小程序中也同样适用。

昨天在format.wxs文件中封装了一个名叫formatValue的函数，现在把split也添加进去。

这里直接上源码了

/** @Description: 通用格式处理* @Author: wsp（wsp959550@163.com）* @Date: 2020-04-20 10:33:42* @LastEditors: wsp（wsp959550@163.com）* @LastEditTime: 2020-04-28 22:35:30*/
/*** @author: wsp（wsp959550@163.com）* @description: 格式化（价格、销量、佣金）* @param {Number} value* @param {String} type 类型* @return {void}* @Date: 2020-04-20 10:35:07*/
function formatValue(value, type) {if (typeof value === 'string') {if (value.match('¥')) {var reg = getRegExp('¥', 'g')value = value.replace(reg, '')}}var result = valueswitch (type) {case 'price': // 普通价格// 商品价格：当商品金额小于10000时，保留2位小数显示；大于等于10000元时，则显示为1.0万的格式，即保留1位小数result = Number(value)if (result < 10000) {result = result.toFixed(2)} else {result = (result / 10000).toFixed(1) + '万'}breakcase 'sold': // 已售// 已售：当虚拟销小于10000件时，显示完全；当虚拟销量大于等于10000件，则显示为已售1.0万件的格式，即保留1位小数result = Number(value)if (result >= 10000) {result = (result / 10000).toFixed(1) + '万'}breakcase 'commission': // 佣金// 佣金：当佣金小于10时，保留2位小数显示；大于等于10元时，保留1位有效数字；大于等于100时，保留为整数；大于等于1000时，显示为：赚¥999+result = Number(value)if (result < 10) {result = result.toFixed(2)} else if (result >= 10 && result < 100) {result = result.toFixed(1)} else if (result >= 100 && result < 1000) {result = Math.floor(result)} else {return '999+'}breakcase 'coupon': // 优惠券result = Number(value / 100)breakcase 'split': // 分割result = ('' + result).split('.')// result = Number(result).toFixed(2).split('.') // 保留两位小数的方案// console.log('result=', result, JSON.stringify(result))break}return result
}
module.exports = {formatValue: formatValue
}

然后在需要使用的wxml页面中先引入wxs然后再使用{{wxs.formatValue(‘值’, ‘split’)}}即可。示例代码如下：
核心wxml代码：

...... /* 省略若干项目代码 */
¥{{wxs.formatValue(price, 'split')[0]}}.{{wxs.formatValue(price, 'split')[1]}} /* 处理价格 */

...... /* 省略若干项目代码 */

是不是有点小尴尬？？？至于为什么会出现这种情况是因为：166是一个整数，使用split(’.’)分割后数组长度为1，此时{{wxs.formatValue(166, ‘split’)[1]}}不存在。 所以，出现上述情况就很好理解了。

解决方案有两种：

1. 方案一：整数时不显示小数点；
2. 方案二：统一保留两位有效小数

选择的方案不同，我们的代码写法也会有所区别，下面来一一演示。