1.准备登录相关的参数 - 获取用户信息
简述:**登录小程序>微信小程序需要五个相关参数 可以通过微信开发的接口
wx.login()以及open-type="getUserInfo" bindgetuserinfo="getInfo"方
法获取到五个参数**
A.在登录按钮中,添加相关信息 open-type 及bindgetuserinfo='getUserInfo' 如下:
javascript"><button open-type="getUserInfo" bindgetuserinfo="getInfo">
登录后下单
</button>
B.定义事件函数
javascript">methods = {
// 获取用户信息
async getUserInfo(userInfo) {
// 判断是否获取用户信息失败
if (userInfo.detail.errMsg !== 'getUserInfo:ok') {
return wepy.baseToast('获取用户信息失败!')
}
console.log(userInfo)
}
}
C.通过wx.login()获取code参数,并且将参数包装好准备发送给服务器请求token信息
javascript"> // 获取用户登录的凭证 Code
const loginRes = await wepy.login()
console.log(loginRes)
if (loginRes.errMsg !== 'login:ok') {
return wepy.baseToast('微信登录失败!')
}
// 登录的参数
const loginParams = {
code: loginRes.code,
encryptedData: userInfo.detail.encryptedData,
iv: userInfo.detail.iv,
rawData: userInfo.detail.rawData,
signature: userInfo.detail.signature
}
// 发起登录的请求,换取登录成功之后的 Token 值
const { data: res } = await wepy.post('/users/wxlogin', loginParams)
console.log(res)
if (res.meta.status !== 200) {
return wepy.baseToast('微信登录失败!')
}
// 把登录成功之后的 Token 字符串,保存到 Storage 中
wepy.setStorageSync('token', res.message.token)
// 控制登陆按钮以及支付订单的显示与隐藏 默认为false
this.islogin = true
this.$apply()
2.登陆成功获取token后,进行订单支付功能
A.按需渲染订单支付
javascript"><!-- 登录后下单 -->
<van-button type="primary" size="large" class="btnLogin" open-type="getUserInfo" bindgetuserinfo="getUserInfo" wx:if="{{islogin === false}}">登录后下单</van-button>
<!-- 订单支付区域 -->
<van-submit-bar price="{{amount}}" button-text="支付订单" bind:submit="onSubmit" wx:else></van-submit-bar>
B.将token信息在发送请求前加入到请求头中 需要在请求拦截器中添加
javascript">constructor() {
// ...
// 拦截器
this.intercept('request', {
// 发出请求时的回调函数
config(p) {
// 显示loading效果
wepy.showLoading({
title: '数据加载中...'
})
// 自定义请求头
p.header = {
Authorization: wepy.getStorageSync('token')
}
// console.log(p)
// 必须返回OBJECT参数对象,否则无法发送请求到服务端
return p
},
// ...
}
}
C.通过 bind:submit 为支付订单按钮,绑定事件处理函数:
javascript"><van-submit-bar price="{{amount}}" button-text="支付订单" bind:submit="onSubmit" wx:else></van-submit-bar>
D.定义事件处理函数 onSubmit,并实现下单及支付功能:
javascript">async onSubmit() {
if (this.amount <= 0) {
return wepy.baseToast('订单金额不能为0!')
}
if (this.addressStr.length <= 0) {
return wepy.baseToast('请选择收货地址!')
}
// 1. 创建订单
const { data: createResult } = await wepy.post('/my/orders/create', {
// 订单金额 单位 元
order_price: '0.01',
consignee_addr: this.addressStr,
order_detail: JSON.stringify(this.cart),
goods: this.cart.map(x => {
return {
goods_id: x.id,
goods_number: x.count,
goods_price: x.price
}
})
})
// 创建订单失败
if (createResult.meta.status !== 200) {
return wepy.baseToast('创建订单失败!')
}
// 创建订单成功了
const orderInfo = createResult.message
console.log(orderInfo)
// 2. 生成预支付订单
const { data: orderResult } = await wepy.post(
'/my/orders/req_unifiedorder',
{
order_number: orderInfo.order_number
}
)
// 生成预支付订单失败
if (orderResult.meta.status !== 200) {
return wepy.baseToast('生成预支付订单失败!')
}
// 走支付的流程
// 3. 调用微信支付的API
// console.log(orderResult)
const payResult = await wepy
.requestPayment(orderResult.message.pay)
.catch(err => err)
// 用户取消了支付
if (payResult.errMsg === 'requestPayment:fail cancel') {
return wepy.baseToast('您已取消了支付!')
}
// 用户完成了支付的过程
// 4. 检查用户支付的结果
const { data: payCheckResult } = await wepy.post('/my/orders/chkOrder', {
order_number: orderInfo.order_number
})
if (payCheckResult.meta.status !== 200) {
return wepy.baseToast('订单支付失败!')
}
// 5. 提示用户支付成功
wepy.showToast({
title: '支付成功!'
})
// 6. 跳转到订单列表页面
wepy.navigateTo({
url: '/pages/orderlist'
})
}