微信小程序支付你不知道的那些事

小咪咪 2021-08-29 17:09 481阅读 0赞

本文以电商小程序的视角带你玩转微信支付，需要说明的是支付接口只有企业级别的微信才可以调用，假如您需要实现微信支付功能，请仔细阅读一下内容，希望能帮到您。如果您只是点进来看看，不妨动动手指点个收藏，在您需要的时候查找方便。

# 逻辑梳理 #

## 微信支付的前提条件 ##

### 哪些人 哪些帐号 可以实现微信支付 ###

1. 企业帐号   
    2. 企业帐号的小程序后台中 必须 给开发者 添加上白名单   
    	1. 一个 appid 可以同时绑定多个开发者
    	2.  这些开发者就可以公用这个appid 和 它的开发权限

## 支付功能的实现 ##

新人必看，大佬绕行(膜拜大佬)

1.  先判断缓存中有没有token
2.  没有 跳转到授权页面 进行获取token
3.  有token???
4.  创建订单 获取订单编号
5.  完成了微信支付  
    带着逻辑和问题，请您继续往下看

### 1. token的获取和判断 ###

const token = wx.getStorageSync("token");
    // 判断 如果没有token，跳转到token页面获取token
    if(!token){ 
      wx.navigateTo({ 
        url: '/pages/auth/auth',
      });
      return;
    }

假设我们没有获取到token，则需要跳转页面获取token  
auth.js

import {  request } from "../../request/index.js" //接口函数封装文件
    import regeneratorRuntime from '../../lib/runtime/runtime'; //async 和 await在小程序内本不能用，技术手段绕过
    import {  login, showToast } from '../../utils/asyncWx.js' //登录和显示等待图标
    /** * 授权回调 * 获取用户信息 */
      async handleGetUserInfo(e){ 
        try { 
          // 获取用户信息
          const { encryptedData,rawData,iv,signature}=e.detail;
          // 获取小程序登录成功后的code值
          const { code} = await login();
          const loginParams={ encryptedData,rawData,iv,signature,code};
          // 发送请求，获取用户token值
          const { token} = await request({ 
            url:'/users/wxlogin',
            data:loginParams,
            method:'POST'
          })
          // 把token存储到缓存中 同时回跳上个页面
          wx.setStorageSync("token", token);
          wx.navigateBack({ 
            delta: 1
          });
        } catch (error) { 
          console.log(error);
          await showToast({ 
            title:'token获取失败,该AppId未被授权,非企业级微信不支持获取token',
            duration: 3500
          })
        }
      }

上面的代码引入了3个文件，以下就三个文件做简单阐述

import {  request } from "../../request/index.js"

这是请求接口文件，封装了get和post请求，代码如下：

// 同时发送异步代码的次数
    let ajaxTimes=0;
    export const request= (paramas)=>{ 
      // 判断url是否带有/my/请求的是私有的路径 带上header token
      let header={ ...paramas.header};
      if(paramas.url.includes("/my/")){ 
        // 拼接header，带上token
        header["Authorization"]=wx-wx.getStorageSync('token')
      }
      ajaxTimes++;
      // 定义公共url
      const BASEURL = "https://api-hmugo-web.itheima.net/api/public/v1"
      // 显示加载中效果
      wx.showLoading({ 
        title: "加载中",
        mask: true,
      });
      return new Promise((resolve,reject)=>{ 
        wx.request({ 
          ...paramas,
          header:header,
          url:BASEURL+paramas.url,
          success:(res)=>{ 
            resolve(res.data.message);
          },
          fail:(err)=>{ 
            reject(err);
          },
          complete:()=>{ 
            ajaxTimes--;
            if(ajaxTimes===0){ 
               // 关闭等待图标
              wx.hideLoading();
            }
          }
        })
      })
    }

请求接口函数over

import regeneratorRuntime from '../../lib/runtime/runtime';

小程序本不支持async 和 await，但是可以骗过小程序，使用方式在文章[微信小程序获取收货地址][Link 1]一文中有提到，这里由于篇幅原因不做阐述。

import {  login, showToast } from '../../utils/asyncWx.js'

封装的login和showToast，以promise形式呈现，代码如下：

/** * promise形式的showToast * @param {object} param0 参数 */
    export const showToast = ({ title}) => { 
        return new Promise((resolve, reject) => { 
            wx.showToast({ 
                title:title,
                icon: 'none',
                duration: 2000,
                success: (result) => { 
                    resolve(result);
                },
                fail:(err) => { 
                    reject(err);
                }
            });
        })
    }
    
    /** * promise形式的login */
    export const login = () => { 
        return new Promise((resolve, reject) => { 
            wx.login({ 
                timeout:10000,
                success: (result)=>{ 
                    resolve(result);
                },
                fail: (err)=>{ 
                    reject(err);
                }
            });
        })
    }

### 2. 创建订单 ###

请求体参数

const order_price = this.data.totalPrice;
    const consignee_addr= this.data.address.all;
     const cart=this.data.cart;
     let goods = [];
     cart.forEach(v=>goods.push({ 
       goods_id:v.goods_id,
       goods_number:v.num,
       goods_price:v.goods_price
     }))
     const orderParams = { order_price,consignee_addr,goods}

### 3. 准备发送请求，创建订单 获取订单编号 ###

const { order_number} =await request({ 
    	 url:'/my/orders/create',//请求地址
    	 method:"POST",//请求方式
    	 data:orderParams
    });

### 4. 发起预支付接口 ###

const { pay} = await request({ 
    	 url:'/my/orders/req_unifiedorder',
    	  method:'POST',
    	  data:{ order_number}
    });

### 5. 发起微信支付 ###

await requestPayment(pay);

requestPayment方法

/** * promise形式的微信小程序支付requestPayment * @param {object} pay 支付所必要的参数 */
    export const requestPayment = (pay) => { 
        return new Promise((resolve, reject) => { 
            wx.requestPayment({ 
                ...pay,
                success: (result)=>{ 
                    resolve(result);
                },
                fail: (err)=>{ 
                    reject(err);
                }
            });
        })
    }

### 6. 查询后台订单是否支付成功 ###

const res = await request({ 
    	 url:'/my/orders/chkOrder',
    	  method:'POST',
    	  order_number
    })	
    await showToast({ title:'支付成功'})

*篇幅有限，代码我会上传到gitHub,地址如下:*  
[GitHub地址][GitHub]  
**如果对您有帮助，请您点赞加关注**

[Link 1]: https://blog.csdn.net/qq_39200185/article/details/105673867
[GitHub]: https://github.com/mgd0910/demo_wx