Vue项目商家小票页开发：踩坑实录与解决方案

在日常编码工作中，我们会收到来自产品经理的各种需求，这次的需求格外清晰：开发一个缴费成功的H5界面，以便用户在完成缴费后能够顺利跳转至此页面，实现引流功能。这一需求还特别指出，需要分别针对微信环境和支付宝环境进行适配，确保在不同平台上都能提供一致且优质的用户体验。

微信设计稿：

支付宝设计稿：

这种元素较少的H5界面，开发并不复杂，编码-测试环境部署，总体下来2个小时搞定，就给出了联调测试链接地址供三方调用，以至于产品经理都说，这么快。然而调试过程，却一波三折，这也是为什么会写这篇文章的原因。

支付宝的联调很顺利，支付完成后，成功跳转至缴费成功页。

只是支付宝默认背景是灰色，为了还原设计师效果，添加了一些样式，让整体背景变成白色。

css 复制代码

 height: 100vh;
 background-color: #fff;

至此支付宝联调测试通过。

微信的联调却没那么顺利，一上来就报错了，报错信息界面如下图：

当三方合作人员，群里@我时，我第一反应是这不是我开发的界面，我开发的界面里没有获取订单信息相关的代码。这时三方合作人员，给我发来了第一个参考文档： developers.weixin.qq.com/community/d...

此时我才意识到，这需求不是单纯的开发一个H5界面，微信需要开发一个满足点金计划要求的商家小票页。比照上述步骤，发现第2和7，是原vue H5界面中缺少的，于是补全代码再次联调，发现还是显示"无法获取订单信息"，且添加的辅助打印调试信息都不提示。于是猜测第3点是否满足。本地打印测试均在3s以内，奈何微信环境始终报错。

此时，询问三方合作技术人员，有没有vue的相关案例，回复:没有，给了一个原生的html静态界面让参考。于是转变思路，尝试先写一个静态的页面，看是否可以跳转成功。

参考资料：点金计划商家小票开发指引： wx.gtimg.com/pay/downloa...

文档中重点关注的是以下两点：

1.所有订单必须响应 onIframeReady 事件，否则无法正常进行商家小票的展示。

2.调整 Iframe 框架高度

有了以上的技术积累，商家小票静态页的开发就可以开始了。

1.点金计划需引入jgoldplan-1.0.0.js

ini 复制代码

  <head>
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,user-scalable=0"
      charset="UTF-8"
    />
    <script src="../js/jgoldplan-1.0.0.js"></script>
  </head>

2.添加onIframeReady 事件

xml 复制代码

<script>
      function isWeiXin() {
        let ua = window.navigator.userAgent.toLowerCase();
        return ua.indexOf("micromessenger") !== -1;
      }
      window.addEventListener("message",
        function(e) {
          var displayType = "SHOW_CUSTOM_PAGE";//自定义商家小票页
          if (e.origin == "https://payapp.weixin.qq.com") {
            let mchData = {
              action: "onIframeReady",
              displayStyle: displayType,
              height:960,//自定义高度，范围 600-960px（按宽度 640px 为基数进行转换）；
            };
            let postData = JSON.stringify(mchData);
            parent.postMessage(postData, "https://payapp.weixin.qq.com");
          }
        },
        false
      );
      window.onload = () => {
        // 根据是否在微信内打开设置图片
        var payIcon = document.getElementById("pay-icon");
        if (isWeiXin()) {
          
         // todo 微信相关逻辑
         
        } else {
        // todo  支付宝相关逻辑
        
        }
      };
    </script>

静态html+css界面切图代码就不粘贴了按产品需求实现即可

打包部署至测试环境，提供新的链接给三方合作人员，出单测试，在微信端支付完成，成功跳转至小票页。

至此，该需求联调通过。H5静态链接的实现方式有很多种，完全可以不使用vue，使用原生的html+css+js即可。我这边为了不再找架构部署，直接现在了现有的项目里，但是不再跟之前的项目界面打包在一起，页面的访问时长是可控的。

配置图下仅供参考，因选择的打包形式不同，代码略有差异，按需实现即可。

在vue2项目中添加静态访问链接，可写在public下面。使用vue2+webpack打包，需修改webpack.dev.conf.js

css 复制代码

  devServer: {
      contentBase: path.join(__dirname, '../public')
      ...
  }

打包时，需将public直接copy至打包目录下，需修改webpack.prod.conf

vbnet 复制代码

new CopyWebpackPlugin([
  ...
  {
    from: path.resolve(__dirname, '../public'),
    to: config.build.assetsPublicPath,
    ignore: ['.*']
  }
])