uniapp h5网页跳转小程序

uniapp h5 网页跳转小程序

1. 注意事项

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<template>
  <view class="wx" v-html="html"> </view>
</template>

<script lang="ts">
  import { Component, Vue } from "vue-property-decorator";
  import { SystemApi } from "@global/api/SystemApi";

  @Component({
    name: "Test",
  })
  export default class Test extends Vue {
    html: any = "";
    onReady() {
      this.buildHtml();
    }

    async buildHtml() {
      await SystemApi.getWxReady();
      this.html = `
        <wx-open-launch-weapp id="launch-btn" username="xxxxxxx" path="xxxxxxx.html">
          <template>
              <button class="btn">打开小程序</button>
          </template>
        </wx-open-launch-weapp>
      `;
    }
  }
</script>

被这个折磨了好几天，终于成功实现功能，如于控制台报错，wx-open-launch-weapp 标签未注册的情况，可能是因为， 微信开发者工具不能直接调试，需要传到测试平台，需要是安全域名平台下，如果是按钮未显示的情况，需要将 config 注册的调试改为 true，看下 config 注册是否成功。

2. 补充

在做这个按钮美化的时候发现以下问题，未找到解决方法：1.按钮无法设置背景图片，无法设置定位；设置定位之后会导致按钮消失。因为不能真机调试，所以不好调试。记录以下，以后碰到解决方案在跟进该问题

3. 大部分样式已经可以兼容设置了

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！