wx原生微信小程序入门常用总结

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

文章目录

  • 前言
  • 一、定义值和修改值
    • 1、定义值
    • 2、修改值
      • (1)代码
      • (2)代码说明
      • (3)注意点
  • 二、点击事件
  • 三、微信小程序的数据缓存(以setStorage为例使用)
    • 0、setStorageSync和setStorage的区别
    • 1、setStorage的使用
    • 2、getStorage的使用


前言

希望你能在有vue基础的情况下查看以下内容


一、定义值和修改值

1、定义值

Page({/*** 页面的初始数据*/data: {nickName: '', // 定义后在方法中使用   this.data.nickName  (用户名)avatarUrl: '', // 定义后在方法中使用   this.data.avatarUrl (用户头像url链接)},
})

2、修改值

修改值需要使用this.setData的方法才可以,如下示例

(1)代码

// pages/empower/empower.js
Page({/*** 页面的初始数据*/data: {nickName: '', // 用户名avatarUrl: '', // 用户头像的url},// 我已知晓的点击事件agreeHandle(e) {let that = this;// 获取用户的详细信息wx.getUserInfo({// 获取成功的回调方法success: function(res) {console.log('111', res);let userInfo = res.userInfo; // 用户信息// 修改数据的值that.setData({nickName: userInfo.nickName,avatarUrl: userInfo.avatarUrl});// 跳转声明详情页面wx.navigateTo({url: '../index/index?nickName=' + that.data.nickName + '&avatarUrl='+that.data.avatarUrl});}})},
})

(2)代码说明

在这里插入图片描述

(3)注意点

由于getUserInfo的成功回调里面的this是undefined,所以需要在这里使用that存储this,之后使用that.data.xxx即可使用。当然了,如果回调函数你使用的是箭头函数,就不需要存储this了。

// 箭头函数写法
success: (res)=> {this.setData({nickName: res.usrInfo.nickName,});
}

二、点击事件

 <view class="submit-button" bindtap="submitHandle">提交</view>

三、微信小程序的数据缓存(以setStorage为例使用)

0、setStorageSync和setStorage的区别

wx.setStorageSync(以sync结尾的同步缓存):https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.setStorageSync.html
wx.setStorage(没有sync结尾的异步缓存):https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.setStorage.html
相同:都是将数据存储在本地缓存指定的key中,单个key最大数据长度为 1MB,所有数据存储上限为 10MB
区别:异步就是不管保没保存成功,程序都会继续往下执行.同步是等保存成功了,才会执行下面的代码.使用异步,性能会更好;而使用同步,数据会更安全。
注意点:
(1)setStorageSync需要存储的内容,只支持原生类型、Date、及能够通过JSON.stringify序列化的对象,不能直接传入对象。 否则报错:setStorage:fail parameter error: parameter should be String instead of Object;
(2)storage 应只用来进行数据的持久化存储,不应用于运行时的数据传递或全局状态管理。启动过程中过多的同步读写存储,会显著影响启动耗时。

1、setStorage的使用

wx.setStorage({key:"nickName",data: this.data.nickName
})

2、getStorage的使用

wx.getStorage({key: 'nickName',success : (res)=> {this.setData({nickName: res.data,});}
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/102935.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

简历考察点2_《CiCi-基于Vue3.0的智能音乐分享平台》

&#xff08;1&#xff09;项目初始化和推荐页面开发&#xff1a; 重点&#xff1a;轮播图、Scroll、下拉加载方法实现、 问题一&#xff1a;轮播图实现 ① 获取轮播图数据&#xff1a;虽然找到接口了&#xff0c;但是由于XHR请求在浏览器端会有跨域的限制&#xff0c;不能直…

基于jenkins构建生成CICD环境

目录 一、安装配置jenkins 1、环境配置 2、软件要求 3、jdk安装&#xff08;我是最小化安装&#xff0c;UI自带java要先删除rm -rf /usr/local/java 4、安装jenkins-2.419-1.1 二、Jenkins配置 1、修改jenkins初始密码 2、安装 Jenkins 必要插件 3、安装 Publish Over SS…

一生一芯8——在github上添加ssh key

为在github上下载代码框架&#xff0c;这里在github上使用ssh key进行远程连接&#xff0c;方便代码拉取 参照博客https://blog.csdn.net/losthief/article/details/131502734 本机 系统ubuntu22.04 git 版本2.34.1 本人是第一次配置&#xff0c;没有遇到奇奇怪怪的错误&…

DockerFile解析

1. 是什么 Dockerfile是田来构建Docker镜像的文本文件&#xff0c;是由一条条构建镜像所需的指令和参数构成的脚本 1.1 概述 1.2 官网 Dockerfile reference | Docker Documentation 1.3 构建三步骤 1. 编写dockerfile文件 2. docker build命令构建镜像 3. docker run依镜像运…

基于Opencv的虚拟拖拽项目

预备知识 勾股定理 跟随移动算法 手势识别图解 项目源代码 """ 演示一个简单的虚拟拖拽 步骤&#xff1a; 1、opencv 读取视频流 2、在视频图像上画一个方块 3、通过mediapipe库获取手指关节坐标 4、判断手指是否在方块上 5、是&#xff0c;方块跟着移动 6、…

微服务中间件--统一网关Gateway

统一网关Gateway 8.统一网关Gatewaya.搭建网关服务b.路由断言工厂c.路由过滤器GatewayFilterd.全局过滤器GlobalFiltere.过滤器的执行顺序f.网关的cors跨域配置 8.统一网关Gateway 网关功能&#xff1a; 身份认证和权限校验服务路由、负载均衡请求限流 网关的技术实现 在Spr…

Docker容器与虚拟化技术:GitHub账户注册

目录 一、实验 1.GitHub 一、实验 1.GitHub &#xff08;1&#xff09;GitHub是一个面向开源及私有软件项目的托管平台&#xff0c;因为只支持Git作为唯一的版本库格式进行托管&#xff0c;故名GitHub。 &#xff08;2&#xff09;官网 GitHub: Let’s build from here …

微服务中间件--MQ

MQ MQa.安装RabbitMQb.消息模型c.SpringAMQP发送和接收d.WorkQueue模型e.发布订阅模型1) FanoutExchange2) DirectExchange3) TopicExchange f.消息转换器 MQ 同步调用的问题 微服务间基于Feign的调用就属于同步方式&#xff0c;存在一些问题。 耦合度高&#xff1a;每次加入…

【FAQ】云存储EasyCVR视频汇聚平台分发rtsp流时,出现“用户已过期”提示该如何解决?

视频云存储/安防监控EasyCVR视频汇聚平台基于云边端智能协同&#xff0c;支持海量视频的轻量化接入与汇聚、转码与处理、全网智能分发、视频集中存储等。音视频流媒体视频平台EasyCVR拓展性强&#xff0c;视频能力丰富&#xff0c;具体可实现视频监控直播、视频轮播、视频录像、…

在当今信息化社会中的安全大文件传输

随着科技的不断进步&#xff0c;数据已经成为各个领域和行业的宝贵财富。然而&#xff0c;随之而来的数据传输和交换问题也成为一个日益突出的挑战。在这篇文章中&#xff0c;我们将探讨在当今信息化社会中的安全大文件传输的重要性&#xff0c;以及如何应对传统传输方式所面临…

【C++】—— 简述C++11新特性

序言&#xff1a; 从本期开始&#xff0c;我将会带大家学习的是关于C11 新增的相关知识&#xff01;废话不多说&#xff0c;我们直接开始今天的学习。 目录 &#xff08;一&#xff09;C11简介 &#xff08;二&#xff09;统一的列表初始化 1、&#xff5b;&#xff5d;初始…

类与对象(中)

类与对象&#xff08;中&#xff09; 一、类的六个默认成员函数二、构造函数1、概念2、代码3、特点4、编译器生成的默认构造函数的作用&#xff08;1&#xff09;内置类型&#xff08;基本类型&#xff09;和自定义类型的概念&#xff08;2&#xff09;作用&#xff08;3&#…

(WAF)Web应用程序防火墙介绍

&#xff08;WAF&#xff09;Web应用程序防火墙介绍 1. WAF概述 ​ Web应用程序防火墙&#xff08;WAF&#xff09;是一种关键的网络安全解决方案&#xff0c;用于保护Web应用程序免受各种网络攻击和威胁。随着互联网的不断发展&#xff0c;Web应用程序变得越来越复杂&#x…

2021年03月 C/C++(四级)真题解析#中国电子学会#全国青少年软件编程等级考试

第1题&#xff1a;酒鬼 Santo刚刚与房东打赌赢得了一间在New Clondike 的大客厅。今天&#xff0c;他来到这个大客厅欣赏他的奖品。房东摆出了一行瓶子在酒吧上。瓶子里都装有不同体积的酒。令Santo高兴的是&#xff0c;瓶子中的酒都有不同的味道。房东说道&#xff1a;“你可以…

机器学习深度学习——针对序列级和词元级应用微调BERT

&#x1f468;‍&#x1f393;作者简介&#xff1a;一位即将上大四&#xff0c;正专攻机器学习的保研er &#x1f30c;上期文章&#xff1a;机器学习&&深度学习——NLP实战&#xff08;自然语言推断——注意力机制实现&#xff09; &#x1f4da;订阅专栏&#xff1a;机…

游戏开发服务器选型的横向对比

来源一个某乎的作者&#xff0c;貌似来自台湾 上篇介绍了go版本的游戏服务器&#xff0c;这篇介绍下其它语言版本&#xff1a; SkynetkbengineNoahGameFramePomeloPinusET使用的语言C/LuaCCNodejsTypeScriptC#概述云风前辈开源的框架mmo框架server一个快速的、可扩展的、分布…

win11出现安全中心空白和IT管理员已限制对此应用的某些区域的访问

问题 windows安全中心服务被禁用 winr 输入services.msc 找到windows安全中心服务查看是否被禁用&#xff0c;改为启动&#xff0c;不可以改动看第三条 打开设置&#xff0c;找到应用—windows安全中心–终止–修复–重置 重启如果还是不行看第四条 家庭版系统需要打开gped…

我是怎么从0到1搭建性能门禁系统的

背景 页面的性能对于用户的体验起着至关重要的作用&#xff0c;根据Mobify 研究发现&#xff0c;首页加载时间每减少100 毫秒&#xff0c;用户留存率就会增加1.11%。所以做好页面的性能优化&#xff0c;对于网站来说是一个非常重要的步骤。 在解决问题之前需要度量问题&#x…

期权分仓开户资金是否安全?具体保障措施有哪些?

网上关于期权分仓系统的真假一直都没有定论&#xff0c;两方人的争论也让很多没有接触过期权分仓系统的人摸不着头脑&#xff0c;那么期权分仓靠谱吗&#xff1f;资金在里面安全吗&#xff1f;下文为大家科普期权分仓开户资金是否安全?具体保障措施有哪些&#xff1f; 一、期权…

arm:day9

1。思维导图 2..I2C实验&#xff0c;检测温度和湿度 iic.h #ifndef __IIC_H__ #define __IIC_H__ #include "stm32mp1xx_gpio.h" #include "stm32mp1xx_rcc.h" #include "gpio.h" /* 通过程序模拟实现I2C总线的时序和协议* GPIOF ---> AHB4…