测试h5跳转小程序

package.json

@@ -3,7 +3,7 @@
 	"version": "0.0.0",
 	"scripts": {
 		"dev": "vite",
-		"build:dev":"vite build --mode test",
+		"build:dev": "vite build --mode test",
 		"prod": "vite --mode production",
 		"build": "vite build --mode production",
 		"serve": "vite preview --port 443"
@@ -23,6 +23,7 @@
 		"vue-router": "^4.0.10",
 		"vuex": "^4.0.2",
 		"vuex-persistedstate": "^4.1.0",
+		"weixin-js-sdk": "^1.6.0",
 		"weixin-js-sdk-ts": "^1.6.1"
 	},
 	"devDependencies": {

src/main.ts

@@ -11,6 +11,8 @@ import VConsole from "vconsole";
 if (import.meta.env.MODE === "development") new VConsole();
 
 const app = createApp(App);
+
+app.config.compilerOptions.isCustomElement = tag => tag.startsWith('wx-open-launch-weapp')
 app.use(store);
 app.use(router);
 app.use(components);

src/views/lightMock/index.vue

@@ -11,10 +11,10 @@
 			"
 			v-if="lightConfigVisible"></lightConfig>
 		<composeTopicsMask
-			v-if="singleTopicsVisible"
+			v-if="composeTopicsMaskVisible"
 			@close="
 				() => {
-					singleTopicsVisible = false;
+					composeTopicsMaskVisible = false;
 				}
 			"
 			@before="selectBeforeCom"
@@ -104,7 +104,7 @@ let list2 = ref([
 	},
 ]);
 let listItem = ref([]);
-let singleTopicsVisible = ref(false);
+let composeTopicsMaskVisible = ref(false);
 let singleTopicTitle = ref("");
 lightingCombinationList().then((res) => {
 	list1.value = res.rows;
@@ -119,7 +119,7 @@ lightingItemList().then((res) => {
 });
 let selectCom = (item: any, index: number) => {
 	list1Index.value = index;
-	singleTopicsVisible.value = true;
+	composeTopicsMaskVisible.value = true;
 	singleTopicTitle.value = item.titile;
 	lightingCombinationId(item.id).then((res) => {
 		listItem.value = res.data;

src/views/mini/index.vue

@@ -0,0 +1,70 @@
+<template>
+	<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";
+export default defineComponent({
+	setup() {
+		wx.config({
+			debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
+			appId: "wx67ca1b8c9816ef28", // 必填，公众号的唯一标识
+			timestamp: 0, // 必填，生成签名的时间戳
+			nonceStr: "", // 必填，生成签名的随机串
+			signature: "", // 必填，签名
+			jsApiList: [], // 必填，需要使用的JS接口列表
+			openTagList: ["wx-open-launch-weapp"], // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
+		});
+		let isWxReady = ref(false);
+		let weappHtml = ref("");
+		wx.ready(() => {
+			setTimeout(function () {
+				weappHtml = `<wx-open-launch-weapp id="launch-btn" username="xxx">\
+
+          <template>\
+
+            <button>小程序跳转</button>\
+
+          </template>\
+
+          </wx-open-launch-weapp>`;
+			}, 2000);
+			console.log("ready");
+		});
+		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>