当前位置: 首页 > 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…...

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

Java 加密常用的各种算法及其选择

在数字化时代&#xff0c;数据安全至关重要&#xff0c;Java 作为广泛应用的编程语言&#xff0c;提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景&#xff0c;有助于开发者在不同的业务需求中做出正确的选择。​ 一、对称加密算法…...

Caliper 配置文件解析:config.yaml

Caliper 是一个区块链性能基准测试工具,用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构,并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件,主要包含以下几个部…...

【论文阅读28】-CNN-BiLSTM-Attention-(2024)

本文把滑坡位移序列拆开、筛优质因子&#xff0c;再用 CNN-BiLSTM-Attention 来动态预测每个子序列&#xff0c;最后重构出总位移&#xff0c;预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵&#xff08;S…...

在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案

这个问题我看其他博主也写了&#xff0c;要么要会员、要么写的乱七八糟。这里我整理一下&#xff0c;把问题说清楚并且给出代码&#xff0c;拿去用就行&#xff0c;照着葫芦画瓢。 问题 在继承QWebEngineView后&#xff0c;重写mousePressEvent或event函数无法捕获鼠标按下事…...

日常一水C

多态 言简意赅&#xff1a;就是一个对象面对同一事件时做出的不同反应 而之前的继承中说过&#xff0c;当子类和父类的函数名相同时&#xff0c;会隐藏父类的同名函数转而调用子类的同名函数&#xff0c;如果要调用父类的同名函数&#xff0c;那么就需要对父类进行引用&#…...

永磁同步电机无速度算法--基于卡尔曼滤波器的滑模观测器

一、原理介绍 传统滑模观测器采用如下结构&#xff1a; 传统SMO中LPF会带来相位延迟和幅值衰减&#xff0c;并且需要额外的相位补偿。 采用扩展卡尔曼滤波器代替常用低通滤波器(LPF)&#xff0c;可以去除高次谐波&#xff0c;并且不用相位补偿就可以获得一个误差较小的转子位…...

数据库正常,但后端收不到数据原因及解决

从代码和日志来看&#xff0c;后端SQL查询确实返回了数据&#xff0c;但最终user对象却为null。这表明查询结果没有正确映射到User对象上。 在前后端分离&#xff0c;并且ai辅助开发的时候&#xff0c;很容易出现前后端变量名不一致情况&#xff0c;还不报错&#xff0c;只是单…...

Python爬虫实战:研究Restkit库相关技术

1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代,互联网上存在着海量的有价值数据。如何高效地采集这些数据并将其应用于实际业务中,成为了许多企业和开发者关注的焦点。网络爬虫技术作为一种自动化的数据采集工具,可以帮助我们从网页中提取所需的信息。而 RESTful API …...

【PX4飞控】mavros gps相关话题分析,经纬度海拔获取方法,卫星数锁定状态获取方法

使用 ROS1-Noetic 和 mavros v1.20.1&#xff0c; 携带经纬度海拔的话题主要有三个&#xff1a; /mavros/global_position/raw/fix/mavros/gpsstatus/gps1/raw/mavros/global_position/global 查看 mavros 源码&#xff0c;来分析他们的发布过程。发现前两个话题都对应了同一…...