Vue前端开发——微信扫码支付

最新推荐文章于 2025-09-23 13:24:36 发布

原创

最新推荐文章于 2025-09-23 13:24:36 发布 · 897 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了在Vue项目中如何集成微信扫码支付功能。首先，通过npm安装qrcodejs2库，接着在Course.vue组件中引入该库，实现扫码支付的前端部分。

1、安装 qrcodejs2 （注意：安装的是qrcodejs2，不要安装qrcode ---> 会报错）

npm install qrcodejs2 --save

2、Course.vue中页面中引入

<!-- 微信支付二维码-->
          <el-dialog :visible.sync="dialogFormVisible" style="width:800px;margin:0px auto;" >
          <h1 style="font-size:30px;color:#00B38A" >微信扫一扫支付</h1>
          <div id="qrcode" style="width:210px;margin:20px auto;"></div>
          <h2 id="statusText"></h2>
          <p id="closeText"></p>
        </el-dialog>

        <!-- 底部购买 -->