跳转小程序30

package-lock.json

@@ -446,6 +446,15 @@
 			"integrity": "sha1-+30CvDNdIMwUGYfxbBlbGvd9dWo=",
 			"dev": true
 		},
+		"@types/jssha": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/@types/jssha/-/jssha-3.0.0.tgz",
+			"integrity": "sha512-EfJ5RHBfB/XVl9rg12W6u6on3jEGQXYqIHlEja1/tkn2PWJg+Kz0RjMRuKmoWmDCZp5cz0jlS++XslTpRUFNvQ==",
+			"dev": true,
+			"requires": {
+				"jssha": "*"
+			}
+		},
 		"@types/marked": {
 			"version": "3.0.1",
 			"resolved": "https://registry.nlark.com/@types/marked/download/@types/marked-3.0.1.tgz?cache=0&sync_timestamp=1631543903416&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40types%2Fmarked%2Fdownload%2F%40types%2Fmarked-3.0.1.tgz",
@@ -1325,6 +1334,11 @@
 			"integrity": "sha1-q914VwHH5+rKip7IzwcMpRp0WiI=",
 			"dev": true
 		},
+		"jssha": {
+			"version": "1.6.3",
+			"resolved": "https://registry.npmjs.org/jssha/-/jssha-1.6.3.tgz",
+			"integrity": "sha512-TkZ+CPZTyfPoZ6efNBo0M624XBKbXohHr7Nt6DIuBCd5JsC8Dh8qFNbxVAiKOb2tMz/CxQd0WQcL6at7lfwclw=="
+		},
 		"jstransformer": {
 			"version": "1.0.0",
 			"resolved": "https://registry.nlark.com/jstransformer/download/jstransformer-1.0.0.tgz",

package.json

@@ -9,6 +9,7 @@
 		"serve": "vite preview --port 443"
 	},
 	"dependencies": {
+		"jssha": "^1.5.0",
 		"axios": "^0.21.4",
 		"axios-logger": "^2.6.0",
 		"dayjs": "^1.10.7",
@@ -26,13 +27,14 @@
 		"weixin-js-sdk-ts": "^1.6.0"
 	},
 	"devDependencies": {
-		"@vitejs/plugin-vue-jsx": "^1.3.7",
 		"@types/howler": "^2.2.4",
+		"@types/jssha": "^3.0.0",
 		"@types/marked": "^3.0.1",
 		"@types/mockjs": "^1.0.4",
 		"@types/node": "^16.11.6",
 		"@types/soundjs": "^0.6.28",
 		"@vitejs/plugin-vue": "^1.3.0",
+		"@vitejs/plugin-vue-jsx": "^1.3.7",
 		"@vue/compiler-sfc": "^3.0.5",
 		"postcss-pxtorem": "^6.0.0",
 		"sass": "^1.37.5",

src/utils/wxSign.ts

@@ -0,0 +1,19 @@
+
+import jsSHA from 'jssha'
+// 随机字符串产生函数
+var createNonceStr = function () {
+    return Math.random().toString(36).substr(2, 15);
+};
+
+// 时间戳产生函数
+var createTimeStamp = function () {
+    return parseInt(new Date().getTime() / 1000 + '');
+};
+var calcSignature = function (ticket: string, noncestr: string, timestamp: number, url: string) {
+
+    var str = 'jsapi_ticket=' + ticket + '&noncestr=' + noncestr + '&timestamp=' + timestamp + '&url=' + url;
+    var shaObj = new jsSHA(str, 'TEXT');
+    return shaObj.getHash('SHA-1', 'HEX');
+}
+
+export default { calcSignature, createNonceStr, createTimeStamp }

src/views/mini/index.vue

@@ -14,6 +14,7 @@
 import { defineComponent, ref } from "vue";
 import wx from "weixin-js-sdk-ts";
 import { openApi } from "@/api/index";
+import wxSign from '@/utils/wxSign';
 export default defineComponent({
 	setup() {
 		openApi
@@ -22,22 +23,23 @@ export default defineComponent({
 		
 			})
 			.then((res) => {
-				let wxConfig = {
-					debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
-					appId: res.data.data.appId as string, // 必填，公众号的唯一标识
-					timestamp: res.data.data.timestamp as number, // 必填，生成签名的时间戳
-					nonceStr: res.data.data.nonceStr as string, // 必填，生成签名的随机串
-					signature: res.data.data.signature as string, // 必填，签名
-					jsApiList: ["previewImage"], // 必填，需要使用的JS接口列表
-					openTagList: ["wx-open-launch-weapp"], // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
-				};
-				console.log(wxConfig);
+				// let wxConfig = {
+				// 	debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
+				// 	appId: res.data.data.appId as string, // 必填，公众号的唯一标识
+				// 	timestamp: res.data.data.timestamp as number, // 必填，生成签名的时间戳
+				// 	nonceStr: res.data.data.nonceStr as string, // 必填，生成签名的随机串
+				// 	signature: res.data.data.signature as string, // 必填，签名
+				// 	jsApiList: ["previewImage"], // 必填，需要使用的JS接口列表
+				// 	openTagList: ["wx-open-launch-weapp"], // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
+				// };
+				let  timestamp = wxSign.createTimeStamp()
+				let nonceStr = wxSign.createNonceStr()
 				wx.config({
 					debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
-					appId:"wx67ca1b8c9816ef28", // 必填，公众号的唯一标识
-					timestamp: 1650277776, // 必填，生成签名的时间戳
-					nonceStr: "zlc5xtjhzo", // 必填，生成签名的随机串
-					signature: "19f330ab086ad33382903f0e8b20568a5baaf3f9", // 必填，签名
+					appId:res.data.data.appId as string, // 必填，公众号的唯一标识
+					timestamp: timestamp, // 必填，生成签名的时间戳
+					nonceStr: nonceStr, // 必填，生成签名的随机串
+					signature: wxSign.calcSignature(res.data.data.ticket,nonceStr,timestamp,window.location.href), // 必填，签名
 					jsApiList: ["previewImage"], // 必填，需要使用的JS接口列表
 					openTagList: ["wx-open-launch-weapp"], // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
 				});