微信小程序云开发订单微信支付与小票和标签打印的完整高效流程

前言

本片文章全文12000字，细致讲述从申请账户到小程序注册到打印机的选型最后到实现微信小程序云开发订单支付更新与小票，标签打印完整的高效流程。

一、流程设定

1、如何开通云支付流程

无论是云支付还是其他平台语言的原生支付接入都有共同一点：非个人，是组织，企
业，个体商家[1]，说白了就是有合理合法经营的营业执照，具体可参考[1]。

1.1 开通商户，获取商户号，商户号获取指引文档[2]

1.2 注册微信小程序，微信小程序注册要是“组织，企业，个体商家”,并且主体要与注册
商户号的主体保持一致。注册完成后等待认证完成即可进入微信公众平台[3]

1.3 进入微信小程序开发者平台后填写相关的资料并进行类目确定。再次有一次非常需要注意的事项。

注意：根据交易类小程序运营规范，对于小程序内提供珠宝玉石、3C 数码、盲盒、服饰内衣、海淘、美妆、酒类、家用电器、玩具、箱包皮具、鞋靴、运动户外等商品在线销售及配送服务时，不可使用云调用支付能力。

1.4 对接商户号，进行JASP支付相关确认，接入准备文档[4]

注意：微信小程序云开发支付是一种免鉴权，免密钥配置的安全的支付方式，所以不
需要配置相关的密钥，直接进行到下一步1.5

1.5 云开发控制台确认

此处请参考微信开发者文档[5]，文档内容详细。

2、以订单下单为例的支付流程

2.1 业务场景介绍

客户A在我们的点餐平台上点了一杯咖啡，所以客户要在选好后付款，在付款完成后商家的小票打印机和标签打印机打印出本订单的相关信息。如下：图2.1为小票打印机，图2.2为标签打印机。

图2.1 小票打印机

图2.2 标签打印机

2.2 业务场景流程图

二、代码与代码文件组成

1、页面JS

作用：发起支付请求与回调后续相关逻辑操作，例如：返回上一级，或跳转到相关页面。

wx.cloud.database().collection('orderUser').add({
   
   
   data:{
   
   
         subTime:this.getDateandTime().time,/* 下单时间 */
         subDate:this.getDateandTime().date,/* 下单日期 */
         orderCode:hexiaoCode,//核销码
         orderRows:[this.data.rows],
         orderGroups:tempInfo,//点单详情
         status:'制作中', // 出餐情况
         style:"点餐", //用餐方式
         pre_title:'**** 微信支付点单',
         pay_status:'wait', //交易状态
         orderNumber:orderTemp, //交意单号
         order_price:this.data.priceAll, //价格
		 userName:wx.getStorageSync('userInfo').userName,
         phone:wx.getStorageSync('userInfo').phone,
         orderRemarks:this.data.orderRemarks
         },success:(event)=>{
   
   
           //支付接口
           /* 价格处理 */
           var price = parseFloat(this.data.priceAll)
           // 订单处理
           wx.cloud.callFunction({
   
   
              name:'payPre',
              data:{
   
   
                  pro_name:'***店自取订单',
                  pro_codeNum:orderTemp,
                  pro_price:price*100,
               },success:(res_3)=>{
   
   
                   wx.hideLoading()
                   console.log("支付接口",res_3);
                  // 调起支付
                  wx.requestPayment({
   
   
                       timeStamp: res_3.result.payment.timeStamp,
                       nonceStr: res_3.result.payment.nonceStr,
                       package: res_3.result.payment.package,
                       signType: 'MD5',//加密方式
                       paySign: res_3.result.payment.paySign,
                       success (res_4) {
   
   
                             //这里写付款完成后的逻辑函数
                       },fail (res_4) {
   
   
                             console.log('发起支付窗口失败');
                       }
                  })
                  },fail(res_3){
   
   
                      console.log('调用payPre失败：',res_3);
                  }
            })
       },fail:(res)=>{
   
   
            console.log("创建订单出错误",res);
         }
 })

2、云函数payPre

作用调用云函数支付接口与返回支付的信息

// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init({
   
    env: '' }) // 使用当前云环境
// 云函数入口函数
exports.main = async (event, context) => {
   
   
    const res = await cloud.cloudPay.unifiedOrder({
   
   
        "body" :event.pro_name, // 订单名称
        "outTradeNo" :event.pro_codeNum, // 订单号
        "spbillCreateIp" : "127.0.0.1",
        "subMchId" : "*****", //商户号ID
        "totalFee" : event.pro_price, // 价格
        "envId": "",//云环境ID
        "functionName": "pay_cb" //回调函数必须有
      })
      return res
}

3、支付回调函数pay_cb

作用:支付完成后的回调函数