摘要：
在這次微信小程式開發中，有一個關于價格的樣式調整。小數點前的數值比小數點後面的的，主要是突出一下。由于接口傳回的隻有一個字段，是以前端要利用split對相關參數的值進行分割，再配合wxss樣式實作最終效果…
大綱
- 一、原型
- 二、思路分析
- 三、split()方法
- 3.1、新增split 類型
- 3.3、細節優化
- 3.3.1、方案一：整數時不顯示小數
- 3.3.2、方案二：統一保留兩位有效小數
- 四、demo源碼
- 五、其他說明
一、原型
可能标題描述的不是太清晰，那我們就看下原型圖吧。如圖：UI原型.png
實際上就是：小數點前的數字比小數點後面的數字大
二、思路分析
通常情況，金額（價格）是一個字段。比如：price，是以不存在小數點前後字号不一緻的問題。但既然原型是這樣畫的，那要怎麼實作呢？讓後端改接口，改成兩個字段？這後端肯定是不幹的且也不合理！是以，隻能靠前端來實作了。
那前端怎麼實作呢？看官會發現 小數點 是分界線。是以，想辦法把小數點前後的數字分别取到就解決了問題。
三、split()方法
在js中，如果要把數字15.32變成15、.和32的話，最簡單的方法就是使用split()方法。在微信小程式中也同樣适用。
昨天在format.wxs檔案中封裝了一個名叫formatValue的函數，現在把split也添加進去。
這裡直接上源碼了
/*
* @Description: 通用格式處理
* @Author: wsp
* @Date: 2020-04-20 10:33:42
* @LastEditors: wsp
* @LastEditTime: 2020-04-28 22:35:30
*/
/**
* @author: wsp
* @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 = value
switch (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) + '萬'
}
break
case 'sold': // 已售
// 已售：當虛拟銷小于10000件時，顯示完全；當虛拟銷量大于等于10000件，則顯示為已售1.0萬件的格式，即保留1位小數
result = Number(value)
if (result >= 10000) {
result = (result / 10000).toFixed(1) + '萬'
}
break
case '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+'
}
break
case 'coupon': // 優惠券
result = Number(value / 100)
break
case '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代碼：
<!-- 引入格式化函數 yiling 20200420 10:53:46 start -->
<wxs src="../../utils/format.wxs" module="wxs"></wxs>
<!-- 引入格式化函數 yiling 20200420 10:53:46 end -->
...... /* 省略若幹項目代碼 */
<view class="price">
¥<text class="price__big">{{wxs.formatValue(price, 'split')[0]}}</text>.<text>{{wxs.formatValue(price, 'split')[1]}}</text> /* 處理價格 */
</view>
...... /* 省略若幹項目代碼 */ 
是不是有點小尴尬？？？至于為什麼會出現這種情況是因為：166是一個整數，使用
split(’.’)
分割後數組長度為1，此時
{{wxs.formatValue(166, ‘split’)[1]}}
不存在。 是以，出現上述情況就很好了解了。
解決方案有兩種：
- 方案一：整數時不顯示小數點；
- 方案二：統一保留兩位有效小數
選擇的方案不同，我們的代碼寫法也會有所差別，下面來一一示範。
3.3.1、方案一：整數時不顯示小數
将原來的
.
替換成
<text wx:if="{{wxs.formatValue(price, 'split')[1]}}">.</text> 即可。
3.3.2、方案二：統一保留兩位有效小數
此時又有兩種方法。
第一種：不修改wxs中的代碼，使用現有代碼組合的方式實作；