bs-utils

Base Readme

这个项目是从bs-ui-seed基础创建出来的. 请查看base/README.md 来了解其基础内容.

提供小程序的utils的相关方法。

功能介绍

• 基础通用方法的提供
• 集成moment
• 集成lodash
• 集成MD5
• 支持helper.wx
• 支持helper.echarts
• 支持helper.common
• 支持helper.logger

使用方法

1. 安装

npm i bs-utils -s

4. .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