更新记录

1.1.8（2024-11-15） 下载此版本

优化一些方法

1.1.7（2024-10-25） 下载此版本

增加本地存储方法

1.1.6（2024-10-25） 下载此版本

获取元素信息Api调整

平台兼容性

hbxw-utils

说明

开发中常用工具方法封装，如节点获取/高精度计算/类型判断/日期格式化/节流防抖等，提高开发效率，避免无效的造轮子，其中部分方法摘自uview

方法列表

节点获取篇

系统信息篇

精度计算篇

类型判断

日期格式化篇

性能优化篇

本地存储方法封装

通用方法篇

请求方法封装 Request

绝大部分项目都要用到请求方法，基于uni.request封装了使用更方便的请求方法

请求方法特性：

1. 支持baseUrl设置，如果传的接口本身就是http开头就会跳过baseUrl的添加
2. 支持请求拦截，拦截方法可以添加多个，有一个拦截返回true则请求中断
3. 支持响应拦截，拦截方法可以添加多个，有一个拦截返回true则请求中断
4. 支持请求中断，发起的请求返回Promise上默认都会带上cancel方法，调用它会中断当前请求

请求方法使用示例：

// utils/request.js
import Request from '@/uni_modules/hbxw-utils/js_sdk/hbxw-utils.js';

const request = new Request();

request.baseUrl = '这里是请求的baseUrl';

/**
 * 请求拦截，可以通过add方法添加多个
 * 参数为请求配置，可以对请求参数做一些特殊处理
 */
request.requestIntercept.add((requestConfig) => {
    // 如果有传就用传的，没有就去取，为了解决登录默认token
    if (!requestConfig.header.Authorization) {
        let Authorization = undefined
        try {
            Authorization = '登录token';
        } catch (err) {
            console.log(err)
        }
        // 添加Authorization到header中用于服务端登录判断
        requestConfig.header.Authorization = Authorization;
    }
    // 如果返回true则请求会中断
    // return true;
});

/**
 * 响应拦截，可以通过add方法添加多个
 * 第一个参数为请求响应体
 * 第二个参数为请求配置信息
 */
request.responIntercept.add((response, requestConfig) => {
    // 如果接状态码为401，而且当前接口是需要判断登录状态的
    if (response.statusCode == 401 && requestConfig.isLogin) {
        uni.navigateTo({
            url: '/packageUniversal/login/login?type=' + LOGIN_TYPE.relogin
        })
        // 返回true 中断后面处理
        return true;
    }
});

export default request;

推荐单起一个文件管理接口api,登录相关的接口示例代码如下:

 import request from "../utils/request.js";
 /**
 * 退出登录
 */
export function loginout () {
    return request.request("/auth/authentication/removeToken")
}

/**
 * 获取用户详情信息
 */
export function getUserDetail () {
    return request.request("/admin/api/user/profile", null,{
        method: "GET",
        isLogin: false
    })
}

更多有用方法持续更新中。。。，如果你有想要的方法欢迎留言

使用示例

<template>
    <view class="test-wrap">
        <text class="title">系统信息：</text>
        <text>当前状态栏高度: {{statusHeight}}</text>
        <text>当前标题栏高度: {{titleBarHeight}}</text>
        <text>当前headerbar高度: {{headerBarHeight}}</text>
        <view class="test-info"><text>当前窗口尺寸信息: </text><text>{{windowInfo}}</text></view>
        <view class="test-info"><text>当前系统信息: </text><text>{{systemInfo}}</text></view>

        <text class="title">节点获取：</text>
        <view class="hbxwutil-test-wrap">
            <view class="test0">1</view>
            <view class="test test1">2</view>
            <view class="test test2">3</view>
        </view>
        <view class="test-info"><text>第1个节点尺寸信息</text><text>{{firstInfo}}</text></view>
        <view class="test-info"><text>第2-3个节点尺寸信息</text><text>{{otherInfo}}</text></view>

        <text class="title">精度计算：</text>
        <text>0.1*0.2 = {{0.1*0.2}}</text>
        <text>高精度计算0.1*0.2: {{times}}</text>
        <text>0.1+0.2 = {{0.1+0.2}}</text>
        <text>高精度计算0.1+0.2: {{plus}}</text>
        <text>0.3-0.1 = {{0.3-0.1}}</text>
        <text>高精度计算0.3-0.1: {{minus}}</text>
        <text>0.3/0.2 = {{0.3/0.1}}</text>
        <text>高精度计算0.1/0.2: {{divide}}</text>

        <text class="title">时间格式化</text>
        <text>当前时间：{{now}}</text>
        <text>格式化时间：{{timeFormat}}</text>
        <text>多久前：{{timeFormatLong}}</text>

        <text class="title">类型检测（列举常用的）</text>
        <text>xiewu5550@163.com是一个邮箱：{{isEmail}}</text>
        <text>是一个电话号码：{{isMobile}}</text>
        <text>http://www.baidu.com是一个网址：{{isUrl}}</text>
        <text>12.5是一个十进制数字：{{isNumber}}</text>
        <text>'abc'是一个字符串：{{isString}}</text>
        <text>12.5是一个整数：{{isDigits}}</text>
        <text>432656322是一个身份证号码：{{isIdCard}}</text>
        <text>12.23是一个保留二位数字的金额：{{isAmount}}</text>
        <text>'中文'是一个中文字符串：{{isChinese}}</text>

        <text class="title">其它常用方法</text>
        <text>1689.35转换为保留二位小数的千分位结果：{{numberFormat}}</text>
        <text>" 123 560 "去除二端空格结果："{{trim}}"</text>
        <view class="test-info"><text>[1,2,3,4,5]随机打乱结果：</text><text>{{randomArray}}</text></view>
        <view class="test-info"><text>{a:1,b:{bb:1}}深拷贝结果：</text><text>{{deepClone}}</text></view>
        <text>{a:1,b:{bb:1}},{b:{bb:2,c:11}}的深入合并结果：{{deepMerge}}</text>
        <view class="test-info"><text>'width:100rpx;height:100px'转换为样式对象结果：</text><text>{{transformStyle}}</text></view>
        <text>getPx('168rpx')结果：{{getPx}}</text>
        <text>random(10,100)结果：{{random}}</text>
    <button @click="setStorage">调置一个key为test123的5秒过期缓存</button>
    <button @click="getStorage">查看key为test123的缓存</button>
    </view>
</template>

<script>
    import {
        getStatusBarHeight,
        getTitleBarHeight, 
        getHeaderBarHeight,
        getWindowInfo,
        getSystemInfo,

        selector,
        selectorAll,

        throttle, 
        debounce,

        times,
        plus,
        minus, 
        divide, 
        round,

        timeFormat,
        timeFormatToLong,

        isEmail,
        isMobile,
        isUrl,
        isNumber,
        isString,
        isDigits,
        isIdCard,
        isAmount,
        isChinese,
        testApi,

        numberFormat,
        trim,
        randomArray,
        deepClone,
        deepMerge,
        transformStyle,
        getPx,
        random,
    storage
    } from '/uni_modules/hbxw-utils/js_sdk/hbxw-utils.js';
    export default {
        data() {
            return {
                statusHeight: 0,
                titleBarHeight: 0,
                headerBarHeight: 0,
                windowInfo: null,
                systemInfo: null,

                firstInfo: null,
                otherInfo: null,

                times: 0,
                plus: 0,
                minus: 0,
                divide: 0,
                round: 0,

                now: '',
                timeFormat: '',
                timeFormatLong: '',

                isEmail: false,
                isMobile: false,
                isUrl: false,
                isNumber: false,
                isString: false,
                isDigits: false,
                isIdCard: false,
                isAmount: false,
                isChinese: false,

                numberFormat: '',
                trim: '',
                randomArray: null,
                deepClone: null,
                deepMerge: null,
                transformStyle: null,
                getPx: null,
                random: null
            }
        },
        onPageScroll() {
            // 防抖 节流
            throttle(() => console.log('---- onPageScroll ----:throttle') , 500);
            debounce(() => console.log('---- onPageScroll ----:debounce') , 500);
        },
        mounted() {
            getStatusBarHeight().then((res) => this.statusHeight = res);
            getTitleBarHeight().then((res) => this.titleBarHeight = res);
            getHeaderBarHeight().then((res) => this.headerBarHeight = res);
            getWindowInfo().then((res) => this.windowInfo = res);
            getSystemInfo().then((res) => this.systemInfo = res);

            selector('.test0', this).then((res) => this.firstInfo = res);
            selectorAll('.test', this).then((res) => this.otherInfo = res);

            this.times = times(.1,.2);
            this.plus = plus(.1,.2);
            this.minus = minus(.3,.1);
            this.divide = divide(.3,.1);
            this.round = round(0.1+0.2, 2);

            this.now = new Date();
            this.timeFormat = timeFormat(this.now, 'yyyy-mm-dd hh:MM:ss');
            this.timeFormatLong = timeFormatToLong(new Date(new Date().setDate(5)));

            this.isEmail = isEmail('xiewu5550@163.com')
            this.isMobile = isMobile('');
            this.isUrl = isUrl('http://www.baidu.com');
            this.isNumber = isNumber(12);
            this.isString = isString('abc');
            this.isDigits = isDigits(12.2);
            this.isIdCard = isIdCard(432656322);
            this.isAmount = isAmount(12.23);
            this.isChinese = isChinese('中文');
            const isdate = testApi.isDate(new Date())
            console.log('isdate: ',isdate);

            this.numberFormat = numberFormat(1689.35, 2);
            this.trim = trim(' 123 560 ');
            this.randomArray = randomArray([1,2,3,4,5]);
            this.deepClone = deepClone({a:1,b:{bb:1}});
            this.deepMerge = deepMerge({a:1,b:{bb:1}},{b:{bb:2,c:11}});
            this.transformStyle = transformStyle('width:100rpx;height:100px');
            this.getPx = getPx('168rpx');
            this.random = random(10,100)
        },
        methods: {
            setStorage() {
        storage.set({
          key: 'test123',
          value: '我是5s后过期的缓存',
          expiresTime: 5
        })
      },
      getStorage() {
        // 5s秒内和5杪是能查到的
        console.log('---- getStorage ----:',  storage.get('test123'));
      }
        }
    }
</script>

<style lang="scss" scoped>
.hbxwutil-test-wrap{
    display: flex;
    .test0,.test1,.test2{
        width: 168rpx;
        height: 168rpx;
        margin-right: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32rpx;;
        color: #fff;
        background-color: red;
    }
    .test1{
        height: 268rpx;
    }
    .test2{
        width: 68rpx;
    }
}
.test-info{
    display: flex;
}
.test-wrap{
    width: 100%;
    display: flex;
    flex-direction: column;
}
.title{
    font-size: 28rpx;
    text-align: center;
    font-weight: bold;
    margin: 20rpx 0;
}
</style>