跳转小程序31

src/views/mini/index.vue

@@ -38,8 +38,8 @@ export default defineComponent({
 					debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
 					appId:res.data.data.appId as string, // 必填，公众号的唯一标识
 					timestamp: timestamp, // 必填，生成签名的时间戳
-					nonceStr: nonceStr, // 必填，生成签名的随机串
-					signature: wxSign.calcSignature(res.data.data.ticket,nonceStr,timestamp,window.location.href), // 必填，签名
+					nonceStr: nonceStr+'S', // 必填，生成签名的随机串
+					signature: wxSign.calcSignature(res.data.data.ticket,nonceStr+'S',timestamp,window.location.href), // 必填，签名
 					jsApiList: ["previewImage"], // 必填，需要使用的JS接口列表
 					openTagList: ["wx-open-launch-weapp"], // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
 				});

src/views/mini1/index.vue

@@ -0,0 +1,90 @@
+<template>
+	<div>
+		<div v-text="weappHtml"></div>
+		<div>https://www.baidu.com/yy</div>
+		<wx-open-launch-weapp style="display: inline-block; border: none" id="launch-btn" username="gh_a994fd2f498e" path="pages/carVideo/index.html?living_code=LIVING_CODE">
+			<div v-is="'script'" type="text/wxtag-template">
+				<div v-is="'style'">.openbtn{background-color:#38f;color:#f40;width:100px;height:40px;line-height:40px;}</div>
+				<div class="openbtn">跳转小程序</div>
+			</div>
+		</wx-open-launch-weapp>
+	</div>
+</template>
+<script lang="ts">
+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
+			.jspapi({
+				url: encodeURIComponent(window.location.href.split('#')[0]),
+		
+			})
+			.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']
+				// };
+				let  timestamp = wxSign.createTimeStamp()
+				let nonceStr = wxSign.createNonceStr()
+				wx.config({
+					debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
+					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']
+				});
+
+				wx.error(({ errMsg }) => {
+					weappHtml.value = errMsg;
+					wx.ready(() => {
+						wx.scanQRCode({
+							needResult: 1,
+							scanType: ["qrCode", "barCode"],
+							success(res) {},
+						});
+					});
+				});
+			});
+
+		let isWxReady = ref(false);
+		let weappHtml = ref("");
+		return {
+			weappHtml,
+			isWxReady,
+		};
+	},
+	methods: {
+		handleErrorFn(e: Event) {
+			console.log("fail", e.detail);
+		},
+
+		handleLaunchFn(e: Event) {
+			console.log("success");
+		},
+	},
+	mounted() {},
+});
+</script>
+
+<style lang="scss" scoped>
+.btn-open-weapp {
+	width: 100px;
+	height: 30px;
+	border-radius: 25px;
+	background: #085b27;
+	display: block;
+	border: 0px;
+	font-size: 14px;
+	color: white;
+}
+</style>