README
bs-utils
这个项目是从bs-ui-seed基础创建出来的. 请查看
base/README.md
来了解其基础内容.
提供小程序的utils的相关方法。
功能介绍
- 基础通用方法的提供
- 集成moment
- 集成lodash
- 集成MD5
- 支持helper.wx
- 支持helper.echarts
- 支持helper.common
- 支持helper.logger
使用方法
- 安装
npm i bs-utils -s
- .js
const helper=require('miniprogram_npm/bs-utils/index')
onReady() {
helper.moment();
helper.lodash.find();
helper.md5.hexMD5('123456');
helper.wx.showToash('提示信息');
helper.echarts.axisValueFormatter();
helper.common.numberFormat(10000000);
helper.logger.log('123213')
helper.logger.logProd('23432423')
}
注册方法
由于调用helper.logger相关方法时需要注入当前环境,因此在调用之前需要先注入相关环境变量
const {
init: helper_init
} = require('miniprogram_npm/bs-utils/index');
App({
onLaunch() {
helper_init({
currentEnv: 'prod'
})
}
})
通用方法说明
lodash
描述:一般用于处理各种集合或数组。
lodash官方文档参见:https://www.lodashjs.com/docs/4.17.5.html#filter
调用方式:helper.lodash.xxx(); 其中xxx表示lodash的方法
moment
描述:一般用于处理时间相关的格式化或其他操作等。
moment官方文档参见:http://momentjs.cn/docs/
调用方式:helper.moment(); 此方法返回moment对象,可以基于此对象调用moment的相关方法
MD5
描述:用于进行MD5加密操作。
调用方式:helper.md5.hexMD5('123456');
helper.logger 封装日志记录
描述:替代console.log方法,保持项目线上和开发环境的日志记录分开。
调用方式:
- helper.logger.log(...agrs):开发环境日志记录
- helper.logger.logProd(...args):生产环境日志记录(开发环境也会记录)
helper.logger.log('dev'); //只在非prod环境下记录日志
helper.logger.logProd('prod'); // 始终记录日志(开发环境&生产环境)
helper.wx 微信api的相关方法封装
描述:提供微信相关的api的封装及页面通用的方法,主要封装方法为showToast,showLoading,hideLoading,showErrorModal
helper.wx.showToast
描述:显示toast提示信息
调用方式:helper.wx.showToast(options)
helper.wx.showToast('提交成功'); // 如果传入为字符串,则按照默认配置显示提示信息(覆盖title属性)
helper.wx.showToast({
title: '',// 提示信息
icon: 'none',// 图标,支持success,loading,none三种类型
duration: 2000,// 提示的延长时间,默认2s
success: function () {} // 接口调用成功的回调函数
})
helper.wx.showLoading / hideLoading
描述:显示loading提示框,搭配hideLoading使用,需要主动调用hideLoading才能关闭显示框
调用方式:helper.wx.showLoading(options) helper.wx.hideLoading()
helper.wx.showLoading('操作中...'); // 如果传入为字符传则按照默认配置显示提示信息(覆盖title属性)
helper.wx.showLoading(3); // 表示当前页面有三个ajax调用,当页面存在一次性调用多个ajax时使用
helper.wx.showLoading({
title: '数据加载中...',// 提示信息
loadingCount: 0, // 当前页面有几个ajax调用
mask: true //是否显示透明蒙层,防止触摸穿透
})
helper.wx.hideLoading();//关闭loading提示框(注:ajax请求成功或失败时都需要调用)
helper.wx.showErrorModal
描述:错误提示框,一般用于ajax加载的catch中调用
调用方式:helper.wx.showErrorModal(options)
helper.wx.showErrorModal('错误啦'); //弹出错误信息”错误啦“
helper.wx.showErrorModal({
message:'服务端出错啦' //弹出错误信息”服务端出错啦“
})
helper.wx.showErrorModal();//弹出默认错误信息”加载失败,请重试。“
helper.echarts echarts相关的方法
描述:封装了echarts的一些通用方法,例如,tooltip的位置,X/Y轴的数字展示处理
helper.echarts.axisValueFormatter
描述:用于格式化echarts的options中的xAxis和yAxis的展示
调用方式:helper.echarts.axisValueFormatter
module.exports = {
xAxis: {
name: " ",
type: 'value',
axisLabel: {
formatter: helper.echarts.axisValueFormatter //格式化x轴的展示
}
},
yAxis: {
type: 'category',
data: ['总量', 'No.1', 'No.2', 'No.3'],
}
}
module.exports = {
yAxis: {
name: " ",
type: 'value',
axisLabel: {
color: '#9b9b9b',
fontSize: 9,
formatter: helper.echarts.axisValueFormatter //格式化y轴的展示
}
},
xAxis: {
type: 'category',
data: ['6+次', '3-5次', '1-2次']
}
}
helper.echarts.tooltipPosition
描述:用于设置tooltip的展示的位置
调用方式:helper.echarts.tooltipPosition(pos, params, size, top = 35) //pos/params/size使用默认的position的参数,top表示距离顶部的距离,默认为35
module.exports = {
tooltip: {
trigger: 'axis',
position: function(pos, params, dom, rect, size) {
return helper.echarts.tooltipPosition(pos, params, size, 35)
}
}
}
helper.common 其他通用的方法
描述:其他通用的基础方法,例如数字格式化,获取周几等。
helper.common.numberFormat
描述:数字格式化,主要包括正数,不支持负数。百分数的展示请使用 percentnuFormat
调用方式:helper.common.numberFormat(val, isShortNum = false, isThousand = true, suffix = '', digit = -1)
参数说明:
- value:需要处理的数字
- isShortNumber: 是否进行万或者亿的缩写,默认为false
- isThousand: 是否进行千分位转换,默认为true
- suffix: 后缀
- digit: 小数位最大长度,默认为-1表示不处理小数位
helper.common.numberFormat(1000010.23); //1,000,010.23
helper.common.numberFormat("1000010.23"); //1,000,010.23
helper.common.numberFormat(1000000001,true,true,'',2); //10.00亿
helper.common.numberFormat(""); // --
helper.common.numberFormat(-10000); //-10000
helper.common.percentnuFormat
描述:百分数的格式化,主要针对%数进行格式化,追加百分号%
调用方法:helper.common.percentnuFormat(val)
helper.common.percentnuFormat('80.12'); // 80.12%
helper.common.percentnuFormat('80'); // 80%
helper.common.percentnuFormat(80.12); // 80.12%
helper.common.numberFormat(""); // --
helper.common.nullFormat
描述:格式化null的处理,如果是null/undefined/NaN/空字符串则显示--,否则显示原数据
调用方法:helper.common.nullFormat(obj)
helper.common.nullFormat(''); // --
helper.common.nullFormat('123'); // 123
helper.common.formatCentToYuan
描述:格式化分到元的方法
调用方式:helper.common.formatCentToYuan(value, number); // value不存在或为0则返回空字符串,number表示位数,分>>元则number为2
helper.common.formatCentToYuan(530, 2); // 5.3
helper.common.formatCentToYuan(5300000, 2); // 53000
helper.common.formatCentToYuan(1, 2); // 0.01
helper.common.checkIsNull
描述:判断是否是null/undefined/NaN/空字符串,如果是则返回true,否则返回false
调用方式:helper.common.checkIsNull(val)
helper.common.checkIsNull(null); // true
helper.common.checkIsNull(undefined); // true
helper.common.checkIsNull(''); // true
helper.common.checkIsNull(NaN); // true
helper.common.checkIsNull({}); // false
helper.common.checkIsNull(1); // false
helper.common.checkIsNull(0); // false
helper.common.checkIsNull('123a'); // false
helper.common.checkIsNull({
a: ''
}); // false
helper.common.getWeekName
描述:获取当前日期是周几,传入的参数为moment对象
调用方式:helper.common.getWeekName(momentObj);
const currentDate = helper.moment('2019-05-20');
helper.common.getWeekName(currentDate); // 周一
helper.common.checkEmoji
描述:检测输入的内容是否有表情,主要用于表单中的文本框,有表情则返回true,没有则返回false
调用方式:helper.common.checkEmoji(name)
helper.common.checkEmoji('123123123'); // false