【微信小程序篇】- 组件
最近自己在尝试使用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写一个小程序,页面、样式、包括交互函数AIGC都能够帮我完成(不过这里有一点问题AIGC的上下文关联性还是有限制,会经常出现对于需求理解跑偏情况,需要不断的重复强调,并纠正错误,才能得到你想要的…...
使用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,…...
NC Cloud uploadChunk文件上传漏洞复现
简介 NC Cloud是指用友公司推出的大型企业数字化平台。支持公有云、混合云、专属云的灵活部署模式。该产品uploadChunk文件存在任意文件上传漏洞。 漏洞复现 FOFA语法: app"用友-NC-Cloud" 访问页面如下所示: POC:/ncchr/pm/fb/…...
多标签页之间的通信
解决方案有两种思路:浏览器端解决方案、服务器端解决方案。 一、浏览器端解决方案: 思路:本地数据存储 <!-- index01.html --> <input id"name"> <input type"button" id"btn" value"…...
CI/CD -gitlab
目录 一、常用命令 二、部署 一、常用命令 官网:https://about.gitlab.com/install/ gitlab-ctl start # 启动所有 gitlab 组件 gitlab-ctl stop # 停止所有 gitlab 组件 gitlab-ctl restart # 重启所有 gitlab 组件 gitlab-ctl statu…...
AR眼镜_单目光波导VS双目光波导方案
双目光波导AR眼镜方案是一种创新的智能设备,可以在现实场景中叠加虚拟信息,提供增强的视觉体验和交互体验。光学显示方案是AR眼镜的核心技术之一,它对眼镜的性能和使用体验起着决定性的作用。 相比于单目AR眼镜,双目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
执行了一组插入语句 提示:2006 - Server has gone away; 2006-服务器已经消失; 消失去哪里了,被黑洞吞没了吗?!!! 网络问题 网络不稳定?断网了?检查网络连…...
动态规划43(Leetcode91解码方法)
代码: 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:Ccircuit 表示电路的意思, 即接入电路的电压 VDD:Ddevice 表示器件的意思, 即器件内部的工作电压。 VSS:Sseries 表示公共连接的意思,通常指电路公共接地端电压。 GND:在电…...
openAI宫斗感想 chatGPT带给客户巨大利益的就是王者。王者终究会归来。技术人员不要总是想掌握所有核心技术并用到极致。
1.我很喜欢乔布斯用的iCEO,每个人的工作都是临时的,打掉铁饭碗才会有效率。有铁饭碗就容易使人怠慢、傲慢、嚣张、低效率的消耗自己和别人的生命。日本人为什么对每个人每个客户都毕恭毕敬,感觉因为他的饭碗都掌握在周围的人手里。 日本文化…...
驱动程序无法通过使用安全套接字层(SSL)加密与 SQL Server 建立安全连接
参考:https://www.cnblogs.com/sam-snow-v/p/15917898.html eclipse链接SQL Server出现问题 笔者使用Open JDK 17,SQL Server 2016,项目中使用JPA操作数据库。测试环境没问题,生产环境出现如题所示“驱动程序无法通过使用安全套接…...
性能调优第一步:服务器硬件如何选型
硬件选型是调优的第一步,无论你是自行购买服务器进行托管,还是租用服务器,或者购买云主机,都要面临的一个问题,那就是选择服务器的硬件配置,因为没有一台服务器能满足所有需求,解决所有的问题。…...
Codewhisperer 使用评价
最近亚⻢逊推出了一款基于机器学习的 AI 编程助手 Amazon CodeWhisperer,可以实时提供代码建议。在编写代码时,它会自动根据现有的代码和注释给出建议。Amazon CodeWhisperer 与GitHub Copilot类似,主要的功能有: 代码补全注释和文档补全代码…...
结合scss实现黑白主题切换
是看了袁老师的视频后,自己做了一下练习。原视频地址: 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、创建一个数据库,并且创建一个表 -- ------------------------ -- 用户表 -- ------------------------ DROP TABLE IF EXISTS user; C…...
Mac git查看分支以及切换分支
查看本地分支 git branch 查看远程仓库分支 git branch -r 查看本地与远程仓库分支 git branch -a 切换分支 git checkout origin/dev/js...
Qt调起Mac“系统设置”面板
mac系统设置相关字段: 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()方法来实现刷新当前页面,该方法可以滚动页面并使页面滚动到顶部,从而达到刷新页面的效果。具体的操作步骤如下: 在需要刷新的页面中添加一个按钮或其他触发事件的元素。 绑定相应的点击事件,…...
OSI参考模型
目录 一. OSI参考模型的各层功能二. 网络排错三. 网络安全四. 实体、协议、服务和服务访问点SAP五. TCP IP体系结构 一. OSI参考模型的各层功能 \quad \quad \quad \quad 我们首先来看应用层实现的功能 每个字段的各种取值所代表的意思 \quad \quad 比如要保存的文件内容是ab…...
地震勘探——干扰波识别、井中地震时距曲线特点
目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波:可以用来解决所提出的地质任务的波;干扰波:所有妨碍辨认、追踪有效波的其他波。 地震勘探中,有效波和干扰波是相对的。例如,在反射波…...
Cursor实现用excel数据填充word模版的方法
cursor主页:https://www.cursor.com/ 任务目标:把excel格式的数据里的单元格,按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例,…...
PPT|230页| 制造集团企业供应链端到端的数字化解决方案:从需求到结算的全链路业务闭环构建
制造业采购供应链管理是企业运营的核心环节,供应链协同管理在供应链上下游企业之间建立紧密的合作关系,通过信息共享、资源整合、业务协同等方式,实现供应链的全面管理和优化,提高供应链的效率和透明度,降低供应链的成…...
在四层代理中还原真实客户端ngx_stream_realip_module
一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡(如 HAProxy、AWS NLB、阿里 SLB)发起上游连接时,将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后,ngx_stream_realip_module 从中提取原始信息…...
【git】把本地更改提交远程新分支feature_g
创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...
【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分
一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计,提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合:各模块职责清晰,便于独立开发…...
Springboot社区养老保险系统小程序
一、前言 随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,社区养老保险系统小程序被用户普遍使用,为方…...
JavaScript基础-API 和 Web API
在学习JavaScript的过程中,理解API(应用程序接口)和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能,使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...
通过MicroSip配置自己的freeswitch服务器进行调试记录
之前用docker安装的freeswitch的,启动是正常的, 但用下面的Microsip连接不上 主要原因有可能一下几个 1、通过下面命令可以看 [rootlocalhost default]# docker exec -it freeswitch fs_cli -x "sofia status profile internal"Name …...
redis和redission的区别
Redis 和 Redisson 是两个密切相关但又本质不同的技术,它们扮演着完全不同的角色: Redis: 内存数据库/数据结构存储 本质: 它是一个开源的、高性能的、基于内存的 键值存储数据库。它也可以将数据持久化到磁盘。 核心功能: 提供丰…...
