Ejemplo de visualización de estilo:
El principio es: el software que desarrollamos llama al cuadro de viñetas de la aplicación WeChat, que es principalmente para obtener la información del usuario actual que ha iniciado sesión en WeChat (permitir/cancelar)
-
El permiso es permitir que el software que desarrollamos obtenga la información de usuario del inicio de sesión de WeChat
Popular: obtener información de usuario de WeChat para iniciar sesión
-
No permitido
Popular: No está permitido obtener información de usuario de WeChat para iniciar sesión
El primer paso: el primero es obtener información del usuario
1. Tecnología recomendada: wx.getUserProfile(objeto objeto)
wxLogin() {
// 第一步是获取微信用户的基本信息
wx.getUserProfile({
// 描述你获取我手机上的微信app的登录用户的作用
desc: "用于完善会员资料",
//弹出授权框之后,你点击允许 success
success: (res) => {
console.log(res);
},
//弹出授权框之后,你点击取消 fail
// fail: (err) => {
// }
})
}
Nota: Habrá un informe de error o no aparecerá un cuadro emergente después de hacer clic. En general, puede verificar su propia ID de desarrollo o cambiar la versión desarrollada por el applet. Si la versión es demasiado alta, no lo hará. se mostrará.
Paso 2: después de un inicio de sesión autorizado, obtenga la información del usuario
Resuelva el problema, cómo hacer que la página del centro personal use la información de nuestra página de inicio de sesión
Resumen: cómo dos páginas comparten datos
Método 1: vuex
Método 2: almacenar localmente (almacenamiento local, almacenamiento de sesión)
Ambos métodos están disponibles, dependiendo de sus necesidades.
1. Después de obtener los datos, guardamos la información del usuario localmente: wx.setStorageSync(clave de cadena, cualquier dato)
2. Después de guardar localmente, el siguiente paso es continuar iniciando sesión y obtener el valor del código proporcionado por el servidor de WeChat.
````js
wx.login({
success:(res)=>{
// 得到code的值
}
})
````3. Envíe una solicitud asincrónica, acceda al fondo, solicite obtener el valor del código y el valor obtenido debe convertirse en una cadena
wx.login({
success: async res => {
// console.log(res);
// 拿到code访问后台接口发请求
let data = await api_loginCode({
code: res.code
});
// console.log(data);
// 把token存到本地
wx.setStorageSync('token', JSON.stringify(data));
// 全部做完 跳转到个人中心
wx.reLaunch({
url: '/pages/personCenter/personCenter'
});
}
});4. Guarde el valor del token devuelto por la solicitud localmente y luego salte a la página del centro personal
// 全部都做完了,跳转到个人中心
wx.switchTab({
url: '/pages/personCenter/personCenter'
})5. Código completo de inicio de sesión:
methods: {
wxLogin() {
// 第一步是获取微信用户的基本信息
wx.getUserProfile({
// 描述你获取我手机上的微信app的登录用户的作用
desc: '用于完善会员资料',
//弹出授权框之后,你点击允许 success
success: res => {
// console.log(res);
// 把数据存到本地 本地是存的字符串 但是wx.setStorageSync是一个对象
wx.setStorageSync('userInfo', JSON.stringify(res.userInfo));
// 再次调用微信登录 需要拿到code
wx.login({
success: async res => {
// console.log(res);
// 拿到code访问后台接口发请求
let data = await api_loginCode({
code: res.code
});
// console.log(data);
// 把token存到本地
wx.setStorageSync('token', JSON.stringify(data));
// 全部做完 跳转到个人中心
wx.reLaunch({
url: '/pages/personCenter/personCenter'
});
}
});
}
});
}
}Paso 3: Ir a la página del centro personal
1. Primero, hay dos páginas de encabezado, una no inicia sesión y la otra inicia sesión, que debe representarse de acuerdo con la información de información del usuario
<!-- 头部有两个 ,一个是登录转态的 -->
<view class="header" v-if="userInfo.nickName">
<image class="userImg" :src="userInfo.avatarUrl" mode=""></image>
<view class='userInfo'>
<view @click="exit">退出登录</view>
</view>
</view>
<!-- 未登录状态的 -->
<view class="header" v-else>
<image class="userImg" src="../../static/images/personal/personal.png" mode=""></image>
<view class='userInfo'>
<view @click="tologin">未登录</view>
</view>
</view>2. Saltar al componente del centro personal es equivalente a enviar una solicitud asincrónica y luego definir variables para recibir la información del depositante local, y el valor obtenido debe convertirse en un formulario de objeto.
async mounted() {
let userInfo = wx.getStorageSync('userInfo');
// console.log(userInfo);
if (userInfo) {
// 有值代表登录 有值在转化为对象
this.userInfo = JSON.parse(userInfo);
// 有值 有登录 在发请求
let res = await api_loginToken({
token: JSON.parse(wx.getStorageSync('token'))
});
// console.log(res);
this.info = res;
} else {
// 没有值代表没有登录
}
},3. En el caso de valor, enviar una solicitud es obtener el centro personal, mi información patrimonial
Paso 4: Cerrar sesión
1. Si cierra la sesión, debe borrar la información del usuario y la información del token
methods: {
// 退出登录 清空本地存储 不能清空所有,只需要清空userInfo和token
goback() {
// wx.clearStorageSync();
wx.removeStorageSync('userInfo');
wx.removeStorageSync('token');
wx.reLaunch({
url: '/pages/personCenter/personCenter'
});
},
tologin() {
wx.navigateTo({
url: '/pages/login/login'
});
}
}Dibuje una imagen para entender, sobre los pasos de inicio de sesión de autorización de applet:
