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

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.lryc.cn/news/136451.html

相关文章:

  • 制作一个专属于安防监控业的小程序商城
  • 基于java羽毛球馆管理系统设计与实现
  • 安装elasticsearch8.9.0及修改配置
  • 如何构建高效的接口自动化测试框架?看完你就会了...
  • 53 | 金融行业股票销售指标分析
  • qiuzhiji1
  • 使用VisualStudio制作上位机(二)
  • Datawhale AI夏令营 - 用户新增预测挑战赛 | 学习笔记
  • HarmonyOS/OpenHarmony(Stage模型)卡片开发AbilityStage组件容器
  • 利用torchvision库实现目标检测与语义分割
  • 基于决策树(Decision Tree)的乳腺癌诊断
  • 前端面试的计算机网络部分(2)每天10个小知识点
  • 【LeetCode】224. 基本计算器
  • 服务器数据恢复-EVA存储磁盘故障导致存储崩溃的数据恢复案例
  • 【stylus】通过css简化搜索页面样式
  • 【官方中文文档】Mybatis-Spring #使用 SqlSession
  • Redis三种持久化方式详解
  • 17.2 【Linux】通过 systemctl 管理服务
  • 第 7 章 排序算法(3)(选择排序)
  • Less文件可以做哪些复杂操作
  • HTML5岗位技能实训室建设方案
  • 【Linux】GNOME图形化界面安装
  • 大数据课程J3——Scala的类定义
  • Ribbon:使用Ribbon实现负载均衡
  • 最新最全的~教你如何搭建高可用Lustre双机集群
  • 深入浅出Pytorch函数——torch.nn.init.uniform_
  • 会员管理系统实战开发教程02-H5应用创建
  • 记一次由于整型参数错误导致的任意文件上传
  • spring之Spring Security - 实现身份验证与授权
  • 【Unity3D赛车游戏】【二】如何制作一个真实模拟的汽车