微信小程序开发学习笔记——3.2page内的onload及data差值表达式

news2024/9/22 22:37:27

>>跟着b站up主“咸虾米_”学习微信小程序开发中,把学习记录存到这方便后续查找。

课程连接:https://www.bilibili.com/video/BV19G4y1K74d?p=16&vd_source=9b149469177ab5fdc47515e14cf3cf74

一、注册页面

https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html

二、页面和全局的App.js进行交互例子

1、App.js文件内代码

App({

  onLaunch: function () {
    console.log("初始化项目");
    this.globalData.name='咸虾米'
  },

  onShow: function (options) {
    console.log("onShow触发了")
  },

  onHide: function () {
    console.log("onHide触发了")
  },

  onError: function (msg) {
    
  },
  globalData:{
    name:"weixin"
  } 
})

2、index.js文件内代码

在onload中对globalData的name进行了修改

const app=getApp();
Page({

  data: {
    
  },

  onLoad: function (options) {
    console.log("index内的onload")
    app.globalData.name="高启强"
  },

  onReady: function () {
    
  },

  onShow: function () {
    
  },

  onHide: function () {
    
  },

  onUnload: function () {
    
  },

  onPullDownRefresh: function () {
    
  },

  onReachBottom: function () {
    
  },

  onShareAppMessage: function () {
    
  }
})

3、demo.js文件内代码

前两行对globalData的name进行了调用和打印

const app=getApp()
console.log(app.globalData.name);
Page({
  data: {
  },

  onLoad(options) {
  },

  onReady() {
  },

  onShow() {
  },

  onHide() {
  },

  onUnload() {
  },

  onPullDownRefresh() {
  },

  onReachBottom() {
  },

  onShareAppMessage() {
  }
})

4、操作

刷新首页后控制台打印如下,此时index.js中的onload已经被执行,globalData的name已经改为高启强。然后点击首页的“go demo page”。

 跳转到demo页面,此时demo.js中前两行调用和打印globalData.name的代码也执行了,于是控制台打印了“高启强”

三、 data差值表达式

格式:{{...}}

1、在data.wxml中调用data.js中的name

<!--pages/data/data.wxml-->
<text>pages/data/data.wxml</text>

<view>
  我的名字是:{{name}}
</view>

data.js文件的data部分:

Page({
  /**
   * 页面的初始数据
   */
  data: {
    name:"张三"
  }
// 此处省略后面的属性
})

 

2、修改name

 设定一个定时器。在定时到期以后执行注册的回调函数

setTimeout(()=>{操作},时间)

修改data中的数据,必须用this.setData({ }),用 this.name="李四" 是错的。在data.js文件中page下的onload中进行修改。

// pages/data/data.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    name:"张三"
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    setTimeout(()=>{ 
      this.setData({name:"李四"})
    },2000) //如此设置,默认的张三,延迟两秒之后才显示李四
// 此处省略后面的属性
})

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

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

相关文章

C#之WPF学习之路(2)

目录 控件的父类 DispatcherObject类 DependencyObject类 DependencyObject 类的关键成员和方法 Visual类 Visual 类的主要成员和方法 UIElement类 UIElement 类的主要成员和功能 FrameworkElement类 FrameworkElement 类的主要成员和功能 控件的父类 在 WPF (Windo…

idea 打不开项目 白屏

使用IDEA打开项目&#xff0c; 不知名原因崩溃了&#xff0c; 直接出现缩略图白屏。 解决过程&#xff1a; 尝试过重启IDEA&#xff0c;重启过电脑&#xff0c;重新引入相同项目&#xff08;使用不同路径&#xff0c;存在缓存记录&#xff0c;依然打不开&#xff09;&#xff…

亿道丨三防平板pad丨三防平板是指哪三防丨三防工业级平板电脑

三防工业级平板电脑成为许多行业中的重要工具。本文将介绍三防工业级平板电脑的特点以及其在各个领域中的广泛应用。 三防工业级平板电脑的特点 三防工业级平板电脑是指具备防水、防尘和防震功能的平板电脑。这些特点使得它们能够在恶劣环境中工作&#xff0c;如沙尘飞扬的工地…

easyexcel写入long类型数据精度丢失

1. 前言 在使用easyExcel导出Excel中 发现 long类型的数据格式精度丢失了 问题如下 尾数都成了00000 精度发生了丢失 2. 解决 将long类型的字段转成String 写入到Excel中增加解析器 LongStringConverter 例如 /*** 文件导出** param outputStream outputStream* param cla…

【Rust敲门砖】 Windows环境下配置及安装环境

一、安装C环境 rust底层是依赖C环境的连接器&#xff0c;所以需要先安装C/C编译环境, 有两种选择:安装微软的msvc或者安装mingw/cygwin。 如果使用msvc的Visual Studio&#xff0c;只需要安装好C/C编译环境,然后一路默认就行了&#xff0c;缺点是体积比较大&#xff0c;下载安…

外包干了3个月,技术退步明显

先说一下自己的情况&#xff0c;本科生&#xff0c;19年通过校招进入广州某软件公司&#xff0c;干了接近4年的功能测试&#xff0c;今年年初&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了四年的功能测试…

深度学习神经网络实战:多层感知机,手写数字识别

目的 利用tensorflow.js训练模型&#xff0c;搭建神经网络模型&#xff0c;完成手写数字识别 设计 简单三层神经网络 输入层 28*28个神经原&#xff0c;代表每一张手写数字图片的灰度隐藏层 100个神经原输出层 -10个神经原&#xff0c;分别代表10个数字 代码 // 导入 Ten…

SQL Server —— While语句循环

一&#xff1a;简介 while 循环是有条件的循环控制语句。满足条件后&#xff0c;再执行循环体中的SQL语句。 while: break, 如果有多条语句可以在while后面添加begin-end。关于while的语法 while(条件) -- begin -- 语句1 -- 语句2 -- break 根据情况是否添加break -- end 二…

LeetCode LCR 055.二叉搜索树迭代器

实现一个二叉搜索树迭代器类BSTIterator &#xff0c;表示一个按中序遍历二叉搜索树&#xff08;BST&#xff09;的迭代器&#xff1a; BSTIterator(TreeNode root) 初始化 BSTIterator 类的一个对象。BST 的根节点 root 会作为构造函数的一部分给出。指针应初始化为一个不存在…

音视频技术-声反馈啸叫的产生与消除

目录 1.均衡调节: 2.移频法: 3.移相法: 4.比较法: 在扩音系统中,产生啸叫危害很大,一方面影响会议、演出等活动的正常进行,另一方面严重的啸叫会导致音响设备的损坏。 “啸叫”是“声反馈”的俗称,形成的机制复杂,消除的手段多样,专业调音师也对

RSA之前端加密后端解密

RSA之前端加密后端解密 RSA加密解密方式有&#xff1a; &#xff08;1&#xff09;公钥加密&#xff0c;私钥解密&#xff1b; &#xff08;2&#xff09;私钥加密&#xff0c;公钥解密&#xff1b; 此文章中以下我使用的是前端公钥加密&#xff0c;后端私钥解密&#xff1b; …

Springboot集成Druid实现监控功能

Druid是阿里巴巴开发的号称为监控而生的数据库连接池&#xff0c;在功能、性能、扩展性方面&#xff0c;都超过其他数据库连接池&#xff0c;包括DBCP、C3P0、BoneCP、Proxool、JBoss DataSource等等等&#xff0c;秒杀一切。Druid可以很好的监控DB池连接和SQL的执行情况&#…

信息安全工程师 软考回顾(一)

&#x1f433;概述 图源&#xff1a;文心一言 信息安全证书已经考了一年有余&#xff0c;尽管我目前没有从业安全的打算&#xff0c;况且自己的实践能力与从业标准依然有所差距&#xff0c;但其中的内容也值得再温习一遍~&#x1f95d;&#x1f95d; 另外&#xff0c;如果你对…

妨碍有效沟通的5种认知谬误

在沟通过程中&#xff0c;某些认知谬误会让我们看不到真实的信息&#xff0c;做出错误的沟通行为&#xff0c;既伤害到自己和别人&#xff0c;又无法达成真正的沟通意图。本文介绍了5种认知谬误&#xff0c;如果在沟通过程中能够有效识别并克服这些谬误&#xff0c;就可以达成更…

【MySQL系列 03】事务隔离:为什么你改了我还看不见?

事务 今天的文章里&#xff0c;我会以 InnoDB 为例&#xff0c;剖析 MySQL 在事务支持方面的特定实现&#xff0c;并基于原理给出相应的实践建议&#xff0c;希望这些案例能加深你对 MySQL 事务原理的理解。 说到事务&#xff0c;银行应用是解释事务必要性的一个经典例子&…

STL - hash

1、unordered系列关联式容器 在C98中&#xff0c;STL提供了底层为红黑树结构的一系列关联式容器&#xff0c;在查询时效率可达到O()&#xff0c;即最差情况下需要比较红黑树的高度次&#xff0c;当树中的节点非常多时&#xff0c;查询效率也不理想。最好 的查询是&#xff0c;进…

Java面试题之分布式/微服务篇

经济依旧不景气啊&#xff0c;如此大环境下Java还是这么卷&#xff0c;又是一年一次的金三银四。 兄弟们&#xff0c;你准备好了吗&#xff1f;冲冲冲&#xff01;欧里给&#xff01; 分布式/微服务相关面试题解 题一&#xff1a;CAP理论&#xff0c;BASE理论题二&#xff1a;…

智慧餐饮系统架构的设计与实现

随着科技的不断发展&#xff0c;智慧餐饮系统在餐饮行业中扮演着越来越重要的角色。智慧餐饮系统整合了信息技术&#xff0c;以提高餐饮企业的管理效率、客户服务质量和市场竞争力。本文将探讨智慧餐饮系统架构的设计与实现&#xff0c;并探讨其在餐饮行业中的应用前景。 架构…

Spring框架@Autowired注解进行字段时,使用父类类型接收子类变量,可以注入成功吗?(@Autowired源码跟踪)

一、 前言 平常我们在使用spring框架开发项目过程中&#xff0c;会使用Autowired注解进行属性依赖注入&#xff0c;一般我们都是声明接口类型来接收接口实现变量&#xff0c;那么使用父类类型接收子类变量&#xff0c;可以注入成功吗&#xff1f;答案是肯定可以的&#xff01;…

springboot访问webapp下的jsp页面

一&#xff0c;项目结构。 这是我的项目结构&#xff0c;jsp页面放在WEB-INF下的page目录下面。 二&#xff0c;file--->Project Structure,确保这两个地方都是正确的&#xff0c;确保Source Roots下面有webapp这个目录&#xff08;正常来说&#xff0c;应该本来就有&#…