uni-app知识点1

登录页面

**登录页面涉及到的知识点：

1、点击获取验证码（base64使用）
2、提示信息（uview基于uni-app的UI框架）
3、点击登录后加密解密
4、本地存储，取值删除uni.setStorageSync，uni.getStorageSync，uni.removeStorageSync
5、发送请求**

---

一、base64的使用
base64编码介绍 | Base64 Encode
Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一，Base64编码可用于在HTTP环境下传递较长的标识信息。采用Base64编码具有不可读性，即所编码的数据不会被人用肉眼所直接看到。

Base64编码要求把3个8位字节（38=24）转化为4个6位的字节（46=24），之后在6位的前面补两个0，形成8位一个字节的形式。 如果剩下的字符不足3个字节，则用0填充，输出字符使用’=’，因此编码后输出的文本末尾可能会出现1或2个’=’。

base64图片工具介绍 | Base64 Encode/Decode Tool
1.支持 PNG、GIF、JPG、BMP、ICO 格式。

2.将图片转换成base64编码的，在web网上一般用于小图片上，不仅可以减少图片的请求数量（集合到js、css代码中），还可以防止因为一些相对路径等问题导致图片404错误。

3.假定生成的代码为“data:image/jpeg;base64, …”，那么你只需要全部复制，然后在插入图片的时候，地址填写这段代码即可:

CSS中使用：background-image: url("https://img-blog.csdnimg.cn/2022010613061651054.png");

HTML中使用：

<img src="https://img-blog.csdnimg.cn/2022010613061651054.png" />

如果后端返回的base64前面没有“data:image/pn;base64”，那么用字符串拼接起来就可以了

二、提示信息

基于uni-app的ui框架，地址：https://www.uviewui.com/components/install.html

三、点击登录后加密解密
使用：
1、npm install jsencrypt
2、引入 import JSEncrypt from '../../node_modules/jsencrypt/bin/jsencrypt.js'
3、加密

var encrypt = new JSEncrypt();
let publicKye = 'MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBANQndiANTFXVm7L4Oax+x1+zpbfuSbDG\n' +
    '+W/TJTM+uUWbrbYyT/kdF/WWaMXRypfuOST1AufuDPdxRzgVXWMlRtsCAwEAAQ==';
encrypt.setPublicKey(publicKye); // 公钥
let password = encrypt.encrypt(this.password); // password

4、解密

var decrypt = new JSEncrypt();
let privateKey = `-----BEGIN PRIVATE KEY-----
MIICdwIBADANBgkqhkiG9w0BAQEFAASCAmEwggJdAgEAAoGBAPCuZwa4OhVRQDjf
UD1N2TRiP9KjsC+nNJTbki7E8mcyB7I58xWgEBAqIbCXGmnD7azHWRDaLXxKs3ob
ZCxNNp6M6D3fF1fQflSINFZEDzhRcFZU0/cyQb93sTJphpiamOX6RWy8OIPoij6F
ZNXJXA5f+zQH3kMFhhsyqtbD1/dvAgMBAAECgYEAh+FuuRR5dl+Q6orpOjMhVbnC
XqGbbsvvm7r7JPx7/lb4kV62JpdfekDPFGu6tcuv+8PwPNtwoqNqAJ5GR9yv4GtR
RP1inIQSL167zDak9lVXXP9TJ6K+2AfKwOVWJ99OuZvvD8Mmbek4EV7pZDe56xZO
gkDJNiZvsJ1uL7ZV/sECQQD62s0jSSuCSE1X1SFcbS3OBfCrlFjUOMs4/HgQ5guK
oIjbGneyF5hw9D4/mMMXi/kbv4BavEYu39W7PMQXUmR7AkEA9Z4umRpSyKg/3MT6
Nyorw3kauXckqgr7nbmYFUVoGvB/XaejYYp3rK6PJDwxdlKxWxUQEAWLXuJVidCe
PR2InQJAYusy504sJQTD0vXNYPgAjvRSsiYeXRlEMeWEpw0/0dt5/ARU3NpnF2uI
vGVN0RQ2GBYM1DrX5hYH3vyYSqYHzwJBAKk6HVz7WAJMegO/663KbnC1pgYW4roN
6yLW1sQBGCNHhFmgwN7Zqm7drl4G4wVlIDFjJ7gCOe5b/xd/FyeAi7kCQEC8kfDQ
8j+wkrhwlkMPquOotHqQEv386y9H7fflcOFuHg0Py93fGFmJA6/Fp5TMqsyxo55g
ZmjE/Qp04FIEAxs=
-----END PRIVATE KEY-----
`;
decrypt.setPrivateKey(privateKey);
let decryption = decrypt.decrypt(aa);
console.log(decryption);

5、生成公私秘钥网址：https://www.bejson.com/enc/rsa/

四、本地存储，取值删除uni.setStorageSync，uni.getStorageSync，uni.removeStorageSync
【地址】](https://uniapp.dcloud.io/api/storage/storage?id=setstoragesync)