微信网页 H5 跳转到 微信小程序 Vue wx-open-launch-weapp 图片 样式问题

前段时间，有需求：H5跳转到微信小程序页面，于是查了微信官方文档
只需要微信小程序的originalId和某个页面的路径即可

最难受的是：样式问题

需求：点击上面的卡片，进入微信小程序

代码：

<template>
  <wx-open-launch-weapp
    :username="originalId"
    :path="pages/home/index.html"
  >
    <script type="text/wxtag-template">
      <style>.prize-detail {
      width: 375px;
      display: flex;
      padding: 10px;
      background: #fff; }
      .prize-img {
      width: 70px;
      height: 70px;
      margin-right: 10px; }
      .prize-name {
      width: 275px;
      color: #222;
      font-size: 12.5px;
      line-height: 18px;
      word-break: break-all; }</style>
      <div class="prize-detail">
      <img src="{{ reward.image }}" class="prize-img">
      <span class="prize-name">{{ reward.name }}</span>
      </div>
    script>
  wx-open-launch-weapp>
template>

<script>
  data() {
    return {
      originalId: 'gh_xxx',
      reward: {
        image: 'xxx',
        name: '荞麦面一碗'
      },
    };
  },
script>

重点： 在标签里面写样式， 一定要使用微信小程序的语法（比如图片），不能使用vue语法（不生效！！！），

最近get了一种新的方式，写样式

<template>
  <div class="page-jump-wrapper">
    <!-- H5跳小程序 -->
    <wx-open-launch-weapp
      :username="originalId"
      :path="weappPath"
    >
      <script type="text/wxtag-template">
        <style>
        div {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: transparent;
        }</style>
        <div />
      </script>
    </wx-open-launch-weapp>

    <slot name="content" />
  </div>
</template>

<style lang="less" scoped>
.page-jump-wrapper {
  position: relative;
  z-index: 2;

  wx-open-launch-weapp {
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 100%;
  }
}
</style>