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

server/2024/11/14 21:05:56/

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 方法。


http://www.ppmy.cn/server/46416.html

相关文章

太速科技-基于3U VPX的 Jetson Xavier NX GPU计算主板

基于3U VPX的 Jetson Xavier NX GPU计算主板 一、产品概述 基于3U VPX的 Jetson Xavier NX GPU计算主板&#xff0c;是AI 人工智能的低功耗计算平台&#xff0c;是LINUX环境下软件开发等的理想工具&#xff0c;拥有VPX标准连接器和特性的接口。 二、板卡原理框图 …

JS 【详解】双指针排序 -- 数组合并后递增排序

时间复杂度为 O(m n) &#xff0c;可简称为 O(n) 排序流程 在两个数组中&#xff0c;从第一项开始&#xff0c;各自设一个指针将两指针对应的元素进行比较&#xff0c;将较小的放入最终数组中&#xff0c;若两元素相同&#xff0c;就都放入最终数组中&#xff0c;若有一个指针…

【LeetCode 77. 组合】

1. 题目 2. 分析 本题有个难点在于如何保存深搜得到的结果&#xff1f;总结了一下&#xff0c;深搜处理的代码&#xff0c;关于返回值有三大类。 第一类&#xff1a;层层传递&#xff0c;将最深层的结果传上来&#xff1b;这类题有&#xff1a;【反转链表】 第二类&#xff1…

Git使用规范及命令

文章目录 一、Git工作流二、分支管理三、Git命令操作规范1. 切到develop分支&#xff0c;更新develop最新代码2. 新建feature分支&#xff0c;开发新功能3. 完成feature分支&#xff0c;合并到develop分支4. 当某个版本所有的 feature 分支均合并到 develop 分支&#xff0c;就…

前端最新面试题(基础模块HTML/CSS/JS篇)

目录 一、HTML、HTTP、WEB综合问题 1 前端需要注意哪些SEO 2 img的title和alt有什么区别 3 HTTP的几种请求方法用途 4 从浏览器地址栏输入url到显示页面的步骤 5 如何进行网站性能优化 6 HTTP状态码及其含义 7 语义化的理解 8 介绍一下你对浏览器内核的理解? 9 html…

Oracle 创建DBLink

一、查询是否具有创建DBLink的权限select * from user_sys_privs where privilege like upper(%DATABASE LINK%); 二、如果没有&#xff0c;则需要使用 sysdba 角色给用户赋权grant create public database link to dbusername; 三、创建dblink -- 如果创建全局 dblink&am…

Unity之如何使用Localization来实现文本+资源多语言

前言 使用Unity实现本地化&#xff08;Localization&#xff09;功能 在当今的游戏开发中&#xff0c;支持多语言已成为一项基本需求。Unity作为主流的游戏开发引擎&#xff0c;提供了强大的本地化工具&#xff0c;使开发者能够方便地为游戏添加多语言支持。本文将介绍如何在U…

学习整理 docker

nexus 搭建nexus将其他pom、jar导入到nexus中