微信小程序开发入门教程（三）---小程序云开发支付功能

2019-08-12 10:06:49 阅读：273 来源： 互联网

标签：入门教程 const 微信程序开发 code pay data event wx

支付（shoukuan）功能真的很重要!由于我还没有商户号，以下代码未实际验证

1、服务端

进入云开发，新建云函数pay（应该也可以在开发者工具编写后上传）

编写后端代码index.js
这里用到第三方库wx-js-utils（https://github.com/lcxfs1991/wx-js-utils ）

const cloud = require('wx-server-sdk');
const {
  WXPay,
  WXPayUtil
} = require('wx-js-utils');

cloud.init();


const appId = 'wx****************';           // 小程序appid
const mchId = '152*******';                   // 商户号
const key = '****************************';   // 商户密钥
const timeout = 10000;                        // 超时时间

let wxpay = new WXPay({
  appId,
  mchId,
  key,
  timeout: 10000,
  signType: 'MD5',
  useSandbox: false       // 不使用沙箱环境
});

exports.main = async(event, context) => {
  const curTime = Date.now();
  const tradeNo = `${event.userInfo.openId.substr(-5)}-${curTime}`; // 生成订单号
  const body = '测试订单';   // 订单商品名称
  const spbill_create_ip = '127.0.0.1';   // 发起支付的IP
  const notify_url = 'http://www.qq.com'; // 回调地址
  const total_fee = event.price * 100;    // 支付金额，单位为分
  const time_stamp = '' + Math.ceil(Date.now() / 1000);
  const out_trade_no = `${tradeNo}`;
  let orderParam = {
    body,
    spbill_create_ip,
    notify_url,
    out_trade_no,
    total_fee,
    openid: event.userInfo.openId,
    trade_type: 'JSAPI',
    timeStamp: time_stamp,
  };
  const {
    return_code,
    result_code,
    ...restData
  } = await wxpay.unifiedOrder(orderParam); // 统一下单
  if (return_code === 'SUCCESS' && result_code === 'SUCCESS') {
    const {
      prepay_id,
      nonce_str
    } = restData;
    const sign = WXPayUtil.generateSignature({
      appId,
      nonceStr: nonce_str,
      package: `prepay_id=${prepay_id}`,
      signType: 'MD5',
      timeStamp: time_stamp
    }, key); // 签名
    return {
      code: 0,
      data: {
        out_trade_no,
        time_stamp,
        ...restData,
        sign
      }
    }
  }
  return {
    code: -1
  }
};

2、小程序

app.js

App({
  onLaunch() {
    wx.cloud.init({
      traceUser: true,
    });
  }
});

index.wxml

<view class='container'>
  <input class='ipt' value='{{price}}' bindinput='onInput' type='digit' />
  <button class='btn-pay' bindtap='pay'>Pay</button>
</view>

index.wxss

.container {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

.ipt {
  border-bottom: 1px solid #f1f2f3;
  text-align: center;
  font-size: 50rpx;
  font-weight: bold;
  width: 220rpx;
  color: #17233d;
}

.btn-pay {
  margin-top: 100rpx;
  padding: 14rpx 100rpx;
  line-height: 1.5em;
  font-size: 36rpx;
  background: #5cadff;
  color: #fff;
}

.btn-pay::after {
  border: 0;
}

index.js

Page({
  data: {
    price: 0.01
  },

  onInput(event) {
    this.setData({ price: event.detail.value });
  },

  pay() {
    const price = parseFloat(this.data.price).toFixed(2);
    wx.showLoading({
      title: ''
    });
    wx.cloud.callFunction({
      name: 'pay',    // 调用pay函数
      data: { price }, // 支付金额
      success: (res) => {
        wx.hideLoading();
        const { result } = res;
        const { code, data } = result;
        if (code !== 0) {
          wx.showModal({
            title: '提示',
            content: '支付失败',
            showCancel: false
          });
          return;
        }
        console.log(data);
        wx.requestPayment({
          timeStamp: data.time_stamp,
          nonceStr: data.nonce_str,
          package: `prepay_id=${data.prepay_id}`,
          signType: 'MD5',
          paySign: data.sign,
          success: () => {
            wx.showToast({title: '支付成功'});
          }
        });
      },
      fail: (res) => {
        wx.hideLoading();
        console.log('FAIL');
        console.log(res);
      }
    });
  }
});

最终效果:页面显示0.01元和pay按钮。

参考：

https://juejin.im/post/5c876108e51d45543d2836e4

https://cloud.tencent.com/edu/learning/course-100005-1276

标签：入门教程,const,微信,程序开发,code,pay,data,event,wx
来源： https://www.cnblogs.com/pu369/p/11338016.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

微信小程序开发入门教程（三）---小程序云开发支付功能