uniapp开发微信小程序问题集锦(1)

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存储token

import { 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;
		};

		// 记得 return
		return {
			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 方法。

  • 13
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值