微信小程序 接口封装附带 封装 微信支付

准备 工作

一、根目录下创建文件夹 request
二、创建 3个 js 文件，分别是：config.js、api.js、request.js
三、有做微信支付需求的创建 requestPayment.js

如图：

封装 接口域名

config.js

// 正式接口
const baseURL = "https://*****.com/";
// 测试接口
// const baseURL = 'https://*********.com/';

export{
  baseURL
}

根据自己的需求把 域名封装一下。这里都是 用 baseURL 关键字定义，是因为，我只需用到一个，测试的时候用测试的，上线当然只用正式的，如果你有多个域名要一起使用，就要多定义。

封装请求方法

request.js

import{
  baseURL
} from './config.js';

export default function(options){
  let data = options.data.param;
  let newData = Object.assign(data);
  return new Promise((resolve,reject) =>{
    wx.request({
      url: baseURL + options.url,
      header: options.header ||  {
        'token': '',
        'content-type': 'application/json'
      }, // 默认值
      method: options.method || 'get',
      data: JSON.stringify(newData) || {},
      success: resolve,
      fail: reject
    })
  })
}

封装 接口

import request from 'request.js';

// 登录 
// 获取用户openId  （不带token的 接口地址是https://******/getOpenId,以实际为准）
export function getOpenId(param) {
  return request({
    url: "/getOpenId", // 接口地址
    method: 'POST',  // 请求方式
    header: {
      'content-type': 'application/json' // 表头
    },
    data: {
      param // 参数
    }
  })
}

// 注册重新申请 （带token的 接口地址是https://******/reApplyFound,以实际为准）
export function reApplyFound(param,token) {
  return request({
    url: "/reApplyFound",
    method: 'POST',
    header: {
      'token':token ||'', // token
      'content-type': 'application/json'
    },
    data: {
      param
    }
  })
}

调用 接口

引入

import {
  getOpenId
} from "./request/api.js";

调用

    // 登录
    login() {
      let that = this;
      wx.login({
        success(res) {
          if (res.code) {
			
			// 参数
            let param = {
              "code": res.code
            };
            
            // 这里是调用 接口的地方
            getOpenId(param).then(res => {
              let openid = res.data.data.openId;
              let session_key = res.data.data.session_key;
              if (res.data.code == 2000) {  // 以实际接口为准
                // 存储openid ,session_key
                wx.setStorageSync('openId', openid);
                wx.setStorageSync('session_key', session_key);
              } else {
                // 获取openid失败
                that.setData({
			        modalTitle: res.msg,
			        modalDisplay: 'block',
			        modalState: 'text'
			    });
              }
            });
			// 调用结束

          } else {
            console.log('登录失败！' + res.errMsg);
          }
        }
      })
    },

微信支付

封装接口

api.js

// 调起微信支付
import requestPayment from 'requestPayment.js'

export function Payment(param) {
  return requestPayment({
    param
  })
}

使用

引入

import {
  Payment
} from "../../request/api.js"

调用

  // 微信支付
  weChatPay(){
 	// 这些都是后台返回的 ，自己找后台拿
  	let param = {
		        	timeStamp: timeStamp,
		            nonceStr: nonceStr,
		            package: package,
		            signType: signType,
		            paySign: sign,
       	        };
    Payment(param).then(res => {
      let state = res.errMsg;
      if (state == 'requestPayment:ok') {
        wx.showToast({
          icon: 'success',
          title: '支付成功',
          duration: 1000,
          mask: true
        });
        // 回调	支付成功
		
		****************  //执行你自己的操作
      } else {
        wx.showToast({
          icon: 'none',
          title: '支付失败！',
          duration: 1000,
          mask: true
        });
        // 回调 支付失败

		**************** //执行你自己的操作
      }
    })
  },