À propos de la demande d'encapsulation de mini-programmes (avec processus détaillé)

Demande d'encapsulation de l'applet WeChat

Contexte

Le code de l'applet précédent était déroutant, donc au début du nouveau projet, nous avions prévu d'encapsuler la demande de l'applet WeChat

Processus

Parlons d'abord de l'ensemble du processus :

1 Après avoir saisi .appjs, obtenez les informations utilisateur. Si vous n'êtes pas connecté, vous vous connecterez par défaut. Aucune gestion des erreurs n'est effectuée ici

2. .S'il n'accepte pas l'autorisation, il passera toujours à la page d'autorisation

3. Après avoir cliqué sur Autorisation de connexion sur la page d'autorisation, appelez l'interface de connexion. Après succès, revenez à la page où l'autorisation est appelée. informations utilisateur dans

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

demande d'encapsulation

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

Page d'autorisation 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);// 错误提示信息
            });
        }
    },

});

Adresse du projet

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

Gestion backend construite avec vue + thinkphp5.1 : https://github.com/ lmxdawn/vu...

Démo :<br>

<br>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!