Background
이전 애플릿 코드가 혼란스러워서 새 프로젝트 시작 시 WeChat 애플릿
Process
전체 프로세스에 대해 먼저 이야기해 보겠습니다.
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
요청 캡슐화
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...
Demo:<br>
