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>

<template>
<view class="certification" style="hei