44、支付支页面_订单创建功能(支付获取用户token)
给支付按钮绑定点击事件(bindtap=“handleOrderPay”)
pages\pay\index.wxml
<!--支付按钮-->
<view class="order_pay_wrap" bindtap="handleOrderPay">
支付{
{totalNum}}
</view>
添加点击事件—>跳转授权页面
pages\pay\index.js
// 点击支付
handleOrderPay(){
// 1 判断缓存中有没有token
const token=wx.getStorageSync("token");
// 2 判断
if(!token){
wx.navigateTo({
url: '/pages/auth/index'
});
return;
}
}
授权页面标题
pages\auth\index.json
{
"usingComponents": {
},
"navigationBarTitleText": "支付授权"
}
授权页面按钮实现
获取用户信息按钮的属性
pages\auth\index.wxml
<!--样式
type="primary" 字体样式绿色
plain 背景透明
--->
<button type="primary" plain open-type="getUserInfo" bindgetuserinfo="handleGetUserInfo">
获取授权
</button>
样式
pages\auth\index.wxss
button{
margin-top: 40rpx;
width: 70%;
}
点击按钮的事件
pages\auth\index.js
Page({
// 获取用户信息
handleGetUserInfo(e){
console.log(e);
}
})
获取用户token
login的封装
utils\asyncWx.js
// Promise 形式login
export const login=()=>{
return new Promise((resolve, reject)=>{
wx.login({
timeout: 10000,
success: (result) => {
resolve(result);
},
fail: (err) => {
reject(err);
}
});
})
}
code值得获取
import {
request }from "../../request/index.js";
import regeneratorRuntime from '../../lib/runtime/runtime';
import {
login }from "../../utils/asyncWx.js";
Page({
// 获取用户信息
async handleGetUserInfo(e){
// 1 获取用户信息
const {
encryptedData, rawData, iv, signature } = e.detail;
// 2 获取小程序登录成功后的code
const {
code}=await login();
console.log(code);
}
})
获取token值(注意:没有企业账号的APPID 无法获取)
pages\auth\index.js
pages\auth\index.js
import {
request }from "../../request/index.js";
import regeneratorRuntime from '../../lib/runtime/runtime';
import {
login }from "../../utils/asyncWx.js";
Page({
// 获取用户信息
async handleGetUserInfo(e){
// 1 获取用户信息
const {
encryptedData, rawData, iv, signature } = e.detail;
// 2 获取小程序登录成功后的code
const {
code}=await login();
const loginParams={
encryptedData, rawData, iv, signature ,code};
// 3 发送请求获取用户的token
const res=await request({
url:"/users/wxlogin",data:loginParams,method: "post"});
console.log(res);
}
})
把token存入缓存中同时跳转回上一个页面
import {
request }from "../../request/index.js";
import regeneratorRuntime from '../../lib/runtime/runtime';
import {
login }from "../../utils/asyncWx.js";
Page({
// 获取用户信息
async handleGetUserInfo(e){
try {
// 1 获取用户信息
const {
encryptedData, rawData, iv, signature } = e.detail;
// 2 获取小程序登录成功后的code
const {
code}=await login();
const loginParams={
encryptedData, rawData, iv, signature ,code};
// 3 发送请求获取用户的token
const {
token}=await request({
url:"/users/wxlogin",data:loginParams,method: "post"});
// 4 把token存入缓存中同时跳转回上一个页面
wx.setStorageSync("token", token);
wx.navigateBack({
delta:1
});
} catch (error) {
console.log(error)
}
}
})