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

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

目录结构

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 发送给后台解码出 unionIdthis.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.userInfothis.setData({userInfo: res.userInfo,hasUserInfo: true})}})}},getUserInfo(e) {console.log(e)app.globalData.userInfo = e.detail.userInfothis.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;

微信小程序登录及请求封装相关推荐

微信小程序服务器开小差了,微信小程序wx.request请求封装
微信小程序 wx.request RequestTask wx.request(Object object)发起 HTTPS 网络请求. 示例代码 wx.request({ url: 'test.ph ...
微信小程序wx.request请求封装,和跨域的解决。
建议把所有请求抽离到不同页面对应的js文件中,可以方便后期的修改和排查问题,小程序请求是通过微信后台来请求我们的后台地址来进行后端映射.你请求的接口实际到微信的后端做了一道映射,微信后端拿到你的 wx ...
uniapp 微信小程序登录方法封装
uniapp 微信小程序登录方法封装前言一.登录接口二.登录上代码总结前言 ui设计没有登录页所以将微信小程序登录方法同一封装一个方法一.登录接口 uni.getUserProfile ...
微信小程序 wx.request 的封装
自学转行到前端也已近两年,也算是简书和掘金的忠实粉丝,但是以前一直惜字如金(实在是胆子小,水平又低),现在我决定视金钱如粪土(就只是脸皮厚了,水平就那样),好了废话不多说,切入主题,最近自己尝试了一下 ...
Spring Boot + Spring Security + JWT + 微信小程序登录
Spring Boot + Spring Security + JWT + 微信小程序登录整合教程参考文章文章目录整合思想整合步骤 1. AuthenticationToken 2. Auth ...
调用网易云二维码登录API，实现微信小程序登录
调用网易云二维码登录API,实现微信小程序登录首先前往网易云音乐API官网 binaryify.github.io/NeteaseClou- 首先根据文档的链接下载好配置文件,再根据官方文档启动好本 ...
SpringBoot实现微信小程序登录功能
SpringBoot实现微信小程序登录微信小程序登录流程登录流程图前端代码后端代码微信小程序登录流程微信小程序官方文档:微信小程序官方文档第一次学习微信小程序的登录,以前也好奇微信小程序 ...
用Spring Boot完成微信小程序登录
使用Spring Boot完成微信小程序登录由于微信最近的版本更新,wx.getUserInfo()的这个接口即将失效,将用wx.getUserProfile()替换,所以近期我也对自己的登录进行更 ...
微信小程序登录功能的前端设计与实现
导语 | 登录/注册这模块就像个冰山,我们通常以为它就是「输入账号密码,就完成登录了」,但实际下面还有各种需要考虑的问题.作为应用的基础能力,登录/注册的设计需要有足够的健壮性,避免出现全站性阻塞.同 ...

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

目录结构

app.js

index.js

index.wxml

api/index.js

request.js

微信小程序登录及请求封装相关推荐

最新文章

热门文章