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>