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

【微信小程序篇】- 组件

最近自己在尝试使用AIGC写一个小程序,页面、样式、包括交互函数AIGC都能够帮我完成(不过这里有一点问题AIGC的上下文关联性还是有限制,会经常出现对于需求理解跑偏情况,需要不断的重复强调,并纠正错误,才能得到你想要的内容)。

因为最近某些原因,所处的环境网络没办法科学上网,剩下的页面优化需要自己做。

组件

大家都比较讨厌屎山代码。所以我们在不断增加业务代码的过程中,需要不断的重构代码。在代码的世界里有个词叫封装,相信这个词大家都不陌生,封装的方式有很多种,在前端的世界里有个东西叫组件,个人认为这也是封装的一部分。当然还有就是工具封装,之前有写一篇文章叫【微信小程序篇】-请求封装,这也是封装的一种方式。

微信小程序自定义组件

为什么在不论是VUE、小程序等会有一个组件的概念呢?
核心是为了把一些公用的页面代码、交互代码、样式代码封装为一个整体,让其他页面引用的时候,不需要再写重复代码,只需要引入组件,通过组件的方式进行页面渲染,不影响预期的设计,同时减少重复的代码量。这是组件最重要的应用场景。

1.组件的定义及使用

在微信小程序的官方开发文档中已经很明确了组件的定义,我们可以再一起来实际操作一番。我们一起来使用微信小程序原生实现一遍。
1.在目录components下创建组件目录demoCard;
2.在demoCard下面创建component(组件);
3.确定组件创建成功:

  • 3.1 查看demoCard.json中,component的值为true
{"component": true,"usingComponents": {}
}
  • 3.2 在demoCard.wxml中定义组件内容
<view>这里是demo组件</view>

4.在页面中引入组件:

  • 4.1 在页面的demo.json文件中增加组件引用
{"usingComponents": {"dynamicCard": "/components/demoCard/demoCard"}
}
  • 4.1 在页面的demo.wxml中使用组件
<demoCard></demoCard>

2.外部数据传入组件

我们在实际使用中,经常需要把页面的数据传入到组件中,那么我们应该怎么传入呢?下面我们开始实际操作:
1.在demoCard.js/demoCard.ts(这里我使用的是ts)中的properties中定义我们需要的属性

Component({/*** 组件的属性列表*/properties: {dateStr: null},/*** 组件的初始数据*/data: {},/*** 组件的方法列表*/methods: {}
})

2.在使用组件的时候,把值符给属性

<demoCard dateStr='测试传值'></demoCard>
<!-- 或者 -->
<demoCard dateStr='{{ demoDateStr }}'></demoCard>

3.在组件的demoCard.wxml中使用属性

<view>这里是demo组件:{{ dateStr }}</view>

这里我们会发现,组件只要定义了属性,这些属性作为外部传值的承载,在组件内部页面我们可以和正常页面做数据使用。

关于组件就介绍到这里,如果有问题可以在评论区留言,记得三连哦。

相关文章:

【微信小程序篇】- 组件

最近自己在尝试使用AIGC写一个小程序&#xff0c;页面、样式、包括交互函数AIGC都能够帮我完成(不过这里有一点问题AIGC的上下文关联性还是有限制&#xff0c;会经常出现对于需求理解跑偏情况&#xff0c;需要不断的重复强调&#xff0c;并纠正错误&#xff0c;才能得到你想要的…...

使用Sqoop命令从Oracle同步数据到Hive,修复数据乱码 %0A的问题

一、创建一张Hive测试表 create table test_oracle_hive(id_code string,phone_code string,status string,create_time string ) partitioned by(partition_date string) ROW FORMAT DELIMITED FIELDS TERMINATED BY ,; 创建分区字段partition_date&#xff0c…...

NC Cloud uploadChunk文件上传漏洞复现

简介 NC Cloud是指用友公司推出的大型企业数字化平台。支持公有云、混合云、专属云的灵活部署模式。该产品uploadChunk文件存在任意文件上传漏洞。 漏洞复现 FOFA语法&#xff1a; app"用友-NC-Cloud" 访问页面如下所示&#xff1a; POC&#xff1a;/ncchr/pm/fb/…...

多标签页之间的通信

解决方案有两种思路&#xff1a;浏览器端解决方案、服务器端解决方案。 一、浏览器端解决方案&#xff1a; 思路&#xff1a;本地数据存储 <!-- index01.html --> <input id"name"> <input type"button" id"btn" value"…...

CI/CD -gitlab

目录 一、常用命令 二、部署 一、常用命令 官网&#xff1a;https://about.gitlab.com/install/ gitlab-ctl start # 启动所有 gitlab 组件 gitlab-ctl stop # 停止所有 gitlab 组件 gitlab-ctl restart # 重启所有 gitlab 组件 gitlab-ctl statu…...

AR眼镜_单目光波导VS双目光波导方案

双目光波导AR眼镜方案是一种创新的智能设备&#xff0c;可以在现实场景中叠加虚拟信息&#xff0c;提供增强的视觉体验和交互体验。光学显示方案是AR眼镜的核心技术之一&#xff0c;它对眼镜的性能和使用体验起着决定性的作用。 相比于单目AR眼镜&#xff0c;双目AR眼镜具有更好…...

golang 动态库 (buildmode)

目录 1. golang 动态库2. Golang 生成 C 动态库 .so 和静态库 .a2.1. 源代码2.2. 编译2.3. C2.4. 执行2.5. 如何生成静态库2.6. Go 调用 C 库2.6.1. 源代码 3. golang 语言使用动态库、调用动态链接库3.1. Go 插件系统3.2. 动态加载的优劣3.3. Go 的插件系统: Plugin3.4. 插件开…...

【mysql】2006 - Server has gone away

执行了一组插入语句 提示&#xff1a;2006 - Server has gone away&#xff1b; 2006-服务器已经消失&#xff1b; 消失去哪里了&#xff0c;被黑洞吞没了吗&#xff1f;&#xff01;&#xff01;&#xff01; 网络问题 网络不稳定&#xff1f;断网了&#xff1f;检查网络连…...

动态规划43(Leetcode91解码方法)

代码&#xff1a; class Solution {public int numDecodings(String s) {int n s.length();if(s.charAt(0)0)return 0;if(n1)return 1;int[] dp new int[n1];dp[0]1;dp[1]1;for(int i2;i<n;i){if(s.charAt(i-2)1){dp[i]dp[i-2];}else if(s.charAt(i-2)2&&s.charA…...

STM32电源名词解析

先来简单了解一下各种电源端口的命名 VCC&#xff1a;Ccircuit 表示电路的意思, 即接入电路的电压 VDD&#xff1a;Ddevice 表示器件的意思, 即器件内部的工作电压。 VSS&#xff1a;Sseries 表示公共连接的意思&#xff0c;通常指电路公共接地端电压。 GND&#xff1a;在电…...

openAI宫斗感想 chatGPT带给客户巨大利益的就是王者。王者终究会归来。技术人员不要总是想掌握所有核心技术并用到极致。

1.我很喜欢乔布斯用的iCEO&#xff0c;每个人的工作都是临时的&#xff0c;打掉铁饭碗才会有效率。有铁饭碗就容易使人怠慢、傲慢、嚣张、低效率的消耗自己和别人的生命。日本人为什么对每个人每个客户都毕恭毕敬&#xff0c;感觉因为他的饭碗都掌握在周围的人手里。 日本文化…...

驱动程序无法通过使用安全套接字层(SSL)加密与 SQL Server 建立安全连接

参考&#xff1a;https://www.cnblogs.com/sam-snow-v/p/15917898.html eclipse链接SQL Server出现问题 笔者使用Open JDK 17&#xff0c;SQL Server 2016&#xff0c;项目中使用JPA操作数据库。测试环境没问题&#xff0c;生产环境出现如题所示“驱动程序无法通过使用安全套接…...

性能调优第一步:服务器硬件如何选型

硬件选型是调优的第一步&#xff0c;无论你是自行购买服务器进行托管&#xff0c;还是租用服务器&#xff0c;或者购买云主机&#xff0c;都要面临的一个问题&#xff0c;那就是选择服务器的硬件配置&#xff0c;因为没有一台服务器能满足所有需求&#xff0c;解决所有的问题。…...

Codewhisperer 使用评价

最近亚⻢逊推出了一款基于机器学习的 AI 编程助手 Amazon CodeWhisperer&#xff0c;可以实时提供代码建议。在编写代码时&#xff0c;它会自动根据现有的代码和注释给出建议。Amazon CodeWhisperer 与GitHub Copilot类似&#xff0c;主要的功能有: 代码补全注释和文档补全代码…...

结合scss实现黑白主题切换

是看了袁老师的视频后&#xff0c;自己做了一下练习。原视频地址&#xff1a; b站地址https://www.bilibili.com/video/BV15z4y1N7jB/?spm_id_from333.1007.top_right_bar_window_history.content.click&vd_sourcec6cf63302f28d94ebc02cbedcecc57ea首先创建一个全局的scs…...

go-zero对数据库的操作

一、go-zerro中结合gorm来操作mysql数据库 1、这里我这就直接结合gorm-gen的方式来实现数据库操作,关于gorm-gen可以参考官网 2、创建一个数据库&#xff0c;并且创建一个表 -- ------------------------ -- 用户表 -- ------------------------ DROP TABLE IF EXISTS user; C…...

Mac git查看分支以及切换分支

查看本地分支 git branch 查看远程仓库分支 git branch -r 查看本地与远程仓库分支 git branch -a 切换分支 git checkout origin/dev/js...

Qt调起Mac“系统设置”面板

mac系统设置相关字段&#xff1a; Accessibility 面板相关 项目 URL Scheme Main x-apple.systempreferences:com.apple.preference.universalaccess Display x-apple.systempreferences:com.apple.preference.universalaccess?Seeing_Display Zoom x-apple.systempreference…...

小程序如何刷新当前页面

小程序可以通过调用wx.pageScrollTo()方法来实现刷新当前页面&#xff0c;该方法可以滚动页面并使页面滚动到顶部&#xff0c;从而达到刷新页面的效果。具体的操作步骤如下&#xff1a; 在需要刷新的页面中添加一个按钮或其他触发事件的元素。 绑定相应的点击事件&#xff0c;…...

OSI参考模型

目录 一. OSI参考模型的各层功能二. 网络排错三. 网络安全四. 实体、协议、服务和服务访问点SAP五. TCP IP体系结构 一. OSI参考模型的各层功能 \quad \quad \quad \quad 我们首先来看应用层实现的功能 每个字段的各种取值所代表的意思 \quad \quad 比如要保存的文件内容是ab…...

React Native 开发环境搭建(全平台详解)

React Native 开发环境搭建&#xff08;全平台详解&#xff09; 在开始使用 React Native 开发移动应用之前&#xff0c;正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南&#xff0c;涵盖 macOS 和 Windows 平台的配置步骤&#xff0c;如何在 Android 和 iOS…...

聊聊 Pulsar:Producer 源码解析

一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台&#xff0c;以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中&#xff0c;Producer&#xff08;生产者&#xff09; 是连接客户端应用与消息队列的第一步。生产者…...

【解密LSTM、GRU如何解决传统RNN梯度消失问题】

解密LSTM与GRU&#xff1a;如何让RNN变得更聪明&#xff1f; 在深度学习的世界里&#xff0c;循环神经网络&#xff08;RNN&#xff09;以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而&#xff0c;传统RNN存在的一个严重问题——梯度消失&#…...

python如何将word的doc另存为docx

将 DOCX 文件另存为 DOCX 格式&#xff08;Python 实现&#xff09; 在 Python 中&#xff0c;你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是&#xff0c;.doc 是旧的 Word 格式&#xff0c;而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

零基础在实践中学习网络安全-皮卡丘靶场(第九期-Unsafe Fileupload模块)(yakit方式)

本期内容并不是很难&#xff0c;相信大家会学的很愉快&#xff0c;当然对于有后端基础的朋友来说&#xff0c;本期内容更加容易了解&#xff0c;当然没有基础的也别担心&#xff0c;本期内容会详细解释有关内容 本期用到的软件&#xff1a;yakit&#xff08;因为经过之前好多期…...

以光量子为例,详解量子获取方式

光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学&#xff08;silicon photonics&#xff09;的光波导&#xff08;optical waveguide&#xff09;芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中&#xff0c;光既是波又是粒子。光子本…...

scikit-learn机器学习

# 同时添加如下代码, 这样每次环境(kernel)启动的时候只要运行下方代码即可: # Also add the following code, # so that every time the environment (kernel) starts, # just run the following code: import sys sys.path.append(/home/aistudio/external-libraries)机…...

【网络安全】开源系统getshell漏洞挖掘

审计过程&#xff1a; 在入口文件admin/index.php中&#xff1a; 用户可以通过m,c,a等参数控制加载的文件和方法&#xff0c;在app/system/entrance.php中存在重点代码&#xff1a; 当M_TYPE system并且M_MODULE include时&#xff0c;会设置常量PATH_OWN_FILE为PATH_APP.M_T…...

代码规范和架构【立芯理论一】(2025.06.08)

1、代码规范的目标 代码简洁精炼、美观&#xff0c;可持续性好高效率高复用&#xff0c;可移植性好高内聚&#xff0c;低耦合没有冗余规范性&#xff0c;代码有规可循&#xff0c;可以看出自己当时的思考过程特殊排版&#xff0c;特殊语法&#xff0c;特殊指令&#xff0c;必须…...

Caliper 负载(Workload)详细解析

Caliper 负载(Workload)详细解析 负载(Workload)是 Caliper 性能测试的核心部分,它定义了测试期间要执行的具体合约调用行为和交易模式。下面我将全面深入地讲解负载的各个方面。 一、负载模块基本结构 一个典型的负载模块(如 workload.js)包含以下基本结构: use strict;/…...