【微信小程序】微信登录和支付功能

最新推荐文章于 2024-03-29 22:45:02 发布

ВаΙΙаd

最新推荐文章于 2024-03-29 22:45:02 发布

阅读量345

点赞数

文章标签：微信小程序微信 notepad++

本文链接：https://blog.csdn.net/Familiar1/article/details/131387229

版权

微信小程序–黑马程序员

一、微信用户登录 API

微信登录换取 Token

请求路径：https://请求域名/api/public/v1/users/wxlogin
请求方法：POST
请求参数
请求数据参考

{
  "code": "013pZWCt0GniKb1ftkBt0AxfDt0pZWCf",
  "encryptedData": "FGMaNbO4ytTFTUzK3wmtfHWoFeQJYkyMajQ5tVbQglwmnJ46SMi43Thq0OZjSSa5Msmnpdfx7yigYkdvUbsiQFyF9xMGEQLpUFcpNjnYoCQOl2Ka5zEeqpMY91ywYAsPISeu1rwvFCU2Ucenxf7gdcDPQ/jNJdORGb86DR+2gVJeg8TZiXWJ66enpynj35DiaE1jNWUSzpgbOvO40dZrWnHVwDEJN+upeSHRR/IW7t3cgtV63/GeZzNhFbUYqNHO6M1KHetwY1u8mFXuZoXwVV7DrEwEzY1btqcfW93q4ekn2uwAUeJM4U+3roBsIT5ZpEM8YtQZVsAwjaWHBe8id1H4lurEFC5/GwLnRONrIiR7KDF7MPxnMO9flWFQEfay5dt9rBELzk1Efjf2H6UnzYfh+o4MbPxtc0cUiHEnNCVcXjDtulXSRUy7RZQPmjF/tYBHHrXEFubxnK4oRBZz/A==",
  "iv": "y/ESFBaesbEzIbB1th5Knw==",
  "rawData":
    "{\"nickName\":\"优购\",\"gender\":0,\"language\":\"zh_CN\",\"city\":\"\",\"province\":\"\",\"country\":\"\",\"avatarUrl\":\"https://wx.qlogo.cn/mmopen/vi_32/icWlxE4rARHaIlib1PRmBtRa2tQicUSEHYu8UIGZ0LLic9C0PticibED6brRFCuQYeLGtwTcBYFgMtcF11N31pVhMF8g/132\"}",
  "signature": "d06cd3a54e89e6014e43694844706eaccad109bb"
}

响应参数参考

{
  "message": {
    "user_id": 12,
    "user_email_code": null,
    "is_active": null,
    "user_sex": "男",
    "user_qq": "",
    "user_tel": "",
    "user_xueli": "本科",
    "user_hobby": "",
    "user_introduce": null,
    "create_time": 1525402223,
    "update_time": 1525402223,
    "token":
      "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOjEyLCJpYXQiOjE1MjU0MDIyMjMsImV4cCI6MTUyNTQ4ODYyM30.g-4GtEQNPwT_Xs0Pq7Lrco_9DfHQQsBiOKZerkO-O-o"
  },
  "meta": { "msg": "登录成功", "status": 200 }
}

二、点击登录按钮获取微信用户的基本信息

需求描述：需要获取微信用户的头像、昵称等基本信息。

 <!-- 登录按钮 -->
    <button type="primary" class="btn-login" @click="getUserProfile">一键登录</button>

调用getUserProfile()方法获取用户信息，调用login()返回code。
当获取到了微信用户的基本信息之后，还需要进一步调用登录相关的接口，从而换取登录成功之后的 Token 字符串。

methods：{
getUserProfile() {
        uni.getUserProfile({
          desc: '你的授权信息',
          success: (res) => {
            // 将信息存到 vuex 中
            this.updateUserInfo(res.userInfo)
            this.getToken(res)
          },
          fail: (res) => {
            return uni.$showMsg('您取消了登录授权')
          }
        })
      },
      // 调用登录接口，换取永久的 token
      async getToken(info) {
        // 调用微信登录接口
        const [err, res] = await uni.login().catch(err => err)
        // 判断是否 uni.login() 调用失败
        if (err || res.errMsg !== 'login:ok') return uni.$showError('登录失败！')

        // 准备参数对象
        const query = {
          code: res.code,
          encryptedData: info.encryptedData,
          iv: info.iv,
          rawData: info.rawData,
          signature: info.signature
        }

        // 换取 token
        const {
          data: loginResult
        } = await uni.$http.post('/api/public/v1/users/wxlogin', query)
        // console.log(loginResult)
        // if (loginResult.meta.status !== 200) return uni.$showMsg('登录失败！')
        if (loginResult.meta.status !== 400) return uni.$showMsg('登录失败！')
        // uni.$showMsg('登录成功')

        // 2. 更新 vuex 中的 token
        // this.updateToken(loginResult.message.token)
        //由于权限问题调用登录接口获取不到后台返回的token，这里就固定token了
        this.updateToken( "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOjIzLCJpYXQiOjE1NjQ3MzAwNzksImV4cCI6MTAwMTU2NDczMDA3OH0.YPt-XeLnjV-_1ITaXGY2FhxmCe4NvXuRnRB8OMCfnPo")

      },
}

三、微信登录总结

调用getUserProfile()方法获取用户信息，调用login()返回code。再进一步调用登录相关的接口，从而换取登录成功之后的 Token 字符串

四、登录后访问API

访问根路径
https://请求域名/api/public/v1/my
访问此系列请求必须在头信息中添加token
"Authorization" : token

订单API

创建订单

请求路径：https://请求域名/api/public/v1/my/orders/create
请求方法：POST
请求参数
请求数据参考

在这里插入代码片{
  "order_price": 0.1,
  "consignee_addr": "广州市天河区",
  "order_detail":
    "[{\"goods_id\":55578,\"goods_name\":\"初语2017秋装新款潮牌女装加绒宽松BF风慵懒卫衣女套头连帽上衣\",\"goods_price\":279,\"goods_small_logo\":\"http://image2.suning.cn/uimg/b2c/newcatentries/0070067836-000000000690453616_2_400x400.jpg\",\"counts\":1,\"selectStatus\":true}]",
  "goods": [
      { 
          "goods_id": 5, 
          "goods_number": 11, 
          "goods_price": 15 
      },
      { 
          "goods_id": 555, 
          "goods_number": 1, 
          "goods_price": 15 
      }
  ]
}

响应参数
响应数据参考

{
  "message": {
    "order_id": 45,
    "user_id": 12,
    "order_number": "GD20180504000000000045",
    "order_price": 0.1,
    "order_pay": "0",
    "is_send": "否",
    "trade_no": "",
    "order_fapiao_title": "个人",
    "order_fapiao_company": "",
    "order_fapiao_content": "",
    "consignee_addr": "广州市天河区",
    "pay_status": "0",
    "create_time": 1525408071,
    "update_time": 1525408071,
    "order_detail":
      "[{\"goods_id\":55578,\"goods_name\":\"初语2017秋装新款潮牌女装加绒宽松BF风慵懒卫衣女套头连帽上衣\",\"goods_price\":279,\"goods_small_logo\":\"http://image2.suning.cn/uimg/b2c/newcatentries/0070067836-000000000690453616_2_400x400.jpg\",\"counts\":1,\"selectStatus\":true}]",
    "goods": [
      {
        "id": 64,
        "order_id": 45,
        "goods_id": 5,
        "goods_price": 15,
        "goods_number": 11,
        "goods_total_price": 15
      }
    ]
  },
  "meta": { "msg": "创建订单成功", "status": 200 }
}

订单支付

请求路径：https://请求域名/api/public/v1/my/orders/req_unifiedorder
请求方法：POST
请求参数
请求数据

{ "order_number": "GD20180507000000000110" }

响应参数
响应数据

{
  "message": {
    "pay": {
      "timeStamp": "1525681145",
      "nonceStr": "BkPggorBXZwPGXe3",
      "package": "prepay_id=wx071619042918087bb4c1d3d72999385683",
      "signType": "MD5",
      "paySign": "D1642DEEF1663C8012EDEB9297E1D516"
    },
    "order_number": "GD20180507000000000110"
  },
  "meta": { "msg": "预付订单生成成功", "status": 200 }
}

订单支付状态查询

请求路径：https://请求域名/api/public/v1/my/orders/chkOrder
请求方法：POST
请求参数
请求数据

{ "order_number": "GD20180507000000000050" }

响应参数
响应数据

// 支付成功
{
    "message":"支付成功",
    "meta":{"msg":"验证成功","status":200}
}

// 支付失败
{ 
    "message": null,
    "meta": { "msg": "订单未支付", "status": 400 } 
}

订单查询

请求路径：https://请求域名/api/public/v1/my/orders/all
请求方法：GET
请求参数
响应参数
响应数据

{
  "message": [
    {
      "order_id": 44,
      "user_id": 12,
      "order_number": "GD20180507000000000050",
      "order_price": 0.1,
      "order_pay": "0",
      "is_send": "否",
      "trade_no": "",
      "order_fapiao_title": "个人",
      "order_fapiao_company": "",
      "order_fapiao_content": "",
      "consignee_addr": "广州市天河区",
      "pay_status": "0",
      "create_time": 1525407814,
      "update_time": 1525407814,
      "order_detail":
        "[{\"goods_id\":55578,\"goods_name\":\"初语2017秋装新款潮牌女装加绒宽松BF风慵懒卫衣女套头连帽上衣\",\"goods_price\":279,\"goods_small_logo\":\"http://image2.suning.cn/uimg/b2c/newcatentries/0070067836-000000000690453616_2_400x400.jpg\",\"counts\":1,\"selectStatus\":true}]"
    }
  ],
  "meta": { "msg": "获取订单列表成功", "status": 200 }
}

五、微信支付

在请求头中添加 Token 身份认证的字段

原因说明：只有在登录之后才允许调用支付相关的接口，所以必须为有权限的接口添加身份认证的请求头字段

微信支付的流程

创建订单
- 请求创建订单的 API 接口：把（订单金额、收货地址、订单中包含的商品信息）发送到服务器
- 服务器响应的结果：订单编号
订单预支付
- 请求订单预支付的 API 接口：把（订单编号）发送到服务器
- 服务器响应的结果：订单预支付的参数对象，里面包含了订单支付相关的必要参数
发起微信支付
- 调用 uni.requestPayment() 这个 API，发起微信支付；把步骤 2 得到的 “订单预支付对象” 作为参数传递给 uni.requestPayment() 方法
- 监听 uni.requestPayment() 这个 API 的 success，fail，complete 回调函数

// 微信支付
      async payOrder() {
        // 1. 创建订单
        // 1.1 组织订单的信息对象
        const orderInfo = {
          // 开发期间，注释掉真实的订单价格，
          // order_price: this.checkedGoodsAmount,
          // 写死订单总价为 1 分钱
          order_price: 0.01,
          consignee_addr: this.addstr,
          goods: this.cart.filter(x => x.goods_state).map(x => ({ goods_id: x.goods_id, goods_number: x.goods_count, goods_price: x.goods_price }))
        }
        // 1.2 发起请求创建订单
        const { data: res } = await uni.$http.post('/api/public/v1/my/orders/create', orderInfo)
        console.log(res)
        if (res.meta.status !== 200) return uni.$showMsg('创建订单失败！')
        // 1.3 得到服务器响应的“订单编号”
        const orderNumber = res.message.order_number
        console.log(orderNumber)
      
         // 2. 订单预支付
           // 2.1 发起请求获取订单的支付信息
           const { data: res2 } = await uni.$http.post('/api/public/v1/my/orders/req_unifiedorder', { order_number: orderNumber })
           // 2.2 预付订单生成失败
           if (res2.meta.status !== 200) return uni.$showError('预付订单生成失败！')
           // 2.3 得到订单支付相关的必要参数
           const payInfo = res2.message.pay
      
          // 3. 发起微信支付
            // 3.1 调用 uni.requestPayment() 发起微信支付
            const [err, succ] = await uni.requestPayment(payInfo)
  
            // 3.2 未完成支付
            if (err) return uni.$showMsg('订单未支付！')
            // 3.3 完成了支付，进一步查询支付的结果
            const { data: res3 } = await uni.$http.post('/api/public/v1/my/orders/chkOrder', { order_number: orderNumber })
            // 3.4 检测到订单未支付
            if (res3.meta.status !== 200) return uni.$showMsg('订单未支付！')
            // 3.5 检测到订单支付完成
            uni.showToast({
              title: '支付完成！',
              icon: 'success'
            })
       }

Tip：由于是个人开发没有支付资质，所以无法实现支付功能

六、微信支付总结

1、创建订单，请求订单接口，返回订单编号
2、订单预支付，请求预支付接口，返回订单支付相关的必要参数
3、微信支付，调用 uni.requestPayment() 这个 API，发起微信支付

ВаΙΙаd

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
【微信小程序】微信登录和支付功能

调用getUserProfile()方法获取用户信息，调用login()返回code。再进一步调用登录相关的接口，从而换取登录成功之后的 Token 字符串1、创建订单，请求订单接口，返回订单编号2、订单预支付，请求预支付接口，返回订单支付相关的必要参数3、微信支付，调用这个 API，发起微信支付。
复制链接

扫一扫