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

(一)创建

        找到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": {}
}

 

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

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

相关文章

2023年全国职业院校技能大赛软件测试赛题—单元测试卷⑤

单元测试 一、任务要求 题目1&#xff1a;根据下列流程图编写程序实现相应处理&#xff0c;执行j10*x-y返回文字“j1&#xff1a;”和计算值&#xff0c;执行j(x-y)*(10⁵%7)返回文字“j2&#xff1a;”和计算值&#xff0c;执行jy*log(x10)返回文字“j3&#xff1a;”和计算值…

Vue 中修改 Element 组件的 下拉菜单(Dropdown) 的样式

Vue 中修改 Element 组件的 下拉菜单(Dropdown) 的样式 今天在项目中碰到一个 UI 改造的需求&#xff0c;需要根据设计图把页面升级成 UI 设计师提供的设计图样式。 到最后页面改造完了&#xff0c;但是 UI 提供的下拉菜单样式全部是黑色半透明的&#xff0c;只能硬着头皮改了。…

银河麒麟v10安装前端环境(Node、vue、Electron+vite)

此帖子所提到的所有依赖包都是基于银河麒麟v10真机的arm架构包&#xff0c;如果是在windows上的虚拟机上 把依赖包换成x64的包即可&#xff0c;方法步骤都是一样 一.node安装 原始方法安装&#xff08;建议用第二种nvm方法&#xff0c;因为更简单&#xff09;&#xff1a; 1…

探索媒体查询的世界:适应多种设备的技巧与实践(上)

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

PDF结构详解

文章目录 介绍前言高保真的文件什么是PDF&#xff1f;PDF的一些优点版本摘要谁在使用PDF&#xff1f;有用的免费软件谁应该阅读 构建一个简单PDF文件基本PDF语法File StructureDocument ContentPage Content 构建简单PDF文件头目录&#xff0c;交叉引用表和文件尾主要对象图形内…

力扣hot100 二叉树的最近公共祖先 递归

Problem: 236. 二叉树的最近公共祖先 &#x1f468;‍&#x1f3eb; 参考大佬题解 &#x1f496; 图解 时间复杂度, 示例&#xff1a; O ( n ) O(n) O(n) 空间复杂度, 示例&#xff1a; O ( n ) O(n) O(n) &#x1f496; AC code /*** Definition for a binary tree node.*…

PostgreSQL之SEMI-JOIN半连接

什么是Semi-Join半连接 Semi-Join半连接&#xff0c;当外表在内表中找到匹配的记录之后&#xff0c;Semi-Join会返回外表中的记录。但即使在内表中找到多条匹配的记录&#xff0c;外表也只会返回已经存在于外表中的记录。而对于子查询&#xff0c;外表的每个符合条件的元组都要…

概率论与数理统计-第7章 假设检验

假设检验的基本概念 二、假设检验的基本思想 假设检验的基本思想实质上是带有某种概率性质的反证法&#xff0c;为了检验一个假设H0,是否正确&#xff0c;首先假定该假设H0正确&#xff0c;然后根据抽取到的样本对假设H0作出接受或拒绝的决策&#xff0c;如果样本观察值导致了…

如何从 Keras 中的深度学习目录加载大型数据集

一、说明 数据集读取&#xff0c;使用、在磁盘上存储和构建图像数据集有一些约定&#xff0c;以便在训练和评估深度学习模型时能够快速高效地加载。本文介绍Keras 深度学习库中的ImageDataGenerator类等工具自动加载训练、测试和验证数据集。 二、ImageDataGenerator加载数据集…

CMake入门教程【高级篇】配置文件(configure_file)

😈「CSDN主页」:传送门 😈「Bilibil首页」:传送门 😈「动动你的小手」:点赞👍收藏⭐️评论📝 文章目录 1.configure_file作用2.详细使用说明3.完整代码示例4.实战使用技巧与注意事项5.总结分析1.configure_file作用

添加气泡与菜单

目录 1、添加气泡 1.1、文本提示气泡 1.2、带按钮的提示气泡 1.3、自定义气泡 2、菜单 2.1、创建默认样式的菜单 2.2、创建自定义样式的菜单 1、添加气泡 Popup属性可绑定在组件上显示气泡弹窗提示&#xff0c;设置弹窗内容、交互逻辑和显示状态。主要用于…

【野火i.MX6ULL开发板】利用microUSB线烧入Debian镜像

0、前言 烧入Debian镜像有两种方式&#xff1a;SD卡、USB SD卡&#xff1a;需要SD卡&#xff08;不是所有型号都可以&#xff0c;建议去了解了解&#xff09;、SD卡读卡器 USB&#xff1a;需要microUSB线 由于SD卡的网上资料很多了&#xff0c;又因为所需硬件&#xff08;SD卡…

基于人工蜂群算法多无人机轨迹规划

#生物背景 蜜蜂是一种群居生物&#xff0c;生物学家研究发现蜜蜂以跳舞的方式来交换蜜源信息。根据分工的不同&#xff0c;蜜蜂被分为三个工种&#xff1a;引领峰、跟随蜂、侦察蜂。 侦察蜂的职责是侦察蜜源&#xff08;即蜜蜂的食物&#xff09;&#xff0c;一旦某一个侦察蜂…

XCTF:MISCall[WriteUP]

使用file命令&#xff0c;查看该文件类型 file d02f31b893164d56b7a8e5edb47d9be5 文件类型&#xff1a;bzip2 使用bzip2命令可对该文件进行解压 bzip2 -d d02f31b893164d56b7a8e5edb47d9be5 生成了一个后缀为.out的文件 再次使用file命令&#xff0c;查看该文件类型 file…

2024最新适用于 Windows 、Mac 的最佳屏幕录制软件

屏幕录制软件可以帮助我们录制 PC 和MacBook的实时屏幕视频。如果您想为 优酷录制视频&#xff0c;或者您正在为您的公司制作基于视频的项目&#xff0c;并且需要捕获屏幕的实时视频录制&#xff0c;那么我们在此列出了 一 款适合您的 Windows 、Mac的 2024 年最佳屏幕录制软件…

Qt框架学习 --- CTK

系列文章目录 文章目录 系列文章目录前言一、准备阶段二、使用介绍1.核心思想2.源码2.1.框架部分资源目录树2.2.框架部分源码2.3.插件部分资源目录树2.4.插件部分源码 3.文件结构4.运行效果 总结 前言 随着开发的深入&#xff0c;CTK框架还是要关注一下。了解CTK还是有必要的。…

Apache Doris 聚合函数源码阅读与解析|源码解读系列

笔者最近由于工作需要开始调研 Apache Doris&#xff0c;通过阅读聚合函数代码切入 Apache Doris 内核&#xff0c;同时也秉承着开源的精神&#xff0c;开发了 array_agg 函数并贡献给社区。笔者通过这篇文章记录下对源码的一些理解&#xff0c;同时也方便后面的新人更快速地上…

【Oracle】数据库对象

一、视图 1、视图概述 视图是一种数据库对象 视图 > 封装sql语句 > 虚拟表 2、视图的优点 简化操作&#xff1a;视图可以简化用户处理数据的方式。着重于特定数据&#xff1a;不必要的数据或敏感数据可以不出现在视图中。视图提供了一个简单而有效的安全机制&#x…

Odrive 学习系列一:vscode 编译Odrive

搭建环境可参考Markerbase教程,很详细了。 简单说一两点: 解压ODrive-fw-v0.5.1.zip: 打开ODrive-fw-v0.5.1文件夹,找到Firmware文件夹,用vscode打开该文件夹: 按照以下内容操作: 编译工程: 打开 中断(terminal),输入 make -j4 回车 进行编译。编译…

基于JavaWeb+BS架构+SpringBoot+Vue基于hive旅游数据的分析与应用系统的设计和实现

基于JavaWebBS架构SpringBootVue基于hive旅游数据的分析与应用系统的设计和实现 文末获取源码Lun文目录前言主要技术系统设计功能截图订阅经典源码专栏Java项目精品实战案例《500套》 源码获取 文末获取源码 Lun文目录 1 概 述 5 1.1 研究背景 5 1.2 研究意义 5 1.3 研究内容…