微信小程序登录及请求封装

整合了获取用户信息/用户手机号/及请求封装 粘贴即用

目录结构

在这里插入图片描述

app.js

//app.js
// const util = require('/utils/util.js')
// import {requst_session_key} from './pages/api/index'
App({
  onLaunch: function () {
    
    //获取胶囊按钮信息
    let menuButtonObject = wx.getMenuButtonBoundingClientRect();
    //获取机器信息
    wx.getSystemInfo({
      success: res => {
        let statusBarHeight = res.statusBarHeight,
          navTop = menuButtonObject.top,//胶囊按钮与顶部的距离
          navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight)*2;//导航高度
        this.globalData.navHeight = navHeight;
        this.globalData.navTop = navTop;
        this.globalData.windowHeight = res.windowHeight;
        console.log(this.globalData.navHeight+'+'+this.globalData.navTop+'+'+this.globalData.windowHeight);
      },
      fail(err) {
        console.log(err);
      }
    })
    // 登录
    wx.login({
      success: res => {
        console.log(res.code+'我是登录中的')
        if(res.code){
          console.log(123);
          wx.request({
            url: 'https://weixin.rmsy.com/v1/session-key/'+res.code,
            // url: 'http://192.168.2.103:5001/v1/session-key/'+res.code,
            success (res) {
              console.log(123);
              console.log(res);
              console.log(res.data.data.session_key);
              wx.setStorageSync("sessionkey", res.data.data.session_key);
            }
          })
        }
      }
    })
    // 获取用户信息
    wx.getSetting({
      success: res => {
        console.log(res);
        if (res.authSetting['scope.userInfo']) {
          // 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo
              // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              console.log(this);
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  globalData: {
    userInfo: null,
    flag:false,
    navHeight:null,
    navTop:null,
    windowHeight:null,
    stastic:1
  },
  /**
   * 
   *  自定义方法 start
   * 
   */
  /**
   * 
   *  自定义方法 end
   * 
   */
})

index.js

import {
  requst_login
} from './../api/index'
// 获取应用实例
const app = getApp()

Page({
  data: {
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  // 事件处理函数
//获取手机号
  getPhoneNumber(e) {
    console.log(e);
    if (e.detail.encryptedData) {
      console.log("iv:" + e.detail.iv)
      console.log("encryptedData:" + e.detail.encryptedData)
      wx.setStorageSync('iv', e.detail.iv)
      wx.setStorageSync('encryptedData', e.detail.encryptedData)
      requst_login({
        nickName: this.data.userInfo.nickName,
        avatarUrl: this.data.userInfo.avatarUrl,
        city: this.data.userInfo.city,
        gender: this.data.userInfo.gender,
        province: this.data.userInfo.province,
        language: this.data.userInfo.language,
      }).then((res) => {
        console.log(res.data.data);
        // setTimeout(()=>{
        //   console.log(res);
        // },1000)
        wx.setStorageSync("role", res.data.data);
        wx.navigateTo({
          'url': '/pages/logs/logs'
        });
      }).catch(()=>{
        console.log('登陆失败');
      })
    } else {
      console.log('获取用户手机失败!' + e.errMsg)
    }
  },


  onLoad() {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse) {
      // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  },
  getUserInfo(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})

index.wxml

<!--index.wxml-->
<view class="container">
  <view class="usermotto">
    <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">登录</button>
  </view>
</view>

api/index.js

import {  httpRequest, putRequest, deleteRequest,
} from './request'
const base = '';
// 获取session-key
export const requst_session_key = data => httpRequest(`session-key`, data);
// 用户登录
export const requst_login = data => httpRequest(`login`, data,'post');
// 获取我的设备
export const requst_get_device = data => httpRequest(`get-device`, data);

request.js

const util = require("../../utils/util");
// var tokenKey = "access-token";
// var serverUrl =  "http://192.168.2.103:5001/v1/wx/"; 
var serverUrl = "";
// 例外不用token的地址
var exceptionAddrArr = [];
// 获取sessionKey
const getSessionKey = ()=> {return  new Promise((resolve, reject) => {
  let sessionKey = wx.getStorageSync("sessionkey");
  wx.checkSession({
    success () {
      resolve(sessionKey);
    },
    fail () {
      // 登录
      wx.login({
        success: res => {
          if(res.code){
            // return this.httpFake('session-key','get',{},sessionKeyCallback);
            // function sessionKeyCallback(e){
              wx.setStorageSync("sessionKey", e.sessionKey);
            // }
          }
          reject(res);
        }
      })
    }
  })
      
})}

//post请求,数据在body中
async function httpRequest(url, data, method = "GET") {
  var header = {};
  var result;
  var e = await getSessionKey()
    if (e) {
      let encryptedData = wx.getStorageSync('encryptedData');
      let iv = wx.getStorageSync('iv');
      // header.Authorization = token;
      header['encryptedData'] = encryptedData;
      header['iv'] = iv;
      header['sessionKey'] = e;
      // if(method == "post-form"){
      // header['Content-Type'] =  "application/text";
      // }
    }
  return  new Promise((resolve, reject) => {
    if (e) {
      wx.request({
        url: serverUrl + url,
        data: data,
        header: header,
        method: method,
        success: (res => {
          resolve(res)
          // if (res.statusCode === 200) {
          //   //200: 服务端业务处理正常结束
          //   resolve(res)
          // } else {
          //   reject(res)
          // }
        }),
        fail: (res => {
          reject(res)
        })
      })
    } else {
      wx.navigateTo({
        url: '/pages/index/index',
      })
      wx.showToast({
        title: '登录失效,请重新登录!',
        icon: 'none',
        duration: 2000
      })
    }
  })
}

module.exports.httpRequest = httpRequest;
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值