h5小程序使用微信点金计划解决方案

最新推荐文章于 2024-04-15 09:29:08 发布

斗萝大陆

最新推荐文章于 2024-04-15 09:29:08 发布

阅读量776

点赞数

分类专栏：小程序文章标签：小程序微信 javascript

本文链接：https://blog.csdn.net/qq_57260058/article/details/125279424

版权

小程序专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这是一个使用 Vue 框架编写的前端代码片段，主要功能是接收微信传递的参数，通过调用后端接口获取订单信息并在页面上展示。当点击按钮时，代码会触发页面跳转到指定的 H5 页面，并且在初始化时解决了 HTML 的 font-size 问题。代码中涉及了路由参数解析、异步数据获取、组件挂载后的操作以及跨窗口通信。

摘要由CSDN通过智能技术生成

主要是功能实现代码如下：

<template>
  <div class="">
    <div v-if="!loading">
      订单信息展示
      <button @click="toPage"></button>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      loading: true,
      detail: {},
    };
  },
  computed: {},
  watch: {},
  methods: {},
  async created() {
    try {
      document.querySelector("html").style.fontSize = "10px"; // 解决进入小票html 的font-size = 0 的问题
      const { out_trade_no, sub_mch_id, check_code } = this.$route.query; // 解构微信传过来的参数字段
      // 判断如果字段都有值
      if (out_trade_no && sub_mch_id && check_code) {
        // 发送请求,调用后端接口获取订单信息并展示
        const detail = await getDetail({ out_trade_no });
        this.detail = detail; // 订单信息赋值
        this.loading = false;
      }
    } catch (error) {
      this.loading = false;
    }
  },
  mounted() {
    const mchData = {
      action: "onIframeReady",
      displayStyle: "SHOW_CUSTOM_PAGE",
    };
    const postData = JSON.stringify(mchData);
    window.parent.postMessage(postData, "*");
  },
  methods: {
    toPage() {
      // 跳转到指定的h5页面
      const mchData = {
        action: "jumpOut",
        jumpOutUrl: `https://XXXX/XX?out_trade_no=${this.$route.query.out_trade_no}`,
      }; // 跳转到指定的页面并携带参数
      const postData = JSON.stringify(mchData);
      window.parent.postMessage(postData, "*");
    },
  },
};
</script>
<style scoped>
</style>