小程序基础学习(组件化)

(一)创建

        找到components文件夹下面创建新的文件夹

        然后再文件夹内创建component格式的文件

        创建后这样 

        我创建的是my-info的文件夹以及my-info的components文件,跟着普通的页面一样 

(二) 注册组件

        找到你需要使用组件的json文件中注册组件即可

        第一个值是你定义组件起的名称,第二个值是组件的地址,然后在组件中写入代码

(三) 使用

        找到你需要使用组件的地方加入你组成的组件名称即可

        最后分享一下组件增加后一些内容的代码。仅供参考


<!--components/my-info/my-info.wxml-->
<view class="text">
<text class="texts">{{text}}</text>
</view>
<view class="number">
<text class="number">{{number}}</text>
</view>
/* components/my-info/my-info.wxss */
.texts{color: blue;font-size: large;}
.number{color: yellow;font-size: larger;
}
// components/my-info/my-info.js
Component({/*** 组件的属性列表*/properties: {},/*** 组件的初始数据*/data: {"number":100,"text":"牛马程序员在此"},/*** 组件的方法列表*/methods: {}
})
{"component": true,"usingComponents": {}
}

 

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

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

相关文章

微信小程序-----宿主环境(组件介绍和代码编写)

目录 前言 宿主环境简介 1. 什么是宿主环境 ​编辑 2.小程序的宿主环境 3. 小程序宿主环境包含的内容 一、通信模型 1. 通信的主体 2. 小程序的通信模型 二、运行机制 1.小程序启动的过程 2.页面渲染的过程 三、组件 常用的视图容器类组件 1.view 组件 2.scroll-…

RK3399平台入门到精通系列讲解(驱动篇)eventpoll结构体详解

🚀返回总目录 文章目录 一、eventpoll 结构体二 、epitem 结构体三、eppoll_entry 结构体eventpoll 结构体:eventpoll 结构体是 epoll 在内核中的核心结构epitem 结构体:epitem 结构体用于表示 epoll 实例中的事件项eppoll_entry 结构体:它的作用就是关联Socket等待队列中…

MES数据采集在制造业的应用

MES设备数据采集的流程包括以下几个步骤&#xff1a; 1. 设备接入&#xff1a;将设备接入MES系统&#xff0c;建立设备与MES系统之间的连接。 2. 数据采集&#xff1a;通过传感器和采集器等设备&#xff0c;采集设备运行数据和状态信息。 3. 数据存储&#xff1a;将采集到的设…

【JaveWeb教程】(19) MySQL数据库开发之 MySQL数据库操作-DML 详细代码示例讲解

目录 3. 数据库操作-DML3.1 增加(insert)3.2 修改(update)3.3 删除(delete)3.4 总结 3. 数据库操作-DML DML英文全称是Data Manipulation Language(数据操作语言)&#xff0c;用来对数据库中表的数据记录进行增、删、改操作。 添加数据&#xff08;INSERT&#xff09;修改数据…

中央处理器CPU(1)----指令周期和微程序

前言&#xff1a;由于期末复习计算机组成效率太慢所以抽时间写一下文章总结一下思路&#xff0c;理解不是很深&#xff0c;欢迎各位不吝赐教。 由于时间不是很充分&#xff0c;所以有些考点由于我们不考试&#xff0c;一笔带过了。 我这是期末复习总结&#xff0c;不是考研知识…

vue.js环境在window和linux安装

nodei官网&#xff1a;https://nodejs.org/en/download/ 一.windows环境下安装vue 1&#xff1a;node安装 在node.js的官网上下载node的安装包&#xff0c;下载下来之间安装即可&#xff0c;在命令行输入 npm -vnode -v 如下表示安装成功 2&#xff1a;cnpm安装 npm inst…

第十二章Session

第十二章Session 1.什么是Session2.Session的创建与获取3.session域中数据的存取4.Session超时的控制5.浏览器和session之间关联的技术内幕 1.什么是Session 注意&#xff1a;前面的Cookie是保存在客户端&#xff0c;而session是在服务端的 2.Session的创建与获取 这里Session…

让企业的招投标文件、生产工艺、流程配方、研发成果、公司计划、员工信息、客户信息等核心数据更安全。

PC端访问地址1&#xff1a;www.drhchina.com PC端访问地址2&#xff1a; https://isite.baidu.com/site/wjz012xr/2eae091d-1b97-4276-90bc-6757c5dfedee 全方位立体式防护  让数据泄密无处遁形 信息防泄漏是一项系统的整体部署工程&#xff0c;加密监控已成为多数企事业单…

微信小程序Burp抓包

方法有很多&#xff0c;工具也各有差异&#xff0c;主要是学代理流量的思路 Burp流量代理工具小程序 一、Burp证书导入 1、开启代理 开启浏览器的代理&#xff0c;火狐推荐FoxyProxy&#xff0c;Google推荐SwitchyOmega&#xff0c;设置代理为127.0.0.1:8080。 2、下载证书…

LDD学习笔记 -- Linux字符设备驱动

LDD学习笔记 -- Linux字符设备驱动 虚拟文件系统 VFS设备号相关Kernel APIs动态申请设备号动态创建设备文件内核空间和用户空间的数据交换系统调用方法readwritelseek 写一个伪字符设备驱动在主机上测试pcd(HOST)在目标板上测试pcd(TARGET) 字符驱动程序用于与Linux内核中的设备…

Docker入门介绍

【一】从 dotCloud 到 Docker——低调奢华有内涵 1、追根溯源:dotCloud 时间倒回到两年前&#xff0c;有一个名不见经传的小公司&#xff0c;他的名字叫做:dotCloud。 dotCloud 公司主要提供的是基于 PaaS(Platform as a Service&#xff0c;平台及服务) 平台为开发者或开发商…

Electron中调用dll

截止目前Electron的官方稳定版本已经更新到了28.1.1。我在创建Electron项目时用的28.0.0版本&#xff0c;后面在项目中有用到调用dll方法的需求&#xff0c;大致的实现就是将后端给的dll文件引入到项目中&#xff0c;安装ffi-napi依赖&#xff0c;然后进行使用。但是在Electron…

Vue3 + TS + Element-Plus —— 项目系统中封装表格+搜索表单 十分钟写五个UI不在是问题

前期回顾 纯前端 —— 200行JS代码、实现导出Excel、支持DIY样式&#xff0c;纵横合并-CSDN博客https://blog.csdn.net/m0_57904695/article/details/135537511?spm1001.2014.3001.5501 目录 一、&#x1f6e0;️ newTable.vue 封装Table 二、&#x1f6a9; newForm.vue …

pandas笔记:找出在一个dataframe但不在另一个中的index

1 问题描述 假设我们有两个dataframe&#xff08;这一段代码&#xff09;来自transbigdata 笔记&#xff1a;官方文档案例1&#xff08;出租车GPS数据处理&#xff09;-CSDN博客 data tbd.clean_outofshape(data, sz, col[Lng, Lat], accuracy500) data data2 tbd.clean_ta…

【Vue3】2-3 : 选项式API的编程风格与优势

本书目录&#xff1a;点击进入 一、选项式API - 三大优势 ▶ 只有一个参数&#xff0c;不会出现参数顺序的问题&#xff0c;随意调整配置的位置 传入的是一个对象&#xff0c;没有参数顺序问题 对比反面教材&#xff1a; ▶ 非常清晰&#xff0c;语法化特别强 ▶ 非常…

华为“纯血”鸿蒙加速进场 高校、企业瞄准生态开发新风口

近日&#xff0c;华为终端BG CEO、智能汽车解决方案BU董事长余承东在2024年新年信中提出&#xff0c;开启华为终端未来大发展的新十年。 他特别提到&#xff0c;未来要构建强大的鸿蒙生态&#xff0c;2024年是原生鸿蒙的关键一年&#xff0c;将加快推进各类鸿蒙原生应用的开发…

CSS3中transform2D变形详解

CSS3变形 在CSS3中&#xff0c;动画效果包括3个部分&#xff1a; 变形(transform)过渡(transition)动画(animation) 在实际开发中&#xff0c;有时需要实现元素的各种变形效果&#xff0c;如平移&#xff0c;缩放&#xff0c;旋转&#xff0c;倾斜等。 在CSS3中&#xff0c…

基于自适应遗传算法的车间调度matlab仿真,可以任意调整工件数和机器数,输出甘特图

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 4.1 编码与初始化 4.2 适应度函数 4.3 遗传操作 4.4 自适应机制 4.5 终止条件 5.完整程序 1.程序功能描述 基于自适应遗传算法的车间调度matlab仿真,可以任意调整工件数和机器数,输出甘…

【STM32】HAL库的STOP低功耗模式UART串口唤醒BUG,第一个接收字节出错的问题(尚未解决,疑难杂症)

【STM32】HAL库的STOP低功耗模式UART串口唤醒BUG&#xff0c;第一个接收字节出错的问题&#xff08;尚未解决&#xff0c;疑难杂症&#xff09; 文章目录 BUG复现调试代码推测原因及改进方案尝试中断时钟供电外设唤醒方式校验码硬件问题 切换到STOP0模式尝试最终结论和猜想附录…

[SpringBoot]如何在一个普通类中获取一个Bean

最近在项目中出现了一个这种情况&#xff1a;我一顿操作猛如虎的写了好几个设计模式&#xff0c;然后在设计模式中的类中想将数据插入数据库&#xff0c;因此调用Mapper持久层&#xff0c;但是数据怎么都写不进去&#xff0c;在我一顿操作猛如虎的查找下&#xff0c;发现在普通…