资讯专栏INFORMATION COLUMN

微信小程序的 request 封装

Kahn / 2484人阅读

摘要:背景之前小程序代码混乱,所以新项目一开始就准备弄个微信小程序的的封装流程先来说说整个流程里面已进入就去获取用户信息,如果没有登录则默认登录,这里不做错误处理用户必须同意授权才能进行操作,如果不同意授权则会一直跳转到授权页面在授权页面点击授权

背景

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

流程

先来说说整个流程:

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

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

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

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...

演示:

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/52907.html

相关文章

  • 信小程序教学第二章(含视频):小程序中级实战教程之预备篇 - 封装网络请求及 mock 数据

    摘要:调用方法如下微信热门官网访问官网更快阅读全部免费分享课程出品全网最新微信小程序基于最新版开发者工具之初中级培训教程分享。 § 封装网络请求及 mock 数据 本文配套视频地址:https://v.qq.com/x/page/i0554... 开始前请把 ch2-3 分支中的 code/ 目录导入微信开发工具 上一节中,我们对 index.js 文件中增加了 util 对象,并在对象...

    wqj97 评论0 收藏0
  • 信小程序教学第二章(含视频):小程序中级实战教程之预备篇 - 封装网络请求及 mock 数据

    摘要:调用方法如下微信热门官网访问官网更快阅读全部免费分享课程出品全网最新微信小程序基于最新版开发者工具之初中级培训教程分享。 § 封装网络请求及 mock 数据 本文配套视频地址:https://v.qq.com/x/page/i0554... 开始前请把 ch2-3 分支中的 code/ 目录导入微信开发工具 上一节中,我们对 index.js 文件中增加了 util 对象,并在对象...

    zhigoo 评论0 收藏0
  • 信小程序教学第二章(含视频):小程序中级实战教程之预备篇 - 封装网络请求及 mock 数据

    摘要:调用方法如下微信热门官网访问官网更快阅读全部免费分享课程出品全网最新微信小程序基于最新版开发者工具之初中级培训教程分享。 § 封装网络请求及 mock 数据 本文配套视频地址:https://v.qq.com/x/page/i0554... 开始前请把 ch2-3 分支中的 code/ 目录导入微信开发工具 上一节中,我们对 index.js 文件中增加了 util 对象,并在对象...

    morgan 评论0 收藏0
  • 信小程序 request 封装

    摘要:背景之前小程序代码混乱,所以新项目一开始就准备弄个微信小程序的的封装流程先来说说整个流程里面已进入就去获取用户信息,如果没有登录则默认登录,这里不做错误处理用户必须同意授权才能进行操作,如果不同意授权则会一直跳转到授权页面在授权页面点击授权 背景 之前小程序代码混乱,所以新项目一开始就准备弄个微信小程序的 request 的封装 流程 先来说说整个流程: appjs 里面已进入就去获...

    bang590 评论0 收藏0
  • 信小程序 request 封装

    摘要:背景之前小程序代码混乱,所以新项目一开始就准备弄个微信小程序的的封装流程先来说说整个流程里面已进入就去获取用户信息,如果没有登录则默认登录,这里不做错误处理用户必须同意授权才能进行操作,如果不同意授权则会一直跳转到授权页面在授权页面点击授权 背景 之前小程序代码混乱,所以新项目一开始就准备弄个微信小程序的 request 的封装 流程 先来说说整个流程: appjs 里面已进入就去获...

    forrest23 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<