【微信小程序前端开发】入门Day03 —— 页面导航、事件、生命周期、WXS 脚本及自定义组件

1. 页面导航

  • 导航方式

    • 声明式导航:使用<navigator>组件实现页面跳转。

      <!-- 导航到tabBar页面 -->
      <navigator url="/pages/message/message" open-type="switchTab">导航到消息页面</navigator><!-- 导航到非tabBar页面 -->
      <navigator url="/pages/info/info" open-type="navigate">导航到info页面</navigator><!-- 后退导航 -->
      <navigator open-type='navigateBack' delta='1'>返回上一页</navigator>
      • 跳转到tabBar页面:需指定url属性(以/开头)和open-type="switchTab"
      • 跳转到非tabBar页面:指定url属性(以/开头),open-type="navigate"(可省略)。
      • 后退导航:指定open-type="navigateBack"delta属性(后退层级,可省略)。
    • 编程式导航:调用小程序的导航 API 实现页面跳转。

      // 导航到tabBar页面
      Page({gotoMessage() {wx.switchTab({url: '/pages/message/message'})}
      })// 导航到非tabBar页面
      Page({gotoInfo() {wx.navigateTo({url: '/pages/info/info'})}
      })// 后退导航
      Page({gotoBack() {wx.navigateBack()}
      })
      • 跳转到tabBar页面:调用wx.switchTab方法,传入包含url等属性的对象。
      • 跳转到非tabBar页面:调用wx.navigateTo方法,传入包含url等属性的对象。
      • 后退导航:调用wx.navigateBack方法,可传入delta属性。
  • 导航传参

    • 声明式导航传参:navigator组件的url属性后面携带参数,格式为?参数键=参数值&参数键=参数值

      <!-- 声明式导航传参 -->
      <navigator url="/pages/info/info?name=zs&age=20">跳转到info页面</navigator>
    • 编程式导航传参:调用wx.navigateTo方法跳转页面时,url属性中携带参数。

      // 编程式导航传参
      Page({gotoInfo2() {wx.navigateTo({url: '/pages/info/info?name=ls&gender=男'})}
      })
    • onLoad中接收导航参数:通过options对象获取传递过来的参数。

      // 在onLoad中接收导航参数
      Page({onLoad: function (options) {console.log(options)}
      })

2. 页面事件

  • 下拉刷新事件

    // 全局开启下拉刷新(app.json示例)
    {"window": {"enablePullDownRefresh": true}
    }// 局部开启下拉刷新(页面.json示例)
    {"enablePullDownRefresh": true
    }// 配置下拉刷新窗口的样式(页面.json示例)
    {"backgroundColor": "#ffffff","backgroundTextStyle": "dark"
    }// 监听页面的下拉刷新事件
    Page({data: {count: 0},onPullDownRefresh: function () {this.setData({count: 0})wx.stopPullDownRefresh()},countAdd() {this.setData({count: this.data.count + 1})}
    })
    • 启用下拉刷新

      • 全局开启:在app.jsonwindow节点中,将enablePullDownRefresh设置为true
      • 局部开启:在页面的.json配置文件中,将enablePullDownRefresh设置为true(推荐)。
    • 配置下拉刷新窗口的样式:通过backgroundColor(16 进制颜色值)和backgroundTextStyledarklight)配置。
    • 监听页面的下拉刷新事件:在页面的.js文件中,通过onPullDownRefresh函数监听,可重置数据并手动停止下拉刷新(wx.stopPullDownRefresh)。
  • 上拉触底事件

    // 监听页面的上拉触底事件
    Page({onReachBottom: function () {console.log("触发了上拉触底的事件")}
    })// 配置上拉触底距离(页面.json示例)
    {"onReachBottomDistance": 80
    }
    • 监听页面的上拉触底事件:在页面的.js文件中,通过onReachBottom函数监听。
    • 配置上拉触底距离:在全局或页面的.json配置文件中,通过onReachBottomDistance属性配置,默认50px
    • 上拉触底案例
      // 上拉触底案例
      Page({data: {colorList: []},onLoad: function (options) {this.getColors()},onReachBottom: function () {this.getColors()},getColors() {wx.showLoading({title: "数据加载中..."})wx.request({url: 'https://www.escook.cn/api/color',method: 'GET',success: ({ data: res }) => {this.setData({colorList: [...this.data.colorList,...res.data]})},complete: () => {wx.hideLoading()}})}
      })
      • 案例效果展示:加载随机颜色数据,上拉触底加载更多。
      • 实现步骤:定义获取随机颜色方法、页面加载时获取初始数据、渲染 UI 结构、上拉触底时调用方法、添加loading提示效果、对上拉触底进行节流处理。

3. 生命周期

  • 生命周期概念:指一个对象从创建到运行再到销毁的整个阶段。小程序的生命周期包括应用生命周期(启动到关闭)和页面生命周期(加载到卸载)。
  • 生命周期函数:由小程序框架提供的内置函数,伴随生命周期自动按次序执行。
    • 应用的生命周期函数:在app.js中声明,包括onLaunch(初始化完成时触发)、onShow(启动或从后台进入前台显示时触发)、onHide(从前台进入后台时触发)。
      App({onLaunch: function (options) {// 小程序初始化完成时,可做一些初始化工作},onShow: function (options) {// 小程序启动,或从后台进入前台显示时触发},onHide: function () {// 小程序从前台进入后台时触发}
      })
    • 页面的生命周期函数:在页面的.js文件中声明,包括onLoad(监听页面加载,只调用 1 次)、onShow(监听页面显示)、onReady(监听页面初次渲染完成,只调用 1 次)、onHide(监听页面隐藏)、onUnload(监听页面卸载,只调用 1 次)。
      Page({onLoad: function (options) {// 监听页面加载,一个页面只调用1次},onShow: function () {// 监听页面显示},onReady: function () {// 监听页面初次渲染完成,一个页面只调用1次},onHide: function () {// 监听页面隐藏},onUnload: function () {// 监听页面卸载,一个页面只调用1次}
      })

4. WXS 脚本

  • 概述

    • 定义:小程序独有的一套脚本语言,结合WXML构建页面结构。
    • 应用场景:典型应用场景是 “过滤器”,因为wxml中无法调用页面.js中定义的函数,但可调用wxs中定义的函数。
    • 与 JavaScript 的关系
      • 有自己的数据类型。
      • 不支持类似于ES6及以上的语法形式,支持类似于ES5的语法。
      • 遵循CommonJS规范。
  • 基础语法

    • 内嵌 wxs 脚本:编写在wxml文件中的<wxs>标签内,需提供module属性。
      <view>{m1.toUpper(username)}</view>
      <wxs module="m1">// 将文本转为大写形式zs->ZSmodule.exports.toUpper = function(str) {return str.toUpperCase()}
      </wxs>
    • 定义外联的 wxs 脚本:编写在以.wxs为后缀名的文件内。
      // tools.wxs文件
      function toLower(str) {return str.toLowerCase()
      }
      module.exports = {toLower: toLower
      }
    • 使用外联的 wxs 脚本:在wxml中引入时,需为<wxs>标签添加modulesrc属性。
      <view>{m2.toLower(country)}</view>
      <wxs src="../../utils/tools.wxs" module="m2"></wxs>
  • WXS 的特点

    • JavaScript不同:语法相似但本质不同。
    • 不能作为组件的事件回调。
    • 隔离性:运行环境与其他JavaScript代码隔离。
    • 性能好:在iOS设备上比JavaScript代码快。

5. 自定义组件

组件的创建与引用

  • 创建组件:在项目根目录创建components文件夹,在其中创建组件文件夹,右键点击 “新建 Component” 并输入组件名称,会自动生成.js.json.wxml.wxss四个文件。
  • test.js
    Component({// 组件逻辑代码
    })
  • test.json
    {"component": true
    }
  • test.wxml
    <view>这是一个自定义组件</view>
  • test.wxss
    view {color: red;
    }
  • 引用组件
    • 局部引用:在页面的.json配置文件中引用,如{"usingComponents": {"my-test1": "/components/test1/test1"}},在页面的.wxml文件中使用<my-test1></my-test1>
      {"usingComponents": {"my-test": "/components/test1/test1"}
      }
      <my-test></my-test>
    • 全局引用:在app.json全局配置文件中引用,如{"usingComponents": {"my-test2": "/components/test2/test2"}},在页面的.wxml文件中使用<my-test2></my-test2>
      {"usingComponents": {"my-global-test": "/components/global-test/global-test"},"pages": [/* 页面列表 */]
      }
      <my-global-test></my-global-test>
    • 选择引用方式:若组件在多个页面常用,建议全局引用;只在特定页面使用,建议局部引用。
  • 组件和页面的区别:组件和页面都由四个文件组成,但组件的.json文件需声明"component": true属性,.js文件调用Component()函数,事件处理函数定义在methods节点中。

组件样式

  • 组件样式隔离:默认情况下,自定义组件样式只对自身生效,app.wxss中的全局样式对组件无效,只有class选择器有样式隔离效果。
    .red-text {color: red;
    }
    <view class="blue-text">页面文本</view>
    <my-test></my-test>
  • 修改组件的样式隔离选项:可通过styleIsolation修改,在组件的.js文件中Component({options: {styleIsolation: 'isolated'}})
    Component({options: {styleIsolation: 'apply-shared'}
    })
    或在.json文件中{"styleIsolation": "isolated"}设置,可选值有isolated(启用样式隔离)、apply-shared(页面样式影响组件,组件样式不影响页面)、shared(页面和组件样式相互影响)。
    {"styleIsolation": "apply-shared"
    }

组件数据、方法和属性

  • data 数据:用于组件模板渲染的私有数据,定义在data节点中
    Component({data: {count: 0}
    })
  • methods 方法:事件处理函数和自定义方法定义在methods节点中
    Component({methods: {increment() {this.setData({count: this.data.count + 1});}}
    })
  • properties 属性:组件的对外属性,用来接收外界传递的数据,可完整定义properties: {max: {type: Number, value: 10}}
    Component({properties: {maxValue: {type: Number,value: 10}}
    })
    或简化定义max: Number
    Component({properties: {maxValue: Number}
    })
    在组件中使用<my-test1 max="10"></my-test1>
    <my-test maxValue="5"></my-test>
  • data 和 properties 的区别:用法相同,都是可读可写,data倾向于存储私有数据,properties倾向于存储外界传递的数据。
  • 使用 setData 修改 properties 的值:可用于页面渲染或使用setData重新赋值,如在组件的.wxml文件中<view>max属性的值为:{{max}}</view>,在.js文件中Component({properties: {max: Number}, methods: {addCount() {this.setData({max: this.properties.max + 1});}}})

数据监听器

  • 定义:用于监听和响应属性和数据字段的变化,类似于vue中的watch侦听器,基本语法格式为Component({observers: {'字段A,字段B': function(字段A的新值,字段B的新值) { // do something }}})
  • 基本用法
    Component({data: {num1: 0,num2: 0,sum: 0},methods: {incrementNum1() {this.setData({num1: this.data.num1 + 1});},incrementNum2() {this.setData({num2: this.data.num2 + 1});}},observers: {'num1,num2': function (num1, num2) {this.setData({sum: num1 + num2});}}
    })
  • 监听对象属性的变化:支持监听对象中单个或多个属性的变化,如Component({observers: {"对象.属性A,对象.属性B': function(属性A的新值,属性B的新值) { // do something }}})

纯数据字段

Component({options: {pureDataPattern: /^_/},data: {_privateData: 10,publicData: 20}
})
  • 定义:不用于界面渲染的data字段。
  • 使用规则:在Component构造器的options节点中,指定pureDataPattern为正则表达式,符合的字段为纯数据字段,如Component({options: {pureDataPattern: /^_/}, data: {a: true, _b: true}})

组件的生命周期

Component({lifetimes: {created: function () {// 在这里可以给组件的this添加一些自定义的属性字段this.myProperty = 'created';}}
})
Component({lifetimes: {attached: function () {// 在这里可以进行一些初始化操作,如获取数据this.setData({dataFromServer: '初始化数据'});}}
})
Component({lifetimes: {detached: function () {// 在这里可以进行一些清理操作,如清除定时器clearTimeout(this.timer);}}
})
  • 全部生命周期函数:包括created(组件实例创建时执行)、attached(进入页面节点树时执行)、ready(视图层布局完成后执行)、moved(被移动到节点树另一个位置时执行)、detached(从页面节点树移除时执行)、error(组件方法抛出错误时执行)。
  • 主要生命周期函数created(此时不能调用setData,可添加自定义属性字段)、attachedthis.data已初始化完毕,可进行初始化工作)、detached(适合做清理工作),生命周期函数可在lifetimes节点内声明。

组件所在页面的生命周期

Component({pageLifetimes: {show: function () {// 在这里可以根据页面展示重新生成一些数据this.setData({pageData: '页面展示时更新的数据'});},hide: function () {// 在这里可以进行一些与页面隐藏相关的操作this.cleanUp();},resize: function (size) {// 这里可以根据页面尺寸变化进行相关操作console.log('页面尺寸变化:', size);}}
})
  • 定义:自定义组件行为依赖页面状态变化时用到,包括show(页面被展示时执行)、hide(页面被隐藏时执行)、resize(页面尺寸变化时执行),这些函数需定义在pageLifetimes节点中。

插槽

  • 定义:在自定义组件的wxml结构中,<slot>节点用于承载组件使用者提供的wxml结构。
  • 单个插槽:默认每个自定义组件只允许一个<slot>
  •  组件封装者:
    <view class="wrapper"><view>组件内部文本</view><slot></slot>
    </view>
  • 组件使用者:
    <my-component><view>插槽内容</view>
    </my-component>
  • 启用多个插槽:在组件的.js文件中通过options: {multipleSlots: true}启用。
    Component({options: {multipleSlots: true}
    })
  • 定义多个插槽:在组件的.wxml中使用多个<slot>标签,以不同的name区分,
    <view class="wrapper"><slot name="header"></slot><view>中间文本</view><slot name="footer"></slot>
    </view>
  • 使用多个插槽:在使用组件时,用slot属性将节点插入到不同的<slot>
    <my-component><view slot="header">头部插槽内容</view><view slot="footer">底部插槽内容</view>
    </my-component>

父子组件之间的通信

  • 通信方式
    • 属性绑定:父组件向子组件指定属性设置数据,父组件如
      <parent-component><child-component value="{{parentValue}}"></child-component>
      </parent-component>
      ,子组件在properties节点声明对应属性。
      Component({properties: {value: String}
      })
    • 事件绑定:子组件向父组件传递数据,步骤包括父组件定义函数,在wxml中传递函数引用给子组件,子组件通过this.triggerEvent('自定义事件名称', { /* 参数对象 */ })发送数据,父组件通过e.detail获取数据。
    • 父组件(在js文件中定义函数):
      Page({methods: {handleChildData(data) {console.log('收到子组件数据:', data);}}
      })
    • 父组件(在wxml文件中传递函数引用给子组件):
      <parent-component><child-component bind:event="handleChildData"></child-component>
      </parent-component>
    • 子组件(在js文件中发送数据):
      Component({methods: {sendDataToParent() {this.triggerEvent('event', {data: '子组件数据'});}}
      })
    • 获取组件实例:父组件通过this.selectComponent("id或class选择器")获取子组件实例对象,访问其数据和方法。
    • 父组件:
      <parent-component><child-component id="child-component-id"></child-component>
      </parent-component>
    • 父组件(在js文件中获取子组件实例并操作):
      Page({methods: {getChildComponent() {const child = this.selectComponent('#child-component-id');child.setData({value: '新值'});child.doSomeMethod();}}
      })

behaviors

  • 定义:用于实现组件间代码共享,类似于Vue.js中的 “mixins”。
  • 工作方式:每个behavior包含属性、数据、生命周期函数和方法,组件引用时会合并这些内容,组件可引用多个behaviorbehavior也可引用其他behavior
  • 创建 behavior:调用Behavior(Object object)方法创建
    const myBehavior = Behavior({properties: {},data: {behaviorData: 'behavior数据'},methods: {behaviorMethod() {console.log('behavior方法');}}
    });
    module.exports = myBehavior;
  • 导入并使用 behavior:使用require()方法导入,挂载到behaviors数组节点中
    const myBehavior = require('./my-behavior');
    Component({behaviors: [myBehavior],methods: {useBehaviorMethod() {this.behaviorMethod();}}
    })

其他内容

  • 使用 npm 包:文档中未详细介绍相关内容,需进一步查阅相关资料了解具体使用方法。
  • 全局数据共享:文档中未详细介绍相关内容,需进一步查阅相关资料了解具体实现方式。
  • 分包:文档中未详细介绍相关内容,需进一步查阅相关资料了解具体操作和作用。
  • 案例 - 自定义 tabBar:文档中未详细介绍相关内容,需进一步查阅相关资料了解具体案例实现过程和效果。

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

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

相关文章

五款专业三维数据处理工具:GISBox、Cesiumlab、OSGBLab、灵易智模、倾斜伴侣深度解析

随着三维数据处理技术的广泛应用&#xff0c;尤其是在城市规划、地理信息系统&#xff08;GIS&#xff09;、工程监测等领域&#xff0c;处理倾斜摄影、三维建模以及大规模数据管理的需求日益增加。以下是五款我精心挑选的倾斜摄影和三维数据处理工具——GISBox、Cesiumlab、OS…

Debezium系列之:Debezium 3.0.0.Final发布

Debezium系列之:Debezium 3.0.0.Final发布 Debezium 核心的变化需要 Java 17基于Kafka 3.8 构建废弃的增量信号字段的删除每个表的详细指标MariaDB连接器的更改版本 11.4.3 支持MongoDB连接器的更改MongoDB sink connectorMySQL连接器的改变MySQL 9MySQL向量数据类型Oracle连接…

Vue3入门学习

Vue3入门学习 1. Vue3简介1.1. 【性能的提升】1.2.【 源码的升级】1.3. 【拥抱TypeScript】1.4. 【新的特性】 2. 创建Vue3工程2.1. 【基于 vue-cli 创建】2.2. 【基于 vite 创建】(推荐)2.3. 【一个简单的效果】 3. Vue3核心语法3.1. 【OptionsAPI 与 CompositionAPI】Options…

每日学习一个数据结构-AVL树

文章目录 概述一、定义与特性二、平衡因子三、基本操作四、旋转操作五、应用场景 Java代码实现 概述 AVL树是一种自平衡的二叉查找树&#xff0c;由两位俄罗斯数学家G.M.Adelson-Velskii和E.M.Landis在1962年发明。想了解树的相关概念&#xff0c;请点击这里。以下是对AVL树的…

如何让本地GGUF模型通过Ollama进行管理和推理

Ollama 除了通过从支持模型列表中 pull 的下载模型方式&#xff0c;也支持手动导入GGUF模型。 关键是需要创建一个 Modelfile 文件&#xff0c;和将项目打包成docker image的过程有点类似。 Modelfile 内容的创建可以参考通过 ollama pull 命令拉取的模型对应的 Modelfile &…

YOLO11改进|注意力机制篇|引入NAM注意力机制

目录 一、【NAM】注意力机制1.1【NAM】注意力介绍1.2【NAM】核心代码 二、添加【NAM】注意力机制2.1STEP12.2STEP22.3STEP32.4STEP4 三、yaml文件与运行3.1yaml文件3.2运行成功截图 一、【NAM】注意力机制 1.1【NAM】注意力介绍 下图是【NAM】的结构图&#xff0c;让我们简单分…

微服务实战——注册功能

注册 1.1. 配置 Configuration public class GulimallConfig implements WebMvcConfigurer {/*** 视图映射* param registry*/Overridepublic void addViewControllers(ViewControllerRegistry registry) {/*** GetMapping("/login.html")* public String …

C++ day04(友元 friend、运算符重载、String字符串)

目录 【1】友元 friend 1》概念 2》友元函数 3》友元类 4》友元成员函数 【2】运算符重载 1》概念 2》友元函数运算符重载 ​编辑 3》成员函数运算符重载 4》赋值运算符与类型转换运算符重载 5》注意事项 【3】String 字符串类 【1】友元 friend 1》概念 定义&#x…

YOLOv5改进——添加SimAM注意力机制

目录 一、SimAM注意力机制核心代码 二、修改common.py 三、修改yolo.py ​三、建立yaml文件 四、验证 一、SimAM注意力机制核心代码 在models文件夹下新建modules文件夹&#xff0c;在modules文件夹下新建一个py文件。这里为simam.py。复制以下代码到文件里面。 import…

吴恩达深度学习笔记:卷积神经网络(Foundations of Convolutional Neural Networks)2.7-2.8

目录 第四门课 卷积神经网络&#xff08;Convolutional Neural Networks&#xff09;第二周 深度卷积网络&#xff1a;实例探究&#xff08;Deep convolutional models: case studies&#xff09;2.7 Inception 网络&#xff08;Inception network&#xff09;2.8 使 用 开 源 …

【Linux】 TCP短服务编写和守护进程

文章目录 TCP 短服务编写流程进程组和会话和守护进程 TCP 短服务编写流程 TCP服务器是面向连接的&#xff0c;客户端在发送数据之前需要先与服务器建立连接。 因此&#xff0c;TCP服务器需要能够监听客户端的连接请求。为了实现这一功能&#xff0c;需要将TCP服务器创建的套接字…

75. 颜色分类

思路 先排最小的数&#xff0c;将最小的数都放至列表前面 则0~r-1都是最小值 从r到len(nums)-1继续进行排序&#xff0c;从尾部开始&#xff0c;将最大值放置尾部 class Solution(object):def sortColors(self, nums):""":type nums: List[int]:rtype: None …

Python | Leetcode Python题解之第468题验证IP地址

题目&#xff1a; 题解&#xff1a; class Solution:def validIPAddress(self, queryIP: str) -> str:if queryIP.find(".") ! -1:# IPv4last -1for i in range(4):cur (len(queryIP) if i 3 else queryIP.find(".", last 1))if cur -1:return &q…

Window系统编程 - 文件操作

前言 各位师傅大家好&#xff0c;我是qmx_07&#xff0c;今天主要介绍使用windows系统编程操作读写文件 文件 CreateFile()函数讲解 介绍:该函数用于打开文件或者I/O流设备&#xff0c;文件、文件流、目录、物理磁盘、卷、控制台缓冲区、磁带驱动器、通信资源、mailslot 和…

Jenkins Pipline流水线

提到 CI 工具&#xff0c;首先想到的就是“CI 界”的大佬--]enkjns,虽然在云原生爆发的年代,蹦出来了很多云原生的 CI 工具,但是都不足以撼动 Jenkins 的地位。在企业中对于持续集成、持续部署的需求非常多,并且也会经常有-些比较复杂的需求,此时新生的 CI 工具不足以支撑这些很…

看门狗电路设计

看门狗电路设计 看门狗是什么应用架构图TPV6823芯片功能硬件时序图为什么要一般是要保持200个毫秒左右的这种低电平的时间看门狗电路实际应用与条件 看门狗是什么 硬件看门狗芯片&#xff0c;Watch DogTimer&#xff0c;可用于受到电气噪音、电源故障、静电放电等影响(造成软件…

LSTM(长短时记忆网络)

一、引言 在处理序列数据时&#xff0c;循环神经网络&#xff08;RNN&#xff09;虽然能够处理序列数据并保留历史信息&#xff0c;但在实践中发现它对于捕捉长时间依赖关系的能力有限&#xff0c;尤其是在训练过程中容易遇到梯度消失或梯度爆炸的问题。为了解决这些问题&…

力扣1031. 两个非重叠子数组的最大和

力扣1031. 两个非重叠子数组的最大和 题目解析及思路 题目要求找到两段长分别为firstLen 和 secondLen的子数组&#xff0c;使两段元素和最大 图解见灵神 枚举第二段区间的右端点&#xff0c;在左边剩余部分中找出元素和最大的第一段区间&#xff0c;并用前缀和优化求子数组…

Nginx基础详解5(nginx集群、四七层的负载均衡、Jmeter工具的使用、实验验证集群的性能与单节点的性能)

续Nginx基础详解4&#xff08;location模块、nginx跨域问题的解决、nginx防盗链的设计原理及应用、nginx模块化解剖&#xff09;-CSDN博客 目录 14.nginx集群&#xff08;前传&#xff09; 14.1如何理解单节点和集群的概念 14.2单节点和集群的比较 14.3Nginx中的负载均衡…

对象的概念

对象是编程中一个重要的概念&#xff0c;尤其在面向对象编程&#xff08;OOP&#xff09;中更为核心。简单来说&#xff0c;对象是一种数据结构&#xff0c;它可以存储相关的数据和功能。以下是关于对象的详细描述&#xff1a; 1. 对象的定义 对象是属性&#xff08;数据&…