微信小程序项目_秋泊优选48

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)
    }
  }
})