微信小程序项目_秋泊优选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)
    }
  }
})