微信小程序支付

支付流程如图：

　　

 

 

一.创建订单

　　1.在创建订单时要先获取用户登录成功后的token值

　　　　1.1获取用户的token值，要先获取用户信息，和code值参给token

　　　　　　1.1(1)给支付绑定一个点击事件

　　　　　　　以下字段主要用作后台服务器生成用户token所有，无特殊用意

 　　　　　　　　encryptedData(执行小程序获取用户信息得到)

 　　　　　　　　rawData(执行小程序获取用户信息得到)

　　　　　　　　iv(执行小程序获取用户信息得到)

　　　　　　　　signature(执行小程序获取用户信息得到)

　　　　　　　　code(执行小程序登录后获取)

创建订单页

　　　　　　　　handleOrderPay(){

　　　　　　　　　　　　//判断缓存 中有没有token
　　　　　　　　　　　　const token  = wx.getStorageSync("token");
　　　　　　　　　　　　//判断
　　　　　　　　　　　　if(!token){

　　　　　　　　　　　　　　wx.navigateTo({

　　　　　　　　　　　　　　　　url:'/pages/auth/index' //跳转到授权页面 ,进行token获取
　　　　　　　　　　　　　　})
　　　　　　　　　　　　　　return;
　　　　　　　　　　　　}

　　　　　　　　　　}　　

 

 　授权页面

　　　　　　使用微信小程序button组件的开放能力open-type拿到用户信息

　　　　　

 

 

 　　　　　　再结合button的bindgetuserinfo属性

　　　　　　

 

HTML
    　　　　　　<button open-type="getUserInfo"  bindgetuserinfo="handleGetUserInfo(起个名字)">
　　　　　　　　　　获取授权
　　　　　　　　 </button>

await handleGetUserInfo(e){　　 //通过点击这个事件获取到微信返回的用户信息
　　　console.log(e)
　　//获取用户信息
　　const {encrypteData,rawData,iv,signature} = e.detail;
　　//获取小程序登录成功后的code值
　　wx.login({
　　　　timeout:10000,
　　　　success:(result) =>{
　　　　　　const { code } = result;
　　　　}
　　})
　　//在获取完请求token所必要的参数后，encryptedData，rawData，iv，signature，code,把值统一放到一个变量里中进行传参

　　const loginParams ={ encryptedData,rawData,iv,signature,code }
　　//发送请求，获取用户token
　　const { token }= await request({url:"请求地址"},data:loginParams,method:"post"}) //封装了后台请求，不解请看https://www.cnblogs.com/whenwei123/p/14133820.html
　　console.log(token) //打印可查看token ，如无企业账号，是无法成功的
　　//把token存入缓存中， 同时跳转回上一个创建订单页面
　　wx.setStorageSync('token',token);
　　wx.navigateBack({
　　　　delta:1 //1表示返回上一层 2两层
　　});
　　}　

})　

创建订单页

 

　　　　　　　 async　handleOrderPay(){

　　　　　　　　　　　　//判断缓存 中有没有token
　　　　　　　　　　　　const token  = wx.getStorageSync("token");
　　　　　　　　　　　　//判断
　　　　　　　　　　　　if(!token){

　　　　　　　　　　　　　　wx.navigateTo({

　　　　　　　　　　　　　　　　url:'/pages/auth/index' //跳转到授权页面 ,进行token获取
　　　　　　　　　　　　　　})
　　　　　　　　　　　　　　return;
　　　　　　　　　　　　}

　　　　　　　　　　}　　

　　　　　　　　　　//创建订单，获取订单编号
　　　　　　　　　　//准备创建订单的请求的参数，根据后台给的文档进行传参

　　　　　　　　　　//准备 请求头参数
　　　　　　　　　　const header ={Authorization:token}; //获取token，因为在上面已经获取过缓存中的token了
　　　　　　　　　　//准备 请求体参数
　　　　　　　　　　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, //商品ID
　　　　　　　　　　　　goods_number:v.num,　　//购买数量
　　　　　　　　　　　　goods_price:v.goods_price //单价
　　　　　　　　　　　}))
　　　　　　　　　　const orderParams ={order_price ,consignee_addr,goods }
　　　　　　　　　　//4 准备发送请求， 创建 订单 获取订单编号
　　　　　　　　　　const { order_number }= await request({url:"请求地址",method:"POST",data:orderParams ,header:header})
　　　　　　　　　　console.log(order_number ) //打印查看订单编号

准备预支付，在创建订单页js下继续写

　　　　　　　　　　// 5 获取pay,准备预支付

　　　　　　　　　　const res = await request({url:请求地址},method:'请求方式',header,data:{order_number}) //两个参数一个是header(token),一个是order_number(订单编号)

　　　　　　　　　　console.log(res)  //打印可看到一个叫pay的参数

　　　　　　　　　　　　

 　　　　　　　　　　　//发起微信支付　
　　　　　　　　　　　 //此时使用微信内置的支付的代码wx.requestPayment,可以发现返回的参数正好可以和微信内的支付代码一样，

　　　　　　　　　　　　　　

　　　　　　　　　　//把数据一一对应填进去
　　　　　　　　　　
　　　　　　　　　　//查询后台 订单状态，请求后台
　　　　　　　　　　const res = await request({url:"请求后台的地址"},method:"请求方式",header,data:{order_number}) //两个参数一个是header(token),一个是order_number(订单编号)

　　　　　　　　　　console.log(res)
　　　　　　　　　　wx.showToast({
　　　　　　　　　　　　title:"支付成功"
　　　　　　　　　　})
　　　　　　　　　　
　　　　　　　　　　视频了解可通过此处学习了解：https://www.bilibili.com/video/BV1nE41117BQ?p=98