sendAjax.小程序登录封装

最新推荐文章于 2022-08-03 20:37:27 发布
最新推荐文章于 2022-08-03 20:37:27 发布
阅读量1.3k 收藏 1
点赞数
分类专栏： 小程序 文章标签： 小程序登录
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yiting123456789/article/details/78933326
版权

sendAjax

首先，会接受三个参数

第一个参数为请求前的必要的数据（接口地址，需传参数等）
    默认method为POST（特别调整了method值传入为大写）
        data为{}

第二个参数为回调函数（在调用之前，成功后，完成后）
        默认调用前加正在加载提示，防止重复点击
            完成后关闭正在加载提示
    （特别：调用前的回调，是自己加的。）

第三个参数为需刷新的局部
    防止整个页面刷新，少调几次后台

其次，调用前会确认是否有登录权限，或者G_authorization 的缓存信息

如果有G_authorization 的缓存信息或不需要登录权限，就是登录状态没问题，继续调用ajax

否则去重新登录。

（有G_authorization 的缓存信息：已有帐号才会有此变量）

最后， 成功，200 =》调用成功的回调函数
401 =》登录失效，去重新登录
其他 =》处理失败

失败 =》服务器连接失败

完成 =》调用完成的回调函数

登录

login（拿到code）
用户同意

=》 getUserInfo （用户基本信息）

=》换unionId，拿到用户信息，设置全局变量

=》判断全局变量G_authorization，没有

=》 增加新的小程序账户

=》 刷新局部，或当前页面

const HOST = require('../config.js')

function sendAjax(options, callback, outTimeAuthCbOrNeedAuth) {

    // 登录信息过期处理类型
    const OTCB = outTimeAuthCbOrNeedAuth || function () { getCurrentPages().pop().onLoad(getCurrentPages().pop().options) }
    const _sets = options

    if (typeof _sets.type === 'undefined') { _sets.type = 'POST' }
    if (typeof _sets.data === 'undefined') { _sets.data = {} }

    // 如果不是明确不需要登录权限 而且 没有 G_authorization 的缓存信息 
    if (outTimeAuthCbOrNeedAuth !== false && !wx.getStorageSync('G_authorization')) {

        getApp().uploadUserInfo(OTCB)
        return
    }

    // 纠正method大写
    _sets.type = _sets.type.toUpperCase();

    const bcallback = callback.beforeSend || function (data) {
        wx.showToast({
            title: '正在加载...',
            icon: 'loading',
            duration: 10000
        }) };
    const scallback = callback.success || function (data) { };
    const ccallback = callback.complete || function (data) { wx.hideToast() };

    bcallback()

    wx.request({
        url: HOST + _sets.url,
        method: _sets.type,
        data: _sets.data,
        header: {
            'content-type': 'application/json',
            'authorization': outTimeAuthCbOrNeedAuth !== false ?  wx.getStorageSync('G_authorization') : ''
        },
        success(res) {

            if (res.data.code == 200) {

                scallback(res.data)
            } else {

                if (res.data.code == 401) {

                    getApp().uploadUserInfo(OTCB)
                } else {

                    wx.showModal({
                        title: '提示',
                        content: res.data.message || '处理失败',
                        showCancel: false
                    });
                }
            }
        },
        fail() {
            wx.showModal({
                title: '提示',
                content: '服务器连接失败',
                showCancel: false
            });
        },
        complete() {
            ccallback()
        }
    })
}

module.exports = sendAjax

//app.js

/** 
     * 
     * 更新用户信息
     * 1 授权登录
     * 2 拿去用户信息
     * 3 调用/user/account/platform/login 进行登录，有则拿取信息，无则进行注册
     * 4 拿到用户信息后，没绑定手机号 单独在页面判断登录
     * 5 老用户直接刷新页面，有自定义的回调就自定（cb），没有就刷新当前页面
     * 
     */
    uploadUserInfo(cb) {
        const that = this
        wx.showNavigationBarLoading()
        wx.login({
            success: (loginResult) => {
                that.globalData.platCode = loginResult.code

                wx.showNavigationBarLoading()

                wx.getUserInfo({
                    success: (userResult) => {

                        // 拿取登录换取unionId 必要参数
                        let platUserInfoMap = that.globalData.platUserInfoMap
                        platUserInfoMap["encryptedData"] = userResult.encryptedData
                        platUserInfoMap["iv"] = userResult.iv
                        that.globalData.platUserInfoMap = platUserInfoMap

                        wx.showNavigationBarLoading()

                        wx.request({
                            url: HOST + '/user/account/platform/login',
                            method: 'POST',
                            data: {
                                platType: that.globalData.platType,
                                platCode: that.globalData.platCode,
                                platUserInfoMap: that.globalData.platUserInfoMap,
                                weixinAppType: 3
                            },
                            header: {
                                'content-type': 'application/json'
                            },
                            success: (res) => {
                                if (res.data.code == "200") {

                                    that.globalData.unionId = res.data.unionId

                                    // 更新全局数据
                                    wx.setStorageSync("G_unionId", res.data.unionId)
                                    wx.setStorageSync("G_userKey", res.data.userKey)
                                    wx.setStorageSync("G_nickName", res.data.userName)
                                    wx.setStorageSync("G_avatar", res.data.avatar)
                                    wx.setStorageSync("G_isBind", res.data.isBind)
                                    wx.setStorageSync("G_userId", res.data.userId)
                                    wx.setStorageSync('G_authorization', res.data.authorization)

                                    // 没绑定手机号 单独在页面判断登录
                                    if (res.data.authorization == "") {
                                        wx.showNavigationBarLoading()
                                        wx.request({
                                            url: HOST + '/user/account/weixinapp',
                                            method: 'POST',
                                            data: {
                                                unionId: res.data.unionId,
                                                nickName: res.data.userName,
                                                headimgurl: res.data.avatar
                                            },
                                            header: {
                                                'content-type': 'application/json'
                                            },
                                            success: (resp) => {
                                                if (resp.data.code == 200) {
                                                    wx.setStorageSync('G_authorization', resp.data.authorization)

                                                    if (typeof cb === 'function') {
                                                        cb();
                                                    } else {
                                                        //获取当前页面，并刷新
                                                        getCurrentPages().pop().onLoad(getCurrentPages().pop().options)
                                                    }
                                                }
                                                else {
                                                    wx.showModal({
                                                        title: '提示',
                                                        content: resp.data.message,
                                                        showCancel: false
                                                    });
                                                }

                                            },
                                            fail: () => {
                                                wx.showModal({
                                                    title: '提示',
                                                    content: '服务器连接失败',
                                                    showCancel: false
                                                });
                                            },
                                            complete: () => {
                                                wx.hideNavigationBarLoading()
                                            }
                                        })

                                        // } else if (wx.getStorageSync("G_isBind") != 1) {
                                        //     wx.showModal({
                                        //         title: '提示',
                                        //         content: '请先绑定手机号，体验布管家全套纺织管理服务',
                                        //         showCancel: false,
                                        //         success: (res) => {
                                        //             wx.navigateTo({
                                        //                 url: '/page/center/bindPhone',
                                        //             })
                                        //         }
                                        //     });

                                    } else {

                                        if (typeof cb === 'function') {
                                            cb();
                                        } else {
                                            //获取当前页面，并刷新
                                            getCurrentPages().pop().onLoad(getCurrentPages().pop().options)
                                        }
                                    }

                                } else {
                                    wx.showModal({
                                        title: '提示',
                                        content: res.data.message,
                                        showCancel: false
                                    });
                                }
                            },
                            fail() {
                                wx.showModal({
                                    title: '提示',
                                    content: '服务器连接失败',
                                    showCancel: false
                                });
                            },
                            complete: () => {
                                wx.hideNavigationBarLoading()
                            }
                        })

                    },

                    fail: (userError) => {

                        wx.showModal({
                            title: '提示',
                            content: '若不授权微信登录，则无法使用相关功能；点击重新获取授权，则可重新使用。',
                            cancelText: "不授权",
                            confirmText: "授权",
                            success: (res) => {
                                if (res.confirm) {
                                    wx.openSetting({
                                        success: (res) => {
                                            if (res.authSetting["scope.userInfo"]) {

                                                //获取当前页面，并刷新
                                                getCurrentPages().pop().onLoad(getCurrentPages().pop().options)
                                            }
                                        }
                                    });
                                } else if (res.cancel) {

                                    // 同今天及，哦同里 恩 段 义 绝
                                    wx.showModal({
                                        title: '提示',
                                        content: '未授权，无法流畅使用主要功能',
                                        showCancel: false
                                    });
                                }
                            }
                        });
                    },

                    complete: () => {
                        wx.hideNavigationBarLoading()
                    }
                });
            },

            fail: function (loginError) {
                wx.showModal({
                    title: '提示',
                    content: '微信登录失败，请检查网络状态',
                    showCancel: false,
                    success: (e) => {
                        console.log('微信登录失败', e)
                    }
                });
            },
            complete: () => {
                wx.hideNavigationBarLoading()
            }
        });
    },
haha有仙女
关注
专栏目录
基于Java+SpringBoot制作一个软考助手答题小程序
商务合作 / 项目定制 / 学习交流。个人vx：lovely_wml
06-10 5416
基于Java+SpringBoot制作一个软考小助手考试答题小程序。其中系统前端功能包括注册登录、公告通知、考试答题、视频课程、考试记录、题库、题目评论、错题统计、我的收藏和用户信息管理模块；系统后台功能包括用户管理、题库管理、答题管理、学习视频管理以及系统管理模块。
微信小程序笔记——小程序授权登录封装
leo
06-20 5420
一、前言 产品需求：在游客模式登录下，用户做某些操作（如：评论，点赞。。。）时，需要拉起小程序授权登录，在没有单独登录页的情况下（为了方便可以让产品&UI出一个单独的登录页），封装一下小程序授权登录就比较方便了。 1、组件编写 新建Component => author author.wxml: <!-- 未登录情况下拉起授权登录按钮 --> <b...
小程序ajax封装
lixiaonaaa的博客
01-23 112
// 封装ajax import config from './config'; //基础配置，服务器配置 export default (url, data={}, method='GET') => { console.log(wx.getStorageSync('cookies')) return new Promise((resolve, reject) => { wx.request({ url: config.host + url, dat.
小程序：封装ajax
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
11-04 287
目录结构 ├── pages ├── images ├── utils │ ├── ajax.js ├── app.js 代码 // utils/ajax.js // 基准路径 const baseUrl = 'http://localhost:8090' // 1.0 返回一个 promise 对象 function ajax(url, method = 'GET', data = {}, he...
封装小程序ajax
weikehang的博客
03-02 183
let COMMON_FALSE = -1 let AlERT_CODE = 201 let AlERT_RETURN_CODE = 202 let AlERT_REFRESH_CODE = 203 let CONFIRM_RETURN_CODE = 211 let OAUTH_CODE = 101 let NO_POWER_CODE = 401 // let URL = wx.config....
小程序ajax请求封装
May_Chiong的博客
06-03 321
小程序什么是小程序？ 什么是小程序？ 基于微信庞大的社交群体，可以为原生app导流 创业公司优先推出小程序，开发成本低 接近原生开发的用户体验 特点： 快速的加载能力 更强大的能力 接近原生的体验 易用且安全的微信数据开发 高效和简单的开发 和普通页面的区别 ...
简单的ajax登录小程序 mysql数据库
06-13
**Ajax登录小程序与MySQL数据库的整合** Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。在这个简单的Ajax登录小程序中，我们利用Ajax技术实现了一个用户...
微信小程序之 wx.request 封装 ajax加载数据封装案例
夜阑珊妖妖
07-17 401
微信小程序之 wx.request pages 同级 创建文件夹 utils； 2.utils 文件夹中创建 requst 文件夹； 3.requst 中创建 文件 ajax.js api.js url.js 4.ajax.js // Promise封装请求 options是一个对象里面的属性有url, data, method, load //url 对应请求路径 data对象请求的参数 method对应请求方法 load对应是否显示加载中 1显示 0不显示 function
怎样封装一个原生的Ajax,原生javascript封装ajax
weixin_28909779的博客
08-05 365
最近重新看《javascript高级程序设计》，突然看到了ajax，想起来之前学习的各种坑，又想着结合最近学习的模块化编程、面向对象式编程，所以用原生的js采用面向对象的设计思路对ajax进行了一个封装，同时，想起之前学习ajax的最大困难：没有服务器端代码，不好测试，所以这次用原生node写了一个简单的服务器，用于处理ajax的测试。综上，本文主要提供了以下几个点：采用面向对象的方法用原生js封...
小程序使用es6封装ajax源码案例
06-25
小程序使用es6封装ajax源码案例，使用简单，没用过es6的也能看懂了
微信小程序--封装ajax
a1057267039的博客
10-31 612
全局封装 ajax ，方便添加默认参数 ，判断本地存储信息 ，登录情况 // 基准路径 const baseUrl = ‘http://www.xxx.com/xxxx/methods/’ //获取countryCode 和 exchange_rate function getExrate(url, method, header={}) { wx.request({ url: baseUrl + url, method: "GET", data:{}, header, success: res =&
微信小程序ajax封装
yehaocheng520的博客
04-19 1226
微信小程序request(ajax)接口请求封装 最近在进行小程序的编写，需要调用后端接口，经常要用到wx.request方法，所以就自己封装了一下，简化一下代码，如果能给大家提供帮助更好，在封装的时候我在网上看了很多篇博客，90%以上的全都是直接在success回调函数中直接打印返回值console.log(res.data)这个当然是没有问题的，但是我们都知道微信小程序的数据是实现数据绑定的，...
微信小程序的封装和登录
Intellectual__的博客
08-03 568
封装
小程序开发，ajax封装
qq_35126546的博客
11-11 260
小程序开发，ajax封装 utils.js： 本人是promise函数的死忠粉… const $ajax = function(url,data,method,loading = true){ let baseUrl_DEV = "xxx"; let headers_POST = { "accessToken": "Bearer " + wx.getStorageSync('tok...
小程序中封装的ajax 方法
qq_45802159的博客
03-17 358
工具 ajax.js代码 // 记录调用 request 方法的次数 let ajaxTimes = 0 // 请求地址的基本路径 const baseUrl = 'https://api-hmugo-web.itheima.net/api/public/v1' export function request(params) { // 每次调用 request 方法时，将 ajaxT...
微信小程序ajax php,在微信小程序中封装自己的ajax
weixin_42510460的博客
03-27 196
wx.request(Object object) 是微信小程序官方给出的网络请求接口。下面我们把它变成便于我们使用的ajax。1，创建一个js文件。我是在utils目录中创建了一个wxset.js2，在创建的js文件中编写ajax函数。//网络请求,e=请求方式,r[0]=api地址 r[1]=向后台发送的数据//callback=回调函数function Ajax(e, r, callback...
微信小程序之ajax方法封装
weixin_47175781的博客
10-27 774
微信小程序之ajax方法封装 我们为了更好的也更方便的进行代码优化，所以对于很多相同的方法或者API我们来进行封装也可以精简代码量。那我们将方法封装到utils包下。 我是将网络请求封装到了这个方法集合下 const htp = { //首页网络请求 //方法括号中代表这个网络请求的参数 dy: function (url, index, v) { wx.request({ url: backurl + url, method: "GET", succ
小程序ajax提交数据,小程序ajax封装
weixin_39687814的博客
08-05 306
前言微信小程序提供了网络请求方法，但是用起来不太方便，就自己封装了下。封装源码// 引用封装的APIimport API from './_api.js'export default {/*** fetch是封装的请求方法* 参数:* url: 接口地址* data: 参数* method: 请求方式* success: 成功后调用的方法* ...
小程序封装ajax,微信小程序封装wx.request实现http请求
最新发布
06-09
为了方便地在微信小程序中发起 HTTP 请求，我们可以封装一个网络请求的函数，将 wx.request 接口进行封装，以便于在项目中统一管理和调用。以下是一个简单的封装示例： ``` function request(url, method, data, ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值