当前位置: 首页 > news >正文

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

相关文章:

  • Hadoop概览以及编译hadoop说明
  • SpringBoot高级原理详解
  • 【MyBatis】MyBatis解析全局配置文件源码详解
  • 深度神经网络详解
  • 同旺科技 FLUKE ADPT 隔离版发布 ---- 3
  • pycharm配置python开发环境—miniconda+black+gitlab
  • 【sass插值语句 #{}简介以及使用方法】
  • TG5032CGN TCXO 超高稳定10pin端子型适用于汽车动力转向控制器
  • 以及Spring中为什么会出现IOC容器?@Autowired和@Resource注解?
  • js 实现贪心算法
  • 国内服务器未备案使用域名443访问的方法
  • Spring Boot 3.3新特性发布
  • 跟TED演讲学英文:How to escape education‘s death valley by Sir Ken Robinson
  • 【操作系统】基本概念 解析+思维导图(特征、概念、功能)并发 共享 虚拟 异步
  • 手写tomcat(Ⅲ)——tomcat动态资源的获取
  • [PHP内核探索]PHP中的哈希表
  • [js高手之路]搞清楚面向对象,必须要理解对象在创建过程中的内存表示
  • [数据结构]链表的实现在PHP中
  • CSS 提示工具(Tooltip)
  • Idea+maven+scala构建包并在spark on yarn 运行
  • JavaScript 奇技淫巧
  • JavaWeb(学习笔记二)
  • Java编程基础24——递归练习
  • Map集合、散列表、红黑树介绍
  • MD5加密原理解析及OC版原理实现
  • Promise面试题2实现异步串行执行
  • ReactNativeweexDeviceOne对比
  • SpingCloudBus整合RabbitMQ
  • tensorflow学习笔记3——MNIST应用篇
  • 创建一种深思熟虑的文化
  • 从零开始学习部署
  • 技术胖1-4季视频复习— (看视频笔记)
  • 爬虫进阶 -- 神级程序员:让你的爬虫就像人类的用户行为!
  • 前端技术周刊 2019-01-14:客户端存储
  • 使用Envoy 作Sidecar Proxy的微服务模式-4.Prometheus的指标收集
  • kubernetes资源对象--ingress
  • ​iOS实时查看App运行日志
  • #Datawhale AI夏令营第4期#AIGC文生图方向复盘
  • #pragma once与条件编译
  • #我与Java虚拟机的故事#连载06:收获颇多的经典之作
  • $HTTP_POST_VARS['']和$_POST['']的区别
  • (Qt) 默认QtWidget应用包含什么?
  • (二) 初入MySQL 【数据库管理】
  • (二刷)代码随想录第15天|层序遍历 226.翻转二叉树 101.对称二叉树2
  • (黑客游戏)HackTheGame1.21 过关攻略
  • (每日持续更新)信息系统项目管理(第四版)(高级项目管理)考试重点整理 第13章 项目资源管理(七)
  • (三)模仿学习-Action数据的模仿
  • (十)T检验-第一部分
  • (数据结构)顺序表的定义
  • (顺序)容器的好伴侣 --- 容器适配器
  • (四)Linux Shell编程——输入输出重定向
  • (转)linux自定义开机启动服务和chkconfig使用方法
  • (转载)利用webkit抓取动态网页和链接
  • .bat批处理(四):路径相关%cd%和%~dp0的区别
  • .describe() python_Python-Win32com-Excel