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

<template>
	<div>
		<div v-text="weappHtml"></div>
		<!-- <wx-open-launch-weapp style="display: inline-block; border: none" id="launch-btn" username="gh_a994fd2f498e" path="pages/index/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";
export default defineComponent({
	setup() {
		openApi
			.jspapi({
				url: encodeURIComponent(window.location.href),
			})
			.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);
				wx.config({
					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-app']
				});
				wx.error(({ errMsg }) => {
					weappHtml.value = errMsg;
				});
			});

		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>