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,
    });
  }
})

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

机器人TF坐标系变换与一些可视化工具的应用

TF坐标在ROS中是一个非常重要的概念&#xff0c;因为机器人在做日常操作任务的时候&#xff0c;对于其所在位置和朝向是需要时刻知道的&#xff0c;而机器人是由很多节点组成的协同任务&#xff0c;对于每个部件&#xff0c;我们需要知道它的位姿(位置和朝向)&#xff0c;这使得…

React+Typescript使用接口泛型处理props

好 刚讲完组件 那么 这次 我们来看一下 数据传递的 props 还是上文的案例 例如 我们想将 title 传给Hello组件 之前我们可以直接这样 以一个标签属性的形式传过去 而我们在子组件中 这样去使用 但现在 我们从编辑器中都可以看出 这种写法已经不行了 然后 我们将 hello 组件…

Windows 11 + Ubuntu20.04 双系统 坑里爬起来

ThinkPad x390 安装双系统&#xff0c;原有的磁盘太小&#xff0c;扩充了磁盘重新装系统&#xff0c;出现的问题&#xff0c;加以记录。 1. windows和ubuntu谁先安装&#xff0c;两个都可以&#xff0c;一般建议先安装windows&#xff0c;后安装ubuntu 2. 安装windows后&…

c++--动态规划回文串问题

1.回文子串 力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 给定一个字符串 s &#xff0c;请计算这个字符串中有多少个回文子字符串。 具有不同开始位置或结束位置的子串&#xff0c;即使是由相同的字符组成&#xff0c;也会被视作不同的子串。 示…

无涯教程-Perl - time函数

描述 此函数返回自纪元以来的秒数(对于大多数系统,是1970年1月1日UTC,00:00:00&#xff1b;对于Mac OS,是1904年1月1日,00:00:00)。适用于gmtime和本地时间。 语法 以下是此函数的简单语法- time返回值 此函数返回自纪元后数秒的整数。 例 以下是显示其基本用法的示例代…

如何实现24/7客户服务自动化?建设智能客服知识库

客户自助服务是指用户通过企业或者第三方建立的网络平台或者终端&#xff0c;实现相关的自定义处理。实现客户服务自动化&#xff0c;对提高客户满意度、维持客户关系至关重要。客户服务自动化可以帮助企业以更快的速度和更高的效率来满足客户的售后服务要求&#xff0c;以进一…

ssm助学贷款系统源码和论文

ssm助学贷款系统源码和论文050 开发工具&#xff1a;idea 数据库mysql5.7 数据库链接工具&#xff1a;navcat,小海豚等 技术&#xff1a;ssm 摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&am…

使用vscode编写插件-php语言

https://blog.csdn.net/qq_45701130/article/details/125206645 一、环境搭建 1、安装 Visual Studio Code 2、安装 Node.js 3、安装 Git 4、安装生产插件代码的工具&#xff1a;npm install -g yo generator-code 二、创建工程 yo code 选择项解释&#xff1a; 选择编写扩…

JVM性能调优

java 如何跨平台&#xff0c;如何一次编译到处执行 是由于java在不同的jvm上编译&#xff0c;jvm在软件层面屏蔽不同操作系统在底层硬件与指令上的区别。 jvm 包括 new 的对象都是放在堆中 栈&#xff0c;给线程单独使用&#xff08;线程私有&#xff09;&#xff0c;存储一个…

Java-进程调度算法

文章目录 为什么要设置进程调度算法&#xff1f;分类1. 先进先出&#xff08;FIFO&#xff09;算法优缺点FIFO代码示例 2. 短作业优先&#xff08;SJF&#xff09;算法优缺点示例代码 3. 优先级算法&#xff08;Priority scheduling&#xff09;优缺点示例代码 4. 时间片轮转算…

Midjourney API 国内申请及对接方式

在人工智能绘图领域&#xff0c;想必大家听说过 Midjourney 的大名吧&#xff01; Midjourney 以其出色的绘图能力在业界独树一帜。无需过多复杂的操作&#xff0c;只要简单输入绘图指令&#xff0c;这个神奇的工具就能在瞬间为我们呈现出对应的图像。无论是任何物体还是任何风…

Docker容器与虚拟化技术:Docker consul 实现服务注册与发现

目录 一、理论 1.Docker consul 二、实验 1.consul部署 2. consul-template部署 三、总结 一、理论 1.Docker consul &#xff08;1&#xff09;服务注册与发现 服务注册与发现是微服务架构中不可或缺的重要组件。起初服务都是单节点的&#xff0c;不保障高可用性&…

解决Linux虚拟机IP无法显示的问题

目录 问题&#xff1a; 两种解决方案&#xff0c;供大家选择使用哦。 第一种解决办法&#xff1a; 第二种解决办法&#xff1a; 1、查看ens33网卡的配置 2、修改文件 扩展&#xff1a; 问题&#xff1a; Linux命令 ip a 查看ip时&#xff0c;无法显示IP的解决办法。 两…

lnmp(docker)

1. 建立工作目录 [rootdocker ~]# mkdir /opt/nginx [rootdocker ~]# cd /opt/nginx [rootdocker nginx]# rz -E rz waiting to receive. #上传 nginx 安装包 nginx-1.12.0.tar.gz[rootdocker nginx]# rz -E rz waiting to receive. #上传 wordpress 服务包 wordpress-4.9.4-z…

vscode远程调试

安装ssh 在vscode扩展插件搜索remote-ssh安装 如果连接失败&#xff0c;出现 Resolver error: Error: XHR failedscode 报错&#xff0c;可以看这篇帖子vscode ssh: Resolver error: Error: XHR failedscode错误_阿伟跑呀的博客-CSDN博客 添加好后点击左上角的加号&#xff0…

Python功能制作之简单的音乐播放器

需要导入的库&#xff1a; pip install PyQt5 源码&#xff1a; import os from PyQt5.QtCore import Qt, QUrl from PyQt5.QtGui import QIcon, QPixmap from PyQt5.QtMultimedia import QMediaPlayer, QMediaContent from PyQt5.QtWidgets import QApplication, QMainWind…

剪枝基础与实战(1): 概述

本文介绍基于L1正则化的剪枝原理,并以VGG网络进行实战说明。将从零详细介绍模型训练、稀疏化、剪枝、finetune的全过程,提供详细的源码及说明,有助于对剪枝的熟练掌握,后续也会对yolov8进行剪枝的介绍。 论文: Learning Efficient Convolutional Networks through Network …

激活函数总结(十七):激活函数补充(PELU、Phish)

激活函数总结&#xff08;十七&#xff09;&#xff1a;激活函数补充 1 引言2 激活函数2.1 Parametric Exponential Linear Unit&#xff08;PELU&#xff09;激活函数2.2 Phish激活函数 3. 总结 1 引言 在前面的文章中已经介绍了介绍了一系列激活函数 (Sigmoid、Tanh、ReLU、…

SAP S/4HANA 2022:MRP Live 和 Classic MRP新的增强BADI

翻译一篇&#xff0c;原文在SAP BLOG中如下&#xff1a; 目录 前言通过 BADIs 操作 MRP 元素新的 BadI PPH_SUPPLY_DEMAND_LISTBADI PPH_SUPPLY_DEMAND_LIST 的示例实现结论 前言 SAP S/4HANA 引入了新的 BADI PPH_SUPPLY_DEMAND_LIST&#xff0c;它允许我们在MRP Live 和 C…

2023.8.19-2023.8.XX 周报【人脸3D+虚拟服装方向基础调研-Cycle Diffusion\Diffusion-GAN\】更新中

学习目标 1. 这篇是做diffusion和gan结合的&#xff0c;可以参照一下看看能不能做cyclegan的形式&#xff0c;同时也可以调研一下有没有人follow这篇论文做了类似cyclegan的事情 Diffusion-GAN论文精读https://arxiv.org/abs/2206.02262 2. https://arxiv.org/abs/2212.06…