web前端实现微信签名调用wx提供的API

最新推荐文章于 2024-07-18 16:29:25 发布

原创

最新推荐文章于 2024-07-18 16:29:25 发布

· 1.3k 阅读

3 ·

版权

文章标签：

#前端 #微信 #wx签名

本文详细介绍了在前端实现微信配置签名的步骤，包括生成UUID、时间戳、ASCII排序以及使用SHA1加密的方法。通过获取access_token和jsapi_ticket，结合其他必要参数，完成微信API的配置，最终成功调用微信接口如选择图片功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、用到的方法封装

二、获取微信配置的相关数据完成签名

三、经过我的一波疯狂骚操作，完成了前端的签名操作，顺利进入到了wx配置，那么接下来就开始wx api的走秀吧！！！！

一、用到的方法封装

（1）生成UUI

// 生成一个随机的UUID作为动态值
export const UUID = (len?: number, radix?: number) => {
    const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
    const uuid: any[] = [];
    let i: any = 0;
    radix = radix || chars.length;
    if (len) {
        for (i = 0; i < len; i++) uuid[i] = chars[0 | (Math.random() * radix)];
    } else {
        let r;
        // 中间用特殊字符链接
        uuid[8] = uuid[13] = uuid[18] = uuid[23] = '';
        uuid[14] = '4';
        // 长度不长于32位
        for (i = 0; i < 32; i++) {
            if (!uuid[i]) {
                r = 0 | (Math.random() * 16);
                uuid[i] = chars[i == 19 ? (r & 0x3) | 0x8 : r];
            }
        }
    }
    return uuid.join('');
};

（2）生成时间戳或时间

const formatNumber = (n: any) => {
    n = n.toString();
    return n[1] ? n : `0${n}`;
};
export const formatTime = (date: { getFullYear: () => any; getMonth: () => number; getDate: () => any; getHours: () => any; getMinutes: () => any; getSeconds: () => any }, type: any) => {
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    const day = date.getDate();
    const hour = date.getHours();
    const minute = date.getMinutes();
    const second = date.getSeconds();

    switch (type) {
        case 'YY':
            return `${[ye