• 技术文章 >微信小程序 >小程序开发

    关于小程序的request封装(附详细流程)

    藏色散人藏色散人2021-09-20 17:10:45转载152

    背景

    之前小程序代码混乱,所以新项目一开始就准备弄个微信小程序的 request 的封装

    流程

    先来说说整个流程:

    1.appjs 里面已进入就去获取用户信息,如果没有登录则默认登录,这里不做错误处理

    2.用户必须同意授权才能进行操作,如果不同意授权则会一直跳转到授权页面

    3.在授权页面点击授权登录后,调用登录接口,成功后返回调起授权的页面,

    app.js

    onLaunch 里面获取用户信息

    appSelf = this;
            // 应用程序第一次进入,获取用户信息,不做任何错误处理
            userInfo().then( (res)=>{
                console.log(res);// 打印结果
                if (!res.code) {
                    appSelf.globalData.userInfo = res
                }
            }).catch( (errMsg)=>{
                console.log(errMsg);// 错误提示信息
            });

    httpUtils.js

    request 的封装

    const request = function (path, method, data, header) {
        let user_id = "";
        let token = "";
        try {
            user_id = wx.getStorageSync(USER_ID_KEY);
            token = wx.getStorageSync(TOKEN_KEY);
        } catch (e) {}
        header = header || {};
        let cookie = [];
        cookie.push("USERID=" + user_id);
        cookie.push("TOKEN=" + token);
        cookie.push("device=" + 1);
        cookie.push("app_name=" + 1);
        cookie.push("app_version=" + ENV_VERSION);
        cookie.push("channel=" + 1);
        header.cookie = cookie.join("; ");
        return new Promise((resolve, reject) => {
            wx.request({//后台请求
                url: API_BASE_URL + path,
                header: header,
                method: method,
                data: data,
                success: function (res) {
                    if (res.statusCode !== 200) {
                        reject(res.data)
                    } else {
                        if (res.data.code === 20006) {
                            login().then( (res)=>{
                                resolve(res)
                            }).catch( (errMsg)=>{
                                reject(errMsg);
                            })
                        }
                        resolve(res.data)
                    }
                },
                fail: function (res) {
                    reject("not data");
                }
            });
        });
    }

    login

    const login = function () {
        try {
            wx.removeStorageSync(USER_ID_KEY)
            wx.removeStorageSync(TOKEN_KEY)
        } catch (e) {}
        return new Promise((resolve, reject) => {
            wx.login({
                success: res => {
                    let code = res.code;
                    // 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
                    wx.getUserInfo({
                        withCredentials: true,
                        success: res => {
                            let userInfo = res.userInfo;
                            let name = userInfo.nickName;
                            let avatar = userInfo.avatarUrl;
                            let sex = userInfo.gender;
                            let data = {
                                code: code,
                                encryptedData: res.encryptedData,
                                iv: res.iv,
                                name: name,
                                avatar: avatar,
                                sex: sex,
                                from: FROM,
                            };
                            request("/api/user/login/byWeChatApplet", "POST", data).then( (res)=>{
                                if (!res.code) {
                                    try {
                                        wx.setStorageSync(USER_ID_KEY, res.user_id);
                                        wx.setStorageSync(TOKEN_KEY, res.token)
                                    } catch (e) {
                                        reject(JSON.stringify(e));
                                    }
                                }
                                resolve(res)
                            }).catch( (errMsg)=>{
                                reject(errMsg)
                            });
                        },
                        fail: function (res) {
                            console.log(res);
    
                            if (res.errMsg && res.errMsg.startsWith("getUserInfo:fail") && res.errMsg.search("unauthorized") != -1) {
                                // 跳转授权页面
                                wx.navigateTo({
                                    url: '/pages/auth/auth'
                                })
                                return;
                            }
                            wx.getSetting({
                                success: (res) => {
                                    if (!res.authSetting["scope.userInfo"]) {
                                        // 跳转授权页面
                                        wx.navigateTo({
                                            url: '/pages/auth/auth'
                                        })
                                    }
                                }
                            });
                        }
                    })
                }
            })
        });
    };

    auth.js

    授权页面 js

    Page({
        data: {
        },
        onLoad: function () {
            self = this;
        },
    
        auth: function (e) {
            console.log(app.globalData.userInfo);
            if (e.detail.userInfo) {
                login().then( (res)=>{
                    console.log(res);// 打印结果
                    if (res.code) {
                        // 接口错误
                        return
                    }
                    // 跳转回上一个页面
                    wx.navigateBack()
                }).catch( (errMsg)=>{
                    console.log(errMsg);// 错误提示信息
                });
            }
        },
    
    });

    项目地址

    https://github.com/lmxdawn/wx...

    一个 vue + thinkphp5.1 搭建的后台管理:https://github.com/lmxdawn/vu...

    演示:
    9228405108968eb847cfb5c5ffffdf2.png


    以上就是关于小程序的request封装(附详细流程)的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:segmentfault,如有侵犯,请联系admin@php.cn删除
    专题推荐:request
    上一篇:深入讲解小程序中实现搜索功能的方法 下一篇:聊聊怎么利用小程序生成海报(插件推荐)
    线上培训班

    相关文章推荐

    • $_REQUEST、 $_POST、 $_GET之间的爱恨情仇• 详解Python之urllib爬虫、request模块和parse模块• 总结laravel中$request获取请求信息用法• 小程序request请求怎么解决session失败问题

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网