uniapp 微信小程序 SDKs 示例

业务系统小程序调用此拉起 SDK 收银台（带 UI）, 支持多种支付方式，如微信支付、网银转账等。

此文档针对 uniapp 开发者，介绍如何在 uniapp 中使用 SDK。

请求参数

变量	类型	是否必填	描述
show	bool	是	是否显示支付组件，在参数请求好后设置为 true
openid	string	是	当前用户相对于小程序的 openid
payInfo	string	是	支付参数（预下单接口返回）
type	string	是	支付类型，C2B
payStatusChange	event	否	支付结果回调， USER_EXIT: 用户退出，支付状态未知，需要小程序主动查询； SUCCESS: 支付成功； PAY_FAIL: 支付失败；收到支付结果回调通知时候，应主动设置 show 为 false

调用方法

1 配置

1.1 下载依赖

# npm
npm install wecard-pay-sdk@latest --save
 
# yarn
yarn add wecard-pay-sdk@latest
 
# pnpm
pnpm add wecard-pay-sdk@latest

1.2 适配 uniapp 构建微信小程序自定义组件支持

开始之前，请先阅读 uniapp 关于构建微信小程序自定义组件的文档：https://uniapp.dcloud.net.cn/tutorial/miniprogram-subject.html (opens in a new tab)

实现原理：

postinstall 时将 node_modules 下的小程序组件包复制到 wxcomponents 目录下
第三方包建议只用 package.json 管理，所以将代码加入 .gitignore 中

1.2.1 新建脚本文件

新建 scripts/pkg-copy.js 文件，内容如下：

scripts/pkg-copy.js

// scripts/pkg-copy.js// 本脚本用于将原生 npm 组件复制到 wxcomponents 文件夹
const fs = require("fs-extra");
const path = require("path");
 
// 需要复制的包
const pkgList = [
  {
    from: "wecard-pay-sdk/dist/wecard-pay",
    to: "wecard-pay",
  },
];
 
const npmPath = path.join(__dirname, "../node_modules");
const distPath = path.join(__dirname, "../src/wxcomponents");
 
function copyPkg(pkg) {
  const from = `${npmPath}/${pkg.from}`;
  const to = `${distPath}/${pkg.to}`;
  fs.copySync(from, to);
}
 
pkgList.forEach((pkg) => {
  copyPkg(pkg);
});

1.2.2 配置 package.json

修改 package.json 文件，添加 postinstall 脚本，内容如下：

package.json

{
  "scripts": {
    "postinstall": "node scripts/pkg-copy.js"
  }
}

1.2.3 配置 .gitignore

.gitignore

# 忽略 src/wxcomponents/wecard-pay 目录
src/wxcomponents/wecard-pay

1.2.4 重新安装

# yarn
yarn install
# npm
npm install
# pnpm
pnpm install

1.3 配置 `pages.json` 文件

src/pages.json

{
  "pages": [
    //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "uni-app",
        // #ifdef MP-WEIXIN
        "usingComponents": {
          "wecard-pay": "/wxcomponents/wecard-pay/main/main"
        }
        // #endif
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  }
}

2 发起支付页面文件 `pages/index/index.vue`

在需要发起支付的页面，引入 wecard-pay 组件，然后按照业务需要调用。

src/pages/index/index.vue

<template>
  <view>
    <wecard-pay
      :show="show"
      :openid="openid"
      :payInfo="payInfo"
      :type="type"
      @payStatusChange="onB2BStatusChange"
    />
    <view class="content">
      <image class="logo" src="../../static/logo.png"></image>
      <view>
        <view class="title">{{ title }}</view>
 
        <button @click="C2BPay" type="primary" class="pay-btn">
          发起 C2B JSSDK 支付
        </button>
        <button @click="B2BPay" type="primary" class="pay-btn">
          发起 B2B 带 UI 组件
        </button>
      </view>
    </view>
  </view>
</template>
 
<script lang="ts">
import Vue from "vue";
import { wecardPay } from "wecard-pay-sdk";
 
export default Vue.extend({
  data() {
    return {
      title: "微卡支付 uni-app 示例",
      show: false,
      openid: "",
      payInfo: "",
      type: "C2B",
    };
  },
 
  onLoad() {},
 
  methods: {
    C2BPay() {
      wecardPay.requestPayment({
        type: "C2B",
        // 从后台获取 openid、payInfo
        openid: "GET FROM SERVER OPENID",
        payInfo: "{'key': 'GET FROM SERVER PayInfo'}",
      });
    },
 
    B2BPay() {
      // 从后台获取 openid、payInfo, 调用微卡支付后台《预下单接口》
      // 然后拉起支付组件
      // wx.request ....
      this.openid = "GET FROM SERVER OPENID";
      this.payInfo = "{'key': 'GET FROM SERVER PayInfo'}";
      this.type = "B2B";
 
      this.show = true;
    },
 
    onB2BStatusChange(e: any) {
      // 这里监听支付状态变化，并且关闭支付组件 SDK
      console.log(e);
 
      this.show = false;
    },
  },
});
</script>
 
<style>
.pay-btn {
  margin: 20rpx 0;
}
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
 
.logo {
  height: 200rpx;
  width: 200rpx;
  margin: 200rpx auto 50rpx auto;
}
 
.text-area {
  display: flex;
  justify-content: center;
}
 
.title {
  margin: 20rpx 0;
  width: 500rpx;
  text-align: center;
  font-size: 36rpx;
  color: #8f8f94;
}
</style>

3 配置小程序的服务器域名

需要把一些域名加入到小程序管理后台 -> 开发管理 -> 开发配置 -> 服务器域名上

4 示例代码下载

点击下载 (opens in a new tab)