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

news/2024/7/20 0:51:34 标签: 微信小程序, notepad++, 小程序

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

文章目录

  • 前言
  • 一、定义值和修改值
    • 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.niftyadmin.cn/n/4961123.html

相关文章

RPC和HTTP协议

RPC 全称&#xff08;Remote Procedure Call&#xff09;&#xff0c;它是一种针对跨进程或者跨网络节点的应用之间的远程过程调用协议。 它的核心目标是&#xff0c;让开发人员在进行远程方法调用的时候&#xff0c;就像调用本地方法一样&#xff0c;不需要额外为了完成这个交…

【授权mysql某一个用户只读权限】

GRANT SELECT ON FPSSATURN.* TO dbmonopr02%;GRANT SELECT ON 数据库名.* TO 用户名%; 你提供的SQL查询是在数据库FPSSATURN中的所有表上授予用户dbmonopr02&#xff08;来自任何主机&#xff0c;%表示任何主机都允许&#xff09;SELECT权限。 以下是查询的分解说明&#xff…

Dockerfile文件详细

Dockerfile 是一个文本文件&#xff0c;里面包含组装新镜像时用到的基础镜像和各种指令&#xff0c;使用dockerfile 文件来定义镜像&#xff0c;然后运行镜像&#xff0c;启动容器。 dockerfile文件的组成部分 一个dockerfile文件包含以下部分&#xff1a; 基础镜像信息&…

中国芯,寻找新赛道迫在眉睫

北京华兴万邦管理咨询有限公司 商瑞 陈皓 近期国内半导体行业的热点可以用两个“有点多”来描述&#xff0c;一个是中国芯群体中上市公司股价闪崩的有点多&#xff0c;另一个是行业和企业的活动有点多。前者说明了许多国内芯片设计企业&#xff08;fabless商业模式&#xff09;…

LLMs高效的多 GPU 计算策略Efficient multi-GPU compute strategies

很有可能在某个时候&#xff0c;您需要将模型训练工作扩展到超过一个GPU。在上一个视频中&#xff0c;我强调了当您的模型变得太大而无法适应单个GPU时&#xff0c;您需要使用多GPU计算策略。但即使您的模型确实适合单个GPU&#xff0c;使用多个GPU加速训练也有好处。即使您正在…

【vue】el-table 数据更新后,刷新表格数据

表格里面的数据更新后&#xff0c;可以通过以下方法来刷新表格 方法1 用更新后的数据&#xff0c;覆盖之前的数据 var newTableData[];for(var i0;i<that.tableData.length;i){ if(aIdthat.selectStationId&&bIdthat.selectDeviceId){that.tableData[i].physica…

前端需要理解的HTML知识

HTML&#xff08;超文本标记语言&#xff0c;HyperText Markup Language&#xff09;不是编程语言&#xff0c;而是定义了网页内容的含义和结构的标记语言。。“超文本”&#xff08;hypertext&#xff09;是指连接单个网站内或多个网站间的网页的链接。HTML 使用“标记”&…

LoRa 网络的高效自适应数据链路层架构

介绍 LoRa 是用于实现物联网的最流行的低功耗无线网络技术之一,与 Zigbee 或蓝牙等技术相比,其优点是提供远距离通信,但数据速率较低。LoRa 是一种单通道物理层技术,LoRaWAN 在此基础上实现了更复杂的多通道网络,并具有增强的功能,例如自适应数据速率。然而,LoRaWAN 依赖…