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

广告:宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买

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

背景

之前小程序代码混乱,所以新项目一开始就准备弄个微信小程序的 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.jsrequest 的封装
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...

演示:

登录后复制

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

广告:SSL证书一年128.66元起,点击购买~~~

9543建站博客
一个专注于网站开发、微信开发的技术类纯净博客。

作者头像
admin创始人

肥猫,知名SEO博客站长,14年SEO经验。

上一篇:yii实现根据id查询一条数据
下一篇:php微信公众号开发模式详细说明

发表评论

关闭广告
关闭广告