work-doc/developer/微信小程序/打开付款码/源码实现.vue

<template>
  <div>
    <button @click="openOfflinePayView">打开付款码</button>
  </div>
</template>

<script>
var md5 = require("md5");
export default {
  methods: {
    openOfflinePayView() {
      const query = {
        appId: "wx0efbe4601aed7dfe",
        timeStamp: parseInt(new Date().getTime() / 1000) + "",
        nonceStr: Math.random().toString(36).substr(2, 15),
        package: "mch_id=1561925421",
        signType: "MD5",
      };
      // 参数名ASCII码从小到大排序（字典序）；
      const stringA = Object.keys(query)
        .sort()
        .map((key) => {
          return `${key}=${query[key]}`;
        })
        .join("&");
      // 拼接API密钥：
      const stringSignTemp = stringA + "&key=juihguihUIHUIHIUuihuihhkjchoasdi"; //注：key为商户平台设置的密钥key
      const sign = md5(stringSignTemp).toUpperCase(); //注：MD5签名方式
      console.log(query);
      console.log(stringSignTemp);
      console.log(sign);

      wx.openOfflinePayView({
        appId: query.appId,
        timeStamp: query.timeStamp,
        nonceStr: query.nonceStr,
        package: query.package,
        signType: query.signType,
        paySign: sign,
        success: function (res) {
          console.log("openOfflinePayView success", res);
        },
        fail: function (res) {
          console.log("openOfflinePayView fail", res);
        },
        complete: function (res) {
          console.log("openOfflinePayView complete", res);
        },
      });
    },
  },
};
</script>

<style scoped></style>