詳解微信小程序的 request 封裝示例
背景
之前小程序代碼混亂,所以新項(xiàng)目一開始就準(zhǔn)備弄個(gè)微信小程序的 request 的封裝
httpUtils.js
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({//后臺(tái)請(qǐng)求
url: API_BASE_URL + path,
header: header,
method: method,
data: data,
success: function (res) {
if (res.code) {
reject(res.data)
} else {
resolve(res.data)
}
},
fail: function (res) {
reject("not data");
}
});
});
};
userLogin.js
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;
// 已經(jīng)授權(quán),可以直接調(diào)用 getUserInfo 獲取頭像昵稱,不會(huì)彈框
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) {
if (res.errMsg && res.errMsg.startsWith("getUserInfo:fail") && res.errMsg.search("unauthorized") !== -1) {
reject("getUserInfo:fail");
return;
}
wx.getSetting({
success: (res) => {
if (!res.authSetting["scope.userInfo"]) {//沒授權(quán)
showModal('提示', '需要獲取用戶的權(quán)限,點(diǎn)擊確定前往設(shè)置,打開用戶信息', true, function (res) {
wx.openSetting({
success: (res) => {
// 用戶返回 不管是否開啟 接著去重新登錄
login().then( (res)=>{
if (res.code) {
reject(res.message);
return
}
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)
});
}
})
}, function () {})
}
}
});
}
})
}
})
});
};
項(xiàng)目地址:https://github.com/lmxdawn/wxa-demo
一個(gè) vue + thinkphp5.1 搭建的后臺(tái)管理:https://github.com/lmxdawn/vue-admin-html
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
js 輸出內(nèi)容到新窗口具體實(shí)現(xiàn)代碼
js 輸出內(nèi)容一般都是在本窗口,如果要實(shí)現(xiàn)在新窗口的話該如何實(shí)現(xiàn)呢?下面與大家分享具體的代碼2013-05-05
JavaScript展開運(yùn)算符用法及實(shí)際應(yīng)用詳解
展開運(yùn)算符是JavaScript中的語法糖,用三個(gè)點(diǎn)(...)表示,廣泛應(yīng)用于數(shù)組和對(duì)象的操作,本文介紹了其基本用法,如在數(shù)組和對(duì)象中的應(yīng)用,合并數(shù)組或?qū)ο?更新對(duì)象屬性等,還探討了展開運(yùn)算符的高級(jí)應(yīng)用,需要的朋友可以參考下2024-09-09
JavaScript canvas實(shí)現(xiàn)雨滴特效
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas實(shí)現(xiàn)雨滴特效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-01-01
js無后端實(shí)現(xiàn)點(diǎn)擊加載查看更多(提示SEO友好度)
為了提示SEO友好度,并且避免調(diào)用后端接口給服務(wù)器造成負(fù)擔(dān),可以使用js無后端實(shí)現(xiàn)點(diǎn)擊加載查看更多,比如HTML中源碼存在60條記錄,預(yù)先顯示20條記錄,點(diǎn)擊“查看更多”一次追加10條,最后一次后按鈕文本改為“已查看全部”,在JavaScript中,你可以使用以下步驟來實(shí)現(xiàn)2024-10-10

