小程序中封装api请求

一、在pages同级创建request文件夹 在此文件夹下创建一个index.js文件夹 在此文件夹内写入封装的api

const request = (method,url,params) =>{               // method (请求方式)     url (请求的路径)   params (请求的参数)

  return new Promise((resolve,reject) =>{             // 创建一个promise函数 

    let baseUrl = "公共url"

    uni.showLoading({                                               // 添加加载动画

        title: '加载中'

    })

    uni.request({                                                         // 发送请求

        url: baseUrl + url,                                             // url 形参就是传入的地址

        data: params? params:'',                               // 传入的请求参数

        method: method,                                            // 传入的请求方式

        success: res =>{                                           // 成功的函数

          resolve(res.data)

          uni.hideLoading()

        },

        fail: err =>{                                                 // 失败的函数

          reject(err) 

          uni.hideLoading()

        }

    })

  })

}

const api = {

  get: (url,params) =>request("GET",url,params),

  post: (url,params) =>request("POST",url,params)

}

export default api                                                // 抛出接口

二、在request 文件目录下 创建一个 home文件夹  在home 文件夹内新建index.js文件

// 所有的首页的请求 ，都放在这里维护

import api from '../index.js'

export const get = params => api.get('路径',params)              // get请求

export const post = params => api.post('路径',params)              // post请求

三、在所需要请求数据的页面内

import  请求名  from '文件路径'

不显示，只能是微信小程序，平时在web应用开发过程中，我们可以console.log去输出一些信息，但是在移动端，console.log的信息我们是看不到的。

这种情况下，可以选择使用alertd出一些信息，但是这种方法不怎么方便，也会阻断JS线程，导致后面的线程都不执行。也影响调试体验。

因此，我们需要借助第三方插件：vConsole。

第一种用法：引入js文件

<script src="path/to/vconsole.min.js"></script>

<script>

console.log("test")

</script>

第二种用法：npm命令

1、安装

npm install vconsole

2、在main.js引入

import Vconsole from 'vconsole'

let vConsole = new VConsole()

3、在需要的地方

console.log(内容)

为了解决在公众号支付和在小程序中支付问题，写了个js工具文件，根据当前环境执行不同的支付方法（以小程序支付流程为主）

在小程序支付中，需要注意两个地方，第一是由于package='prepay_id=XXX'传到小程序时会导致数据接收不完全，所以就只传XXX，‘prepay_id=’由小程序那边拼接上了；第二点是‘/pages/Pay/Pay’是与小程序约定的处理支付功能的页面，需要对应着。

在需要调用的文件用引入【import {payTool} from './PayTool.js'】，并在获取订单信息后，传入订单信息，发起支付流程【payTool(payParam)】

在小程序中获取订单信息

https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_7

根据微信小程序支付说明文档使用接收的参数调取支付功能

2020.12.24补充

刚学到还有个qs可以用，，，

1、npm install qs

2、var qs = require('qs')

3、不需要对package进行修改，直接传参即可。 小程序那边也不需要再处理了

---