1,uniapp实现微信小程序手机号快速登陆

看uniapp的官方文档，之前用的是uni.login会返回一个短code，后端是用不了的，后面通过询问才知道因该是使用button的方法@getphonenumber这样能够获取到手机号，并返回一个长code，这个后端才可以使用，用法如下

<button class="login-btn" type="primary" open-type="getPhoneNumber" @getphonenumber="getnumber">微信用户一键登录</button>//获取用户手机号const getnumber = async function (e) {try {console.log(e.detail.code);} catch (error) {// 错误处理逻辑console.error('An error occurred while executing Captcha function:', error);}}

2.登陆后本地存储toekn

这次项目使用的是pinia存储token，使用pinia的时候使用错误了，刚开始一直存储不上，后面才发现是defineStore使用错误，

• defineStore 接收两个参数
  • id: 唯一的标识, string 类型. Pinia 使用 id 与开发者工具建立联系.
  • 第二个参数可以是一个函数, 也可以是一个对象.

刚开始直接复制另一个文件的definstore，只改了内容，后面发现是用不了，才知道是id重复了

本地存储token

//登录成功调用这个方法
const loginSuccess = (profile) => {// 保存会员信息useloginStore.setProfile(profile)// 成功提示uni.showToast({title: '登录成功',icon: 'success',mask: true,})setTimeout(() => {// 页面跳转uni.navigateBack()}, 500)}

//pinia存储tokenimport { defineStore } from 'pinia';
import { ref } from 'vue';// 定义 Store
export const loginStore = defineStore('login',() => {// 会员信息const profile = ref();// 保存会员信息，登录时使用const setProfile = (val) => {profile.value = val;console.log(profile.value, 111111111111111111111);};// 清理会员信息，退出时使用const clearProfile = () => {profile.value = undefined;};// 记得 returnreturn {profile,setProfile,clearProfile,};},// TODO: 持久化{// 网页端配置// persist: true,// 小程序端配置persist: {storage: {getItem(key) {return uni.getStorageSync(key);},setItem(key, value) {uni.setStorageSync(key, value);},},},}
);

//使用token
const useloginStore = loginStore();const token = useloginStore.profile;if (token) {options.header.Authorization = `Bearer ${token}`;}

3.在uniapp里给组件添加ref获取不到组件实例

使用 uniapp 的 原生方法uni.createSelectorQuery()

作用：返回一个 SelectorQuery 对象实例。可以在这个实例上使用 select 等方法选择节点，并使用 boundingClientRect 等方法选择需要查询的信息。

Tips:

• 使用 uni.createSelectorQuery() 需要在生命周期 mounted 后进行调用。
• 默认需要使用到 selectorQuery.in 方法。