对于很多独立的前端开发者来说，收费永远都是心中的痛。辛辛苦苦开发了一个应用，推广给用户使用，却往往因为没有自己的收银方式，最终只能选择广告这种粗暴伤用户体验的方式，或者实在坚持不下去最后放弃的结果。

为了解决这个问题，我和一些独立开发者构思了下面的一种支付模式（优势见最后部分）：

首先，是获取支付二维码，用户扫码（如果是在电脑端的话，直接扫码；如果是移动端，则要保存二维码，到微信上面去识别二维码），进入小程序端支付。如下图所示：

支付成功之后，则按自己的业务逻辑进行相应的处理。

整个过程也还是比较简单的，尤其是针对H5的前端开发者来说，多了一个坚持下去的理由了。

一、前期准备

准备一个企业资质，用来申请微信小程序和开通微信支付用途。
开发一个微信小程序，只要支付功能就可以，同时开通这个小程序对应的微信支付功能。
注册Bmob后端云账号

二、开发过程

1、设置支付密钥等信息

打开微信小程序开发者后台，在开发 -> 开发管理-> 开发设置里面找到 APPID（小程序ID） 和 AppSecret（小程序密钥），在功能 -> 微信支付 -> 商户号管理 -> 已关联商户号中找到绑定的微信支付商户号。

打开微信支付开发者后台，在账户中心 -> API安全里面 设置APIv2密钥 中获取微信支付的密钥。

获取了这四个信息之后，再把这些信息填到Bmob后端云中去。路径是：Bmob后端云应用 -> 设置 -> 应用配置。

2、在h5网页中，创建订单表，显示二维码

配置好上述信息之后，接下来就是调用Bmob后端云的Js SDK进行开发了。

首先，在h5网页中，把最新的bmob js sdk下载下来，放到项目中，然后初始化Bmob后端云，代码如下：

//引入Bmob JS SDK
const Bmob = require('./bmob js sdk的存放路径/Bmob-2.5.1.min.js');

// 初始化
Bmob.initialize("你的Secret Key", "你的API 安全码");

这里的Secret Key 和API安全码在Bmob后端云的控制台上获取。如下图所示：

初始化之后，我们就可以在需要显示支付二维码的地方，显示二维码了，代码如下：

const query = Bmob.Query('Order')
query.set('user', user.objectId) // 用户信息
query.set('money', item.money) // 订单金额
// 还可以根据实际情况，添加套餐信息等
query.save().then((res) => {
  const orderId = res.objectId; // 订单id
  // 生成小程序码
  Bmob.generateCode({ path: `/pages/pay/index?objectId=${orderId}`, width: 312, scene: orderId, type: 0 }).then((res) => {
    const { imageBytes } = res
    qr.value = imageBytes
    showQr.value = true // 展示二维码数据
  }).catch((err) => {
    console.error(err)
    alert('生成二维码失败')
  })
}).catch((err) => {
  console.error(err)
  alert('生成订单失败')
})

这里的Order是订单表，当执行query.save方法的时候，Bmob后端云会自动添加相应的表和字段结构。

3、小程序支付

做好上面的工作，用户在h5页面中扫码之后，就会自动跳到我们的小程序中。所以，我们还需要开发小程序代码。

小程序的也涉及到Bmob后端云的初始化，这部分和第二部分相似，就不再详述，可以直接看文档。

我们在小程序中直接调用支付功能和实现相应的回调就可，代码如下：


pay(options) {
    if (!options.objectId) {
      wx.Common.showModal('请从二维码扫入', '提示', () => {
        wx.exitMiniProgram()
      })
      return
    }
    wx.showLoading({
      title: '加载中...'
    })
    var order = wx.Bmob.Query('Order')
    // 查询订单信息
    order.get(options.objectId).then(res => {
      if (res.isPay) { // 如果订单为支付成功状态，则跳转支付成功页面
        wx.reLaunch({
          url: `/pages/payresult/index?objectId=${options.objectId}&orderNumber=${options.objectId}&createdAt=${res.updatedAt}&order_price=${res.money}&status=success&type=quota`,
        })
        return
      }
      wx.hideLoading()
      console.log(res)
      var tempOrder = {
        order_price: parseFloat(res.money).toFixed(2), // 金额
        order_Id: res.objectId, // 订单id
        product_name: "充值" + res.token + 'Token', // 产品名
        body: "比目微支付",
      }
      this.setData({
        objectId: options.objectId,
        user: res.user,
        orderObj: tempOrder,
        orderInfo: res
      })
    }).catch(err => {
      wx.hideLoading()
      console.log(err);
      if (err.code == 404 && err.error.indexOf('没有找到objectId为') > -1) {
        Common.showModal('订单查找失败：查无此订单', '提示', function () {
          wx.exitMiniProgram()
        })
      } else if (err.error) {
        Common.showDialog("订单查找失败" + err.code + '，' + err.error, '取消', function () {},
          '重试', () => {
            this.onLoad(this.data.options)
          })
      } else {
        Common.showDialog("订单查找失败，请检查您的网络状态", '取消', function () {},
          '重试', () => {
            this.onLoad(this.data.options)
          })
      }
    })
  }

就这样，一个h5扫码，小程序支付的功能就实现了。

四、篇后语

看到这里，相信有人会产生疑问：为什么要搞的那么复杂，不直接在h5上面扫码，然后h5支付呢？h5支付是微信官方推荐的一种模式，用户体验自然是更好的。

这里说一下这种模式的优势：

小程序可以直接获取手机号码，方便进一步二次营销或者构建私域流量（这也是最主要最有优势的方法，对于很多营销型公司来说，非常关键）。
更便捷的渠道号追踪和提成计算方法。

有需要源码的朋友可以直接联系本人（微信：xiaowon12），免费分享。

我用二维码+小程序解决了快速收银的问题