微信小程序(云开发)----微信支付

文章目录

  • 前言
  • 一、注册微信小程序
    • 1. 在微信公众平台官网首页点击右上角的“立即注册”按钮。
    • 2. 选择小程序
    • 3. 填写信息
    • 4. 激活邮箱
    • 5. 填写主体信息
  • 二、登录公众平台
    • 1.扫码登录
  • 三.开通微信支付
    • 1. 绑定微信支付商户号
    • 2.小程序微信支付申请(要交300块钱)
  • 四、开发者工具配置
    • 1.点开云开发点击设置
    • 2.点击添加商户号后进行账号绑定
    • 3.jsapi和api退款权限授权
  • 五、简单案例
    • 1.新建一个page
    • 2.新建云函数
    • 3.编写云函数index.js
    • 4.编写pay.wxml
    • 5.编写pay.js
    • 6.效果展示


前言

开通微信支付云调用,首先需要小程序已经开通了微信支付,而微信支付是不支持个人小程序的,需要企业账户才行,其次需要小程序已经绑定了商户号


一、注册微信小程序

1. 在微信公众平台官网首页点击右上角的“立即注册”按钮。

微信公众平台官网
微信小程序(云开发)----微信支付_第1张图片

2. 选择小程序

微信小程序(云开发)----微信支付_第2张图片

3. 填写信息

邮箱不能在微信平台注册过。。。。有注册过公众号、订阅号的都不行。。。。需要重新注册个QQ
微信小程序(云开发)----微信支付_第3张图片

4. 激活邮箱

微信小程序(云开发)----微信支付_第4张图片

5. 填写主体信息

选择个体工商户(可以淘宝注册一个营业执照)

微信小程序(云开发)----微信支付_第5张图片

微信小程序(云开发)----微信支付_第6张图片

二、登录公众平台

1.扫码登录

微信小程序(云开发)----微信支付_第7张图片

三.开通微信支付

1. 绑定微信支付商户号

①登录后点击微信支付去关联一个商户号
微信小程序(云开发)----微信支付_第8张图片
②然后扫码关联
微信小程序(云开发)----微信支付_第9张图片

③返回首页可以看到已经关联
微信小程序(云开发)----微信支付_第10张图片

2.小程序微信支付申请(要交300块钱)

①回到首页去申请微信支付
微信小程序(云开发)----微信支付_第11张图片
②点击后选择这个
微信小程序(云开发)----微信支付_第12张图片
可以参考这篇文章


四、开发者工具配置

1.点开云开发点击设置

微信小程序(云开发)----微信支付_第13张图片
微信小程序(云开发)----微信支付_第14张图片

2.点击添加商户号后进行账号绑定

微信小程序(云开发)----微信支付_第15张图片

此时微信收到授权信息,授权一下

3.jsapi和api退款权限授权

去授权

微信小程序(云开发)----微信支付_第16张图片

五、简单案例

微信支付文档

1.新建一个page

微信小程序(云开发)----微信支付_第17张图片

2.新建云函数

微信小程序(云开发)----微信支付_第18张图片

右键点击新建Node.js云函数----命名pay

3.编写云函数index.js

微信小程序(云开发)----微信支付_第19张图片

// 云函数代码
const cloud = require('wx-server-sdk')
cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})

exports.main = async (event, context) => {
  const res = await cloud.cloudPay.unifiedOrder({
    "body" : "爱编程的小贤",//商品名称或商品描述event.goodName
    "outTradeNo" : "2608230605"+Date.parse(new Date()),//订单号,,,唯一  >>>>>>QQ号+时间戳
    "spbillCreateIp" : "127.0.0.1",//先填这个
    "subMchId" : "",//你的商户号
    "totalFee" : 1,//支付金额,,,分 event.totalFee*100
    "envId": "环境ID",
    "functionName": "pay_cb"
  })
  return res
}

4.编写pay.wxml

微信小程序(云开发)----微信支付_第20张图片



5.编写pay.js

// pages/pay/pay.js
Page({
//支付
goPay(){
// 小程序代码
  wx.cloud.callFunction({
    name: 'pay',
    data: {
      //goodName:"贤哥",
      //totalFee:10,
    },
    success: res => {
      console.log("获取支付参数成功",res)
      const payment = res.result.payment

      //调起支付
      wx.requestPayment({
        ...payment,
        success (res) {
          console.log('支付成功', res)
        },
        fail (err) {
          console.error('支付失败', err)
        }
      })
    },
    fail: res=>{
      console.log("获取支付参数失败",res)
    },
  })
  }
})

6.效果展示

微信小程序(云开发)----微信支付_第21张图片
微信小程序(云开发)----微信支付_第22张图片

微信小程序(云开发)----微信支付_第23张图片
微信小程序(云开发)----微信支付_第24张图片
微信小程序(云开发)----微信支付_第25张图片

你可能感兴趣的:(微信小程序,微信小程序)