uniapp vue3 微信公众号打开小程序

<template>
	<view class="certification" style="height: 100vh;">
		<wx-open-launch-weapp
			style="position: absolute; top: 0; left: 0; width: 100%; height: 100%"
			:username="userName"
			:path="path"
			@launch="handleLaunchFn"
			@error="handleErrorFn"
			id="launch-btn"
		>
			<div v-is="'script'" type="text/wxtag-template">
				<!--这里的height只有px起效 vw不起效，visibility: hidden是为了让组件样式不影响到实际效果 -->
				<div
					class="btn"
					style="height: 100%;display: flex;flex-direction: column;align-items: center;padding-top: 50px;width: 100%;background: #666666;"
				>
					打开小程序
				</div>
			</div>
			<!-- vue3中这样写会报错，改成上面方式v-is="'script'" -->
			<!-- <script type="text/wxtag-template">  
			        <style>.btn { padding: 12px; border: 1px solid red; }</style>
			        <button class="btn">打开小程序</button>
			       </script> -->
		</wx-open-launch-weapp>
	</view>
</template>

<script setup>
import {
      
       ref, reactive, getCurrentInstance, toRefs, nextTick } from 'vue';
import {
      
       wxConfig } from '@/common/api.js';
import {
      
       onLoad, onShow } from '@dcloudio/uni-app';
import wx from 'weixin-js-sdk';

let dataRef = reactive({
      
      
	path: '/pages/secondary/product-details',
	userName: 'gh_fa95b8d03e47'
});
const {
      
       proxy } = getCurrentInstance();
onLoad(option => {
      
      
	nextTick(function() {
      
      
		let paramData = {
      
       url: window.location.href.split('#')[0]};
		wxConfig(paramData).then(res => {
      
      
			if(res.code == 0){
      
      
				const data = res.result
				wx.config({
      
      
					debug: false,
					appId: data.appId, //小程序的appId
					timestamp: data.timestamp, //生成签名的时间戳
					nonceStr: data.nonceStr, //生成签名的随机串
					signature: data.signature, //签名
					jsApiList: ['wx-open-launch-weapp'],
					openTagList: ['wx-open-launch-weapp']
				});
				wx.ready(e => {
      
      
					 var btn = document.getElementById('launch-btn');
					  btn.addEventListener('launch', function (e) {
      
      
					    console.log('success');
					  });
					  btn.addEventListener('error', function (e) {
      
      
					    console.log('fail', e.detail);
					  });
					console.log(e, '成功验证');
				});
				wx.error(e => {
      
      
					console.log(e, '失败信息');
				});
			}
			
		})
		
	});
});
onShow(() => {
      
      });
const {
      
       path, userName } = toRefs(dataRef);

const handleLaunchFn = e => {
      
      
	console.log('success');
};

const handleErrorFn = e => {
      
      
	console.log('Error');
};

</script>

<style lang="scss" scoped>
.certification {
      
      
	width: 100%;
	background: #f0f0f0;
	overflow: hidden;
}

.opentag {
      
      
	display: block;
	width: 400rpx;
	height: 400rpx;
	background-color: aliceblue;
}
</style>