微信小程序–黑马程序员
一、微信用户登录 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,发起微信支付