微信小程序中Crypto.js加密解密详细示例代码

 更新时间:2026年01月11日 08:32:26   作者:小明记账簿  
CryptoJS是一个JavaScript加密算法库,用于实现各种加密算法和哈希函数,这篇文章主要介绍了微信小程序中Crypto.js加密解密的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下

前言

在微信小程序开发中,数据安全至关重要。crypto-js作为一个强大的JavaScript加密库,为小程序提供了可靠的加密解密功能。本文将详细介绍如何在微信小程序中使用crypto-js进行AES加密解密,并分析其中的疑难点和注意事项。

一、crypto-js的引入

1. 使用npm安装

1.1 检查 package.json 文件

首先检查小程序根目录下是否有 package.json 文件。如果没有该文件,则需要执行npm init 进行初始化。

1.2 安装 crypto-js

执行下面命令,如果不行可以换yarn试试。

npm install crypto-js

1.3 构建 npm

安装crypto-js后直接构建,会出现错误,这个时候需要在微信开发者工具的工具菜单中,点击 构建 npm。这一步骤将把安装的crypto-js库进行构建,使其能够在小程序中使用。构建完成后,就可以在小程序中引入和使用crypto-js进行加解密操作了。

2. 直接引入crypto-js

此方法需要手动下载crypto-js的源码,并将其放置在项目的合适位置,如/utils/目录下,crypto-js下载

在需要使用crypto-js的页面或组件中,通过require方式引入crypto-js

const CryptoJS = require('../../utils/crypto-js');

二、AES加密解密的实现

  1. 密钥和初始向量的设置:AES加密需要密钥(Key)和初始向量(IV)。这些参数可以自定义,但通常建议与后端开发人员沟通后保持一致,以确保加密解密的正确性。密钥和IV的长度应满足算法要求,例如AES算法通常使用16字节(128位)的密钥和IV。

  2. 加密解密函数封装:创建一个加密函数,使用crypto-js的AES模块对数据进行加密,使用相同的密钥和配置参数创建解密函数。

// 如果是手动导入的,可以这样写
// const CryptoJS = require("./crypto-js");
// npm 安装
import CryptoJS from "crypto-js";
// 密钥16字节
// 配置密钥和IV(与Java完全一致)
const KEY = "123456789abcdefg"; // 16字节密钥
const IV = "987654321abcdefg"; // 16字节固定IV
// 密钥和IV转换为WordArray(CryptoJS要求的格式)
const key = CryptoJS.enc.Utf8.parse(KEY);
const iv = CryptoJS.enc.Utf8.parse(IV);
// 加密函数,包含配置项
export const encryptAES = (message) => {
  let config = {
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7,
    iv: iv,
  };
  return CryptoJS.AES.encrypt(message, key, config).toString();
};
// 解密
export const decrypt = (encryptedBase64) => {
  try {
    // 1. 将Base64加密数据转换为CryptoJS格式
    const encryptedHex = CryptoJS.enc.Base64.parse(encryptedBase64);
    // 2. 执行解密(模式CBC,填充PKCS7)
    const decrypted = CryptoJS.AES.decrypt(
      { ciphertext: encryptedHex }, // 加密数据
      key, // 密钥
      {
        iv: iv, // 初始化向量
        mode: CryptoJS.mode.CBC, // 模式必须与Java一致
        padding: CryptoJS.pad.Pkcs7, // PKCS5Padding与PKCS7Padding兼容
      }
    );
    // 3. 将解密结果转换为UTF-8字符串
    return decrypted.toString(CryptoJS.enc.Utf8);
  } catch (err) {
    console.error("AES解密失败:", err);
    return null; // 解密失败返回null
  }
};
  1. 使用示例:在需要加密解密的地方调用上述函数即可。
    在线加密加密工具
import { decrypt, encryptAES } from "../../utils/util";
Page({
  onLoad() {
    const originalData = { id: 1, name: "exampleName" }; // 待加密的数据
    console.log("加密后的数据:", encryptAES(JSON.stringify(originalData)));
    console.log("解密后的数据:", JSON.parse(decrypt("KdWWnjeoE5RQQ8JN+WAWJj0rnkzvaLkRSweOoGb2cqQ=")));
  },
});

和在线工具加密一直

三、注意事项

  1. 密钥和IV的管理:密钥和IV是加密解密的关键,必须妥善保管。

  2. 加密模式的选择crypto-js支持多种加密模式,如ECBCBC等。每种模式都有其特点和适用场景。例如,CBC模式相比ECB模式更安全,因为它使用了初始向量(IV)来增加加密的随机性。

  3. 数据的编码和解码:在加密前,需要将数据转换为适合加密的格式。通常使用UTF-8编码将字符串转换为字节数组。同样地,在解密后,也需要将字节数组转换回原始的字符串格式。

  4. 错误处理:在使用crypto-js进行加密解密时,可能会遇到各种错误,如密钥不匹配、数据格式不正确等。因此,在编写代码时,应该添加适当的错误处理逻辑,以确保程序的稳定性和可靠性。

  5. 如果遇到random,可以重写random方法,示例如下:

    const CryptoJS = require("./crypto-js");
    CryptoJS.lib.WordArray.random = function (nBytes) {
      const uint8Array = new Uint8Array(nBytes);
      wx.getRandomValues(uint8Array); // 使用小程序原生API生成随机数
      const hexStr = Array.from(uint8Array)
        .map((byte) => ("0" + (byte & 0xff).toString(16)).slice(-2))
        .join("");
      return CryptoJS.enc.Hex.parse(hexStr);
    };
    

总结 

到此这篇关于微信小程序中Crypto.js加密解密的文章就介绍到这了,更多相关微信小程序Crypto.js加密解密内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 如何用Driver.js轻松打造完美页面引导体验

    如何用Driver.js轻松打造完美页面引导体验

    Driver.js是一个页面引导插件,封装完美,只需引入实例化、绑定类名即可实现页面引导,这篇文章主要介绍了如何用Driver.js轻松打造完美页面引导体验的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-08-08
  • js实现DIV的一些简单控制

    js实现DIV的一些简单控制

    js实现DIV的一些简单控制...
    2007-06-06
  • 在JavaScript中访问历史记录的多种方法

    在JavaScript中访问历史记录的多种方法

    作为Web前端知识开发技术专家,深入掌握window.history对象的精确行为、事件模型和最佳实践,是构建用户体验流畅、可访问性强且符合Web标准的复杂应用的关键,本文给大家介绍了在JavaScript中访问历史记录的多种方法,需要的朋友可以参考下
    2025-08-08
  • JS 实现Base64编码与解码实例详解

    JS 实现Base64编码与解码实例详解

    这篇文章主要介绍了JS 实现Base64编码与解码实例详解的相关资料,并附实例代码,帮助大家学习理解此部分知识,需要的朋友可以参考下
    2016-11-11
  • IE8 内存泄露(内存一直增长 )的原因及解决办法

    IE8 内存泄露(内存一直增长 )的原因及解决办法

    最近开发的时候对页面使用了定时的局部更新,结果在ie6,7和Firefox下,一切正常,而在ie8下过上几个小时就浏览器就崩溃了,显示是内存溢出,下面由脚本之家小编给大家介绍ie8下内存一直增长内存泄漏的原因及解决办法,需要的朋友一起学习吧
    2016-04-04
  • 前端项目npm install 安装依赖报错的解决方案(三种问题解决方案)

    前端项目npm install 安装依赖报错的解决方案(三种问题解决方案)

    本文给大家介绍前端项目npm install 安装依赖报错的解决方案(三种问题解决方案),给大家总结了前端项目安装依赖,遇到过的问题,每一种问题给大家完美解决方案,感兴趣的朋友一起看看吧
    2023-12-12
  • JS小数运算出现多为小数问题的解决方法

    JS小数运算出现多为小数问题的解决方法

    这篇文章主要介绍了JS小数运算出现多为小数问题的解决方法,需要的朋友可以参考下
    2016-06-06
  • javascript实现点击按钮切换图片

    javascript实现点击按钮切换图片

    这篇文章主要为大家详细介绍了javascript实现点击按钮切换图片,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • js实现文本框选中的方法

    js实现文本框选中的方法

    这篇文章主要介绍了js实现文本框选中的方法,涉及javascript中select()方法的使用技巧,需要的朋友可以参考下
    2015-05-05
  • JavaScript的高级概念和用法详解

    JavaScript的高级概念和用法详解

    JavaScript语言不断发布一些新特性,感觉要上天的节奏啊。本文搜集整理了一些它的高级概念和用法,需要的朋友可以参考下
    2022-07-07

最新评论