微信小程序使用npm方式增加jsencrypt rsa加密验证

目录

一、npm安装jsencrypt

二、微信小程序构建npm

三、微信开发者工具的设置

四、修改构建后的jsecnrypt文件

五、使用jsencrypt进行rsa加密

六、实际完成rsa验证并非一帆风顺，不过按照第一到第五步操作，肯定是没问题的

---

一、npm安装jsencrypt

1.cmd切换到小程序的目录

2.执行npm init，按照具体情况在cmd里面填写相关的字段，之后小程序会多这两个文件

3.执行mkdir node_modules，创建node_modules文件夹

4.npm install jsencrypt，安装jsencrypt

npm init

mkdir node_modules

npm install jsencrypt

二、微信小程序构建npm

1.微信开发者工具打开小程序

2.选择上方工具，然后选择二级菜单中的构建npm

3.构建npm后，会出现miniprogram_npm文件夹，这就是小程序需要用的npm包文件

4.注意，每次执行工具》构建npm，miniprogram_npm文件夹都会重置，也就是说如果构建后你有改动过哪些包的js，那你在每次执行工具》构建npm后，都要再改一遍。

三、微信开发者工具的设置

1.微信开发者工具右上方的详情》本地设置》勾选使用npm模块与ES6转ES5

四、修改构建后的jsecnrypt文件

1.打开miniprogram_npm》jsencrypt>index.js文件

2.在}(this, (function (exports) {代码下面添加下方代码

var navigator = {
  appName: 'Netscape',
  userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46     (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1'
};
var window = {
  ASN1: null,
  Base64: null,
  Hex: null,
  crypto: null,
  href: null
};

五、使用jsencrypt进行rsa加密

1.需要用jsencrypt加密的文件js里面引用jsencrypt

import { JSEncrypt } from "jsencrypt";//引用jsencrypt
let publicKey = app.abbr.publicKey;//引用公钥，也可以接口请求过来，不过我的项目是写在文件固定的
var jsencrypt = new JSEncrypt();//实例化jsencrypt
jsencrypt.setPublicKey(publicKey);/jsencrypt设置公钥

2.对需要rsa加密的字段进行加密

let username = jsencrypt.encrypt(this.data.username );//对需要rsa加密的字段加密

3.关于encrypt的引用方式见下方解释

// const JSEncrypt = require('../../../miniprogram_npm/jsencrypt/index.js')//不OK
// const JSEncrypt = require('jsencrypt')//不OK
// import { JSEncrypt } from "../../../miniprogram_npm/jsencrypt/index.js";//OK
import { JSEncrypt } from "jsencrypt";//OK

六、实际完成rsa验证并非一帆风顺，不过按照第一到第五步操作，肯定是没问题的

1.构建npm然后直接引用jsencrypt后，会出现WAService.js:1 Uncaught TypeError: Cannot read property 'appName' of undefined这个问题

解决方法：上方第三步

ps：我跟着网上的方法，注释掉navigator的判断，留下一个else里面的操作；复制网上crypto处报错的处理；删除addeventlistener监听；最后还是有问题。

问题表现：

（1）相关的页面打不开，提示not registered

（2）jsencrypt not undefined

这两个问题都可以通过重新构建npm，然后跟着上方第三步的方法更改，即可解决。很神奇！

2.下载，修改，引用jsencrypt后，控制台报错JSEncrypt is not a constructor

解决方法，见上方第四步第三小点，是因为引用encrypt的方式不对

要用import引用，不能用require引用，原因未知，反正这么引用就好了。