整合 crypto-js 加解密

package.json

@@ -58,6 +58,7 @@
     "@dcloudio/uni-mp-xhs": "3.0.0-4020920240930001",
     "@dcloudio/uni-quickapp-webview": "3.0.0-4020920240930001",
     "@dcloudio/uni-ui": "^1.5.6",
+    "crypto-js": "^3.3.0",
     "destr": "^2.0.3",
     "moment": "^2.30.1",
     "pinia": "^2.2.4",

pnpm-lock.yaml

@@ -56,6 +56,9 @@ importers:
       '@dcloudio/uni-ui':
         specifier: ^1.5.6
         version: 1.5.6
+      crypto-js:
+        specifier: ^3.3.0
+        version: 3.3.0
       destr:
         specifier: ^2.0.3
         version: 2.0.3
@@ -2018,6 +2021,9 @@ packages:
     resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
     engines: {node: '>= 8'}
 
+  crypto-js@3.3.0:
+    resolution: {integrity: sha512-DIT51nX0dCfKltpRiXV+/TVZq+Qq2NgF4644+K7Ttnla7zEzqc+kjJyiB96BHNyUTBxyjzRcZYpUdZa+QAqi6Q==}
+
   css-font-size-keywords@1.0.0:
     resolution: {integrity: sha512-Q+svMDbMlelgCfH/RVDKtTDaf5021O486ZThQPIpahnIjUkMUslC+WuOQSWTgGSrNCH08Y7tYNEmmy0hkfMI8Q==}
 
@@ -6796,6 +6802,8 @@ snapshots:
       shebang-command: 2.0.0
       which: 2.0.2
 
+  crypto-js@3.3.0: {}
+
   css-font-size-keywords@1.0.0: {}
 
   css-font-stretch-keywords@1.0.1: {}

src/App.vue

@@ -19,4 +19,7 @@ button {
   margin: 2px
 }
 
+page {
+  background-color: #F8F8F8;
+}
 </style>

src/pages.json

@@ -37,6 +37,12 @@
 			"style": {
 				"navigationBarTitleText": "摄像头测试"
 			}
+		},
+		{
+			"path": "pages/test-page/test-crypto",
+			"style": {
+				"navigationBarTitleText": "加密测试"
+			}
 		}
 	],
 	"globalStyle": {

src/pages/my-info/my-info.vue

@@ -6,6 +6,10 @@
     <button type="warn" @click="toTestPage">进入测试页面</button>
     <button class="button" type="primary" @click="getLocation">获取位置</button>
 
+    <navigator url="/pages/test-page/test-crypto">
+      <button>加解密测试页面</button>
+    </navigator>
+
     <navigator url="/pages/test-page/test-camera">
       <button>打开相机测试页面</button>
     </navigator>

src/pages/test-page/test-crypto.vue

@@ -0,0 +1,51 @@
+<script setup>
+import {reactive} from 'vue'
+import CryptoJS from 'crypto-js'
+
+const ctx = reactive({
+  content: "Message",
+  passphrase: "Secret Passphrase",
+  encrypted: "",
+})
+
+function encrypt(){
+  let encrypted = CryptoJS.AES.encrypt(ctx.content, ctx.passphrase).toString()
+  console.log(encrypted)
+  ctx.encrypted = encrypted
+  let decrypted = CryptoJS.AES.decrypt(ctx.encrypted, ctx.passphrase)
+  let originalText = decrypted.toString(CryptoJS.enc.Utf8)
+  console.log(originalText)
+}
+
+encrypt()
+</script>
+
+<template>
+  <view style="text-align: center;">
+    <text>Test Crypto</text>
+  </view>
+
+  <view>
+    <view class="uni-common-mt">
+      <view style="text-align: center;font-size: 48rpx">
+        AES加密
+      </view>
+      <view style="text-align: center;">
+        <text>密钥</text>
+        <uni-easyinput type="text" placeholder="请输入密钥" v-model="ctx.passphrase" @change="encrypt"/>
+      </view>
+      <view style="text-align: center;">
+        <text>明文</text>
+        <uni-easyinput type="textarea" autoHeight  placeholder="请输入内容" v-model="ctx.content" @change="encrypt"/>
+      </view>
+      <view style="text-align: center;">
+        <text>密文</text>
+        <uni-easyinput type="textarea" autoHeight  placeholder="请输入密文" v-model="ctx.encrypted"/>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+
+</style>