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

news2024/11/25 16:34:59

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

文章目录

  • 前言
  • 一、定义值和修改值
    • 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.coloradmin.cn/o/912749.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

油耳朵适合戴什么类型耳机好,适合油耳的无线耳机推荐

传说中的骨传导耳机&#xff0c;相信大家都不陌生吧&#xff01;近年来&#xff0c;这种耳机以其不需要插入耳朵、不会堵塞耳道的特点&#xff0c;在耳机圈内迅速崛起。然而&#xff0c;还有一些人对骨传导耳机望而却步&#xff0c;不知道如何选择适合自己的产品。作为一位骨传…

信息管理系统三级等保的一些要求

一、前言 在做一些互联网系统或面向互联网的系统时&#xff0c;需要进行备案&#xff0c;需要满足网络信息安全维护规章及有关规章制度要求&#xff0c;才能发布到互联网。所以在做系统的需求分析时&#xff0c;往往需要把信息管理系统三级等保的需求加上&#xff0c;方便开发…

Effective C++条款09——绝不在构造和析构过程中调用virtual 函数(构造/析构/赋值运算)

本条款开始前我要先阐述重点:你不该在构造函数和析构函数期间调用virtual函数&#xff0c;因为这样的调用不会带来你预想的结果&#xff0c;就算有你也不会高兴。如果你同时也是一位Java或C#程序员&#xff0c;请更加注意本条款&#xff0c;因为这是CH与它们不相同的一个地方。…

斗鱼财报盈利的背后:左手艳舞、右手擦边

本月14日&#xff0c;直播平台斗鱼发布了其第二季度财报&#xff0c;面对“看起来还不错的数据”&#xff0c;其对外着重强调了“连续两个季度实现盈利”&#xff0c;并称“斗鱼收入结构持续优化”“斗鱼盈利能力提升”“斗鱼稳健增长可期”“督导提升了内容审核能力”。 财报…

【C++STL基础入门】深入浅出string类查找字串、返回字串和交换操作

文章目录 前言一、查找字串二、返回字串三、交换字串四、运算符重载总结 前言 本STL使用VS2022C20版本 C标准库&#xff08;Standard Template Library&#xff0c;简称STL&#xff09;是C中非常强大和常用的一组容器、算法和函数模板&#xff0c;它能大大简化程序开发和提高…

MySQL高级篇——MySQL架构篇2(MySQL的数据目录)

目录 1 MySQL8的主要目录结构1.1 数据库文件的存放路径1.2 相关命令目录1.3 配置文件目录 2 数据库和文件系统的关系2.1 查看默认数据库2.2 数据库在文件系统中的表示2.3.1 InnoDB存储引擎模式2.3.2 MyISAM存储引擎模式 2.4 总结2.5 视图在文件系统中的表示2.6 其他的文件 1 My…

【Linux】vim编辑器

这一趴我们要学习vim编辑器&#xff0c;知道vim是什么、掌握它的3种模式以及学会其常见操作。 目录 Ⅰ. 引入 Ⅱ. 什么是vim&#xff1f; Ⅲ. 3种模式 Ⅳ. 常见操作 命令模式下 复制粘贴组 撤销组 光标定位组 光标移动组 剪切组 切换、替换组 删除组 底行模式下 …

AI+游戏线下沙龙活动暨COC上海城市开发者社区8月活动

引言 近年来&#xff0c;随着人工智能技术的不断发展和游戏开发技术的不断更新&#xff0c;越来越多的游戏公司开始将人工智能技术应用于游戏领域&#xff0c;以提高开发效率、降低成本&#xff0c;实现游戏玩家更好的游戏体验。为了探讨AI游戏的技术实践经验&#xff0c;近日在…

Spring Cloud Alibaba笔记

&#x1f600;&#x1f600;&#x1f600;创作不易&#xff0c;各位看官点赞收藏. 文章目录 Spring Cloud Alibaba 笔记1、Nacos 服务注册和配置中心1.1、Nacos 之下载启动1.2、Nacos 之注册中心1.3、Nacos 之服务发现1.4、Nacos 之配置中心1.5、Nacos 之分类配置1.6、Nacos 之…

【OpenGauss源码学习 —— 执行算子(Result 算子)】

执行算子&#xff08;Result 算子&#xff09; 控制算子Result 算子ExecInitResult 函数ResultState 结构体ExecInitResultTupleSlot 函数ExecAllocTableSlot函数 ExecResult 函数TupleTableSlot 结构体ExecProcNode 函数ExecProcNodeByType 函数ExecProject 函数 ExecEndResul…

docker版jxTMS使用指南:使用jxTMS提供数据

本文讲解了如何jxTMS的数据访问框架&#xff0c;整个系列的文章请查看&#xff1a;docker版jxTMS使用指南&#xff1a;4.4版升级内容 docker版本的使用&#xff0c;请查看&#xff1a;docker版jxTMS使用指南 4.0版jxTMS的说明&#xff0c;请查看&#xff1a;4.0版升级内容 4…

韶音的骨传导耳机怎么样,韶音骨传导耳机是真的骨传导吗

韶音骨传导耳机最为受瞩目的是OpenRun Pro&#xff0c;在发声单元位置上采用了开孔的处理&#xff0c;佩戴上耳的时候发声单元可以贴合耳道&#xff0c;在低频延伸性&#xff0c;但在中高频的时候整体会出现震感&#xff0c;纤细的耳挂在佩戴的时候是有着不错的舒适度的&#x…

Java SpringBoot+Vue 的班级综合测评管理系统的设计与实现(2.0 版本)

文章目录 1. 简介2. 技术栈 3. 需求分析用户需求分析功能需求分析系统性能需求分析 4系统总体设计与实现4.1总体设计 5 系统功能的详细设计与实现5.1 管理员功能模块5.2学生功能模块5.3教师功能模块 源码下载地址 1. 简介 传统的班级综合测评管理系统&#xff0c;一开始都是手工…

Django实现音乐网站 ⒀

使用Python Django框架制作一个音乐网站&#xff0c; 本篇主要是推荐页-推荐排行榜、推荐歌手功能开发。 目录 推荐页开发 推荐排行榜 单曲表增加播放量 表模型增加播放量字段 执行表操作 模板中显示外键对应值 表模型外键设置 获取外键对应模型值 推荐排行榜视图 推…

基于web的鲜花商城系统java jsp网上购物超市mysql源代码

本项目为前几天收费帮学妹做的一个项目&#xff0c;Java EE JSP项目&#xff0c;在工作环境中基本使用不到&#xff0c;但是很多学校把这个当作编程入门的项目来做&#xff0c;故分享出本项目供初学者参考。 一、项目描述 基于web的鲜花商城系统 系统有2权限&#xff1a;前台…

HCIA---访问控制列表

文章目录 目录 前言 一.ACL简介&#xff1a; 二.ACL工作原理 ACL组成&#xff1a; ​编辑 规则编号&#xff1a; ACL匹配规则&#xff1a; 总结 前言 一.ACL简介&#xff1a; ACL全称为Access Control List&#xff0c;即访问控制表&#xff0c;是一种用于控制网络资源访问…

微软韦青:滑向冰球将要到达的位置 | 科创人数智思维私董会第9期回顾

2023年8月5日&#xff0c;由科创人、北航投资联手创办的科创人数智思维私董会第9期圆满举行。 微软&#xff08;中国&#xff09;首席技术官韦青担任本次活动引导嘉宾&#xff0c;近20位来自传统企业、科创企业、投资机构的CEO、技术决策者及领域专家&#xff0c;围绕新人-机时…

【技术篇】• 饮用水除硝酸盐、地下水除砷、矿泉水除溴的技术汇总

我们所说的“自来水”是指从水龙头里放出来的水。但从水龙头里放出来并不等于安全卫生。实际上&#xff0c;原水必须经过各种处理措施之后才能称为安全卫生的饮用水。每一滴水都要经过了混凝、沉淀、过滤、消毒四个步骤的处理&#xff0c;才能去除杂质和细菌&#xff0c;变得安…

恒运资本:简易程序定增是什么意思?

近年来&#xff0c;在我国股市中&#xff0c;简易程序定增成为了一种受欢迎的融资方法。许多人听过它但并不知道它的含义和工作原理。在本文中&#xff0c;我们将从多个角度来分析简易程序定增。 一、什么是简易程序定增&#xff1f; 简易程序定增是指在不需求经过股东大会批阅…

这6本期刊不再被收录!8月SCISSCI期刊目录已更新~

【SciencePub学术】2023年8月21日&#xff0c;科睿唯安更新了Web of Science核心期刊目录。 此次更新后SCIE期刊目录共包含9496本期刊&#xff0c;SSCI期刊目录共包含3554本期刊。此次SCIE & SSCI期刊目录更新&#xff0c;与上次更新&#xff08;2023年7月&#xff09;相比…