微信小程序的自定义组件

一、创建自定义组件

(1)定义:

把页面重复的代码部分封装成为一个自定义组件,以便在不同的页面中重复使用,有助于代码的维护。

(2)组成:

自定义组件的组成:json文件,js文件,wxml文件,wxss文件

(也就是配置,逻辑,结构,样式)

(3)使用:

在components文件夹下新建一个文件夹,命名为test。test文件夹下新建component。然后自定义命名为test敲回车

(4)此时,test.js里面会出现如下属性。

data属性,可读可写,更倾向于储存组件的私有数据

properties属性,可读可写,更倾向于存储外界传递的公有数据

(5)在test.wxml里面写好自定义组件封装的内容:

<view>我是自定义组件test</view>

二、使用自定义组件

(1)使用前提:

在页面的json文件或app.json里修改全局配置

自定义组件的引用方式:

局部引用:在页面的json文件中引用自定义组件

全局引用:在app.json全局配置文件中引用自定义组件

(2)使用:

在app.json里面:

然后直接在pages下的index.wxml引用自定义组件test 

(3)效果如图所示:

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Flutter 中如何优雅地使用弹框

日常开发中&#xff0c;Flutter 弹框&#xff08;Dialog&#xff09;是我们使用频率非常高的控件。无论是提示用户信息、确认用户操作&#xff0c;还是表单填写&#xff0c;弹框都能派上用场。然而&#xff0c;看似简单的弹框&#xff0c;实际使用起来却有不少坑和使用的技巧。…

el-select可选择可搜索可输入新内容

需求&#xff1a;el-form-item添加el-select&#xff0c;并且el-select可选择可搜索可输入新内容&#xff0c;并且和其他的el-input做联动&#xff0c;如果是选择&#xff0c;那么el-input自动回填数据并且不可编辑&#xff0c;如果el-select输入新的内容&#xff0c;那么el-in…

webpack5 splitChunks分割代码

首先明确webpack 自身的打包行为 当splitChunks为false时&#xff0c;此时不启用任何打包设置 可以看到&#xff0c;静态引入全都打到一个chunk里&#xff0c;动态引入会拆分出来一个chunk,这是纯webpack无配置的打包&#xff0c; webpack会给每个模块打上标记 ,如下 { m…

【HCIP学习】RSTP和MSTP

一、RSTP&#xff08;Rapid Spanning Tree Protocol&#xff0c;快速生成树&#xff09; 1、背景&#xff1a;RSTP从STP发展而来&#xff0c;具备STP的所有功能&#xff0c;可以兼容stp运行 2、RSTP与STP不同点 &#xff08;1&#xff09;减少端口状态 STP:disabled\blockin…

抵御风险——漫谈运维核心价值和方法论

要明晰什么是运维的核心价值&#xff0c;也就是要弄明白&#xff0c;从整个软件行业运维的角色定位来看&#xff0c;运维的核心价值在哪里&#xff1f;怎样增强自己实现核心价值的能力的问题。 软件产业本质其实还是工业&#xff0c;它的产品和传统的工业产品形态虽然有巨大差…

汇舟问卷:海外问卷调查如何闭坑?

大家好&#xff0c;我是汇舟问卷。有很多人问我这行有什么骗局吗&#xff1f;怎么说呢&#xff1f;其实每个行业都是真实存在的&#xff0c;也都有赚到钱的和赚不到钱的&#xff0c;那区别在哪里呢&#xff1f; 在你的源头&#xff0c;也就是教你或者说是代理加盟的上家&#…

机器学习实验 --- 逻辑回归

第1关:逻辑回归核心思想 任务描述 本关任务:根据本节课所学知识完成本关所设置的编程题 #encoding=utf8 import numpy as npdef sigmoid(t):完成sigmoid函数计算:param t: 负无穷到正无穷的实数:return: 转换后的概率值:可以考虑使用np.exp()函数#********** Begin *******…

景源畅信数字:抖音小店新手该怎么做?

在数字化时代的浪潮中&#xff0c;抖音不仅仅是一个分享短视频的平台&#xff0c;更是一个充满潜力的电商平台。对于想要进入这个领域的朋友们来说&#xff0c;开设一家抖音小店无疑是一个既激动又迷茫的起点。那么&#xff0c;作为新手&#xff0c;该如何在这个全新的舞台上立…

笔记 | 《css权威指南》

网络安全色 URL text-indent line-height & vertical-align 字体 font-weight 400 normal 700 bold background-attachment

iOS系统故障怎么办?这三种苹果手机系统修复方法你一定要知道

随着苹果手机使用时间越长&#xff0c;苹果手机有时也会出现系统问题&#xff0c;如卡顿、崩溃、无法启动等。这些问题不仅影响用户的使用体验&#xff0c;还可能导致数据丢失。因此&#xff0c;掌握苹果手机系统修复方法显得尤为重要。本文将详细介绍苹果手机系统修复的常见方…

MyBatis入门(1)

目录 一、JDBC操作回顾 二、什么是MyBatis&#xff1f; 三、MyBatis入门 1、准备工作 &#xff08;1&#xff09;创建工程 &#xff08;2&#xff09;数据准备 2、配置数据库连接字符串 3、写持久层代码 4、单元测试 &#xff08;1&#xff09;使用IDEA自动成成测试类…

UFS协议—新手快速入门(一)【1-4】

本篇旨在为初学者提供关于通用闪存存储&#xff08;UFS&#xff09;的快速入门指南。 目录 一、背景介绍 二、UFS 三、半双工和全双工 &#xff08;1&#xff09;半双工&#xff08;Half-Duplex&#xff09; &#xff08;2&#xff09;全双工&#xff08;Full-Duplex&…

【大模型】fineturn Q-wen

github上下载qwen1_5源码 修改finetun.sh 然后在路径qwen1_5/examples/sft下修改finetun.sh, 内容如下 #!/bin/bash export CUDA_DEVICE_MAX_CONNECTIONS1 DIRpwd# Guide: # This script supports distributed training on multi-gpu workers (as well as single-worker trai…

【HTML】制作一个跟随鼠标的流畅线条引导页界面(可直接复制源码)

目录 前言 HTML部分 CSS部分 JS部分 效果图 总结 前言 无需多言&#xff0c;本文将详细介绍一段HTML代码&#xff0c;图中线条可跟随鼠标移动&#xff0c;具体内容如下&#xff1a; 开始 首先新建一个HTML的文本&#xff0c;文本名改为[index.html]&#xff0c;创建好后右…

弱电工程企业项目一体化管理系统解决方案!企智汇项目管理系统

企智汇工程项目管理系统是一款为弱电工程企业量身打造的专业解决方案&#xff0c;旨在帮助企业实现项目管理的数智化、全流程化和一体化。以下是该系统的详细介绍&#xff1a; 1. 功能丰富&#xff1a;企智汇工程项目管理系统支持全周期的项目管理&#xff0c;包括客户管理、招…

火山引擎边缘云亮相 Force 原动力大会,探索 AI 应用新范式

5月15日&#xff0c;2024 春季火山引擎 FORCE 原动力大会在北京正式举办。大会聚焦 AI 主题&#xff0c;以大模型应用为核心、以 AI 落地为导向&#xff0c;展示了火山引擎在大模型、云计算领域的实践应用&#xff0c;携手汽车、手机终端、金融、消费、互联网等领域的专家和企业…

【全开源】班级管家微信小程序(FastAdmin+ThinkPHP)

班级管家微信小程序 班级管家微信小程序&#xff0c;作为一款专注于家校沟通、作业管理、成绩发布等方面的工具&#xff0c;凭借其丰富的特色功能和显著的优势&#xff0c;已经成为广大教师、家长和学生日常学习生活中不可或缺的一部分。 一、特色功能 家校沟通便捷&#xff…

大模型之Ollama:在本地机器上释放大型语言模型的强大功能

LlaMA 3 系列博客 基于 LlaMA 3 LangGraph 在windows本地部署大模型 &#xff08;一&#xff09; 基于 LlaMA 3 LangGraph 在windows本地部署大模型 &#xff08;二&#xff09; 基于 LlaMA 3 LangGraph 在windows本地部署大模型 &#xff08;三&#xff09; 基于 LlaMA…

从“图形可视化”到“图生代码”,低代码平台的新挑战

前言&#xff1a; 低代码平台最大的一个特点就是可视化&#xff0c;将代码采用可视化的方式展示管理。一时间拥有图形化界面的各类系统都挂上了低代码的标签。但更多的代码从业者在使用中却发现&#xff0c;在众多的低代码平台中都是“别人家的代码”其可视化主要是别人家的代…