Asroads'Blog 君子不器
CocosCreator3.5.x引入第三方库crypto-js
发布于: 2022-06-27 更新于: 2022-07-11 分类于: game 阅读次数: 

今天在Cocos技术群里跟群里交流小游戏开发技巧和经验,有群友遇到了crypto-js这个类库在CocosCreator如何使用,记得2.x的时候自己测试过,貌似没有成功,于是今天再次拾起来,综合最近所学所悟搞定后记录一下,整个操作过程,便于后面用到的时候查找。

环境

  • Cocos Creator 3.5.2
  • crypto-js
  • Windows系统

步骤

下载类库编译

  1. 先去官网地址下载我们的类库 https://github.com/brix/crypto-js
  2. 下载后解压文件,这里使用Webstorm打开编译
  3. 我们看到里面有个 grunt目录 职业习惯感觉是个编译工具 于是找到 Webstorm对应的帮助文档

从Grunt工具窗口构建任务树

  • 在“ grunt”工具窗口中,单击添加按钮在工具栏上,然后从列表中选择所需的Gruntfile.js文件。默认情况下,WebStorm在项目的根目录中显示Gruntfile.js文件。
  • 如果您还有另一个Gruntfile.js文件,请单击“选择Gruntfile.js ,然后在打开的对话框中选择所需的Gruntfile.js文件。WebStorm在其标题上添加一个具有所选Gruntfile.js文件路径的新节点,并在新节点下构建任务树。
  1. 按照步骤3的提示 修改 grunt\tasks 目录下的 modularize.jsGruntfile.js 然后 使用webstorm 右键 生成对应的任务树
  2. 我们这里选择 build 任务 生成我们的库文件 运行任务后 生成一个 build目录 找到我们要的文件 crypto-js.js

image-20220627134813233

  1. 去官方网站 下载我们对应是声明文件地址:https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/crypto-js。
  2. 下载后 找到 下载后里面的 index.d.ts

新建CocosCreator项目

  1. 新建一个项目 写入测试代码:

注意 不要第一行的引入 直接 因为我们接下来要添加全局变量

1
2
3
4
5
6
7
8
9
10
var data = [{id: 1}, {id: 2}]

// Encrypt
var ciphertext = CryptoJS.AES.encrypt(JSON.stringify(data), 'secret key 123').toString();

// Decrypt
var bytes = CryptoJS.AES.decrypt(ciphertext, 'secret key 123');
var decryptedData = JSON.parse(bytes.toString(CryptoJS.enc.Utf8));

console.log(decryptedData); // [{id: 1}, {id: 2}]
  1. 把刚刚的文件 crypto-js.js 复制到 我们的项目内 这里为了方便 新建一个目录叫做 libs ,然后把 index.d.ts 声明文件 修改为 crypto-js.d.ts

修改部分兼容添加全局变量

  1. 修改crypto-js.js 文件 首先文件里面搜索 关键字 require 找到 这里 注释掉

image-20220627135241004

  1. 找到文件最后部分 添加一行代码:window.CryptoJS =CryptoJS; 这个 代码 在 return 前添加即可

image-20220627135349332

最后运行我们的项目 输出结果:

image-20220627135503288

最后 放上测试源码项目地址 点击前往

其他用法

Cocos Creator3.x中使用AES加密解密 直接使用 不需要修改 注意需要引入文件 完整路径。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import CryptoJS  from "crypto-js.min.js";
const aseKey = "12345678" //秘钥必须为:8/16/32位
var message = "abcd";
// https://forum.cocos.org/t/topic/106414
//加密
var encrypt = CryptoJS.AES.encrypt(message, CryptoJS.enc.Utf8.parse(aseKey), {
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7
}).toString();
console.log(encrypt); //nlW4ll0zjyXE7NvC/wO9rQ==

//解密
var decrypt = CryptoJS.AES.decrypt(encrypt, CryptoJS.enc.Utf8.parse(aseKey), {
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7
}).toString(CryptoJS.enc.Utf8);
console.log(decrypt); //abcd

作者:翼2021
链接:https://juejin.cn/post/6990264979991560223
来源:稀土掘金

grunt构建相关

grunt是JavaScript 世界的构建工具 有时候我们用第三方库常常可以看到,如果构建项目遇到下面错误,可以这样解决。

  1. 报错:
1
'const' is available in ES6 (use 'esversion: 6') or Mozilla JS extensions (use moz).

原因:grunt-contrib-jshint默认是不支持es6 syntax的,如果在被检查的代码中使用es6的新特性,那么就会报错

解决办法:如何解决:修改Jshint配置

1
2
3
4
5
6
7
{
jshint: {
options: {
esversion: 6
}
}
}
  1. 报错:

    1
    2
    3
    src/utils.js
    108 |}
    ^ Missing semicolon.

    原因: 代码文件缺少分号结尾

    解决办法 在对应的文件处 添加分号 比如上面 就是 src/utils.js 108行 缺少分号。

参考

--- 本文结束 The End ---