jpcj-h5/src/views/mini1/index.vue

<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>