微信小程序-组件化

news2024/11/27 10:39:00

微信小程序-组件化

自定义组件

业务描述:代码中有多处需要引用同一段代码,需要把他封装成一个组件

流程

  • 在根目录创建components用于存放通用组件
  • 在创建组件文件夹
  • 选择新建components 会自动生成4个文件
  • json文件 会出现"component": true, 即组件创建成功

通用组件创建

section-info.wxml

<view>
  <view>我是标题</view>
  <view>我是内容</view>
</view>

index.wxml

主页面直接引用

<!--pages/05_learn_cpns/index.wxml-->
<!-- 自定义组件 -->
<section-info/>
<section-info/>

index.json

直接引用路径配置

{
  "usingComponents": {
    "section-info":"/components/section-info/section-info"
  }
}

也可在全局配置app.json中进行配置其好处就是配置后所有的page页面都可使用

 "usingComponents": {
    "section-info":"/components/section-info/section-info"
  },

组件的样式

  • 组件内不能使用id选择器,属性选择器,标签选择器
  • 组建的class只对组件内有用

组件通信

类似于vue 的props

properties

往组件内传递数据

index.wxml

<!--pages/05_learn_cpns/index.wxml-->
<!-- 自定义组件 -->
<section-info title="hahah" content="zzzzz" />
<section-info title="hehehehe" content="aaaaa"/>

section-info.js

组件内

properties: {
    title:{
      type:String,
      value:"标题"

    },
    content:{
      type:String,
      value:"内容"
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

section-info.wxml


<view>
  <view>{{title}}</view>
  <view>{{content}}</view>
</view>

在这里插入图片描述

组件往外传递事件-自定义事件triggerEvent

section-info.wxml

组件bindtap绑定事件


<view>
  <view bindtap="ontab">{{title}}</view>
  <view>{{content}}</view>
</view>

section-info.js

组件写逻辑在methods中

methods: {
    ontab(){
     this.triggerEvent("titleclick","bbbb")
    }
  }

index.wxml

要传递的外部页面

<!--pages/05_learn_cpns/index.wxml-->
<!-- 自定义组件 -->
<section-info title="hahah" content="zzzzz" bind:titleclick="oninfo" />
<section-info title="hehehehe" content="aaaaa"/>

index.js

 oninfo(event){
    // console.log("q111");
    console.log(event.detail);
  },

在这里插入图片描述

练习:

创建组件 navigation

navigation.wxml

<!--components/navigation/navigation.wxml-->
<!-- tab例子 -->
<view class="tab">
  <block wx:for="{{titles}}" wx:key="*this">
    <view 
    class="item"
    bindtap="itemtap"
    data-index="{{index}}"
    class="item {{index === currentIndex ? 'active': ''}}"
    >
      {{item}}
    </view>
  </block>
</view>


navigation.wxss

.tab{
  display: flex;
  height: 40px;
  line-height: 40px;
  text-align: center;
}
.active{
  border-bottom: 3px solid #ff8189;
  padding: 5px;
}
.tab .item{
  flex: 1;
}

navigation.js

// components/navigation/navigation.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    titles:{
      type:Array,
      value:[]
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    currentIndex:0
  },

  /**
   * 组件的方法列表
   */
  methods: {
    itemtap(event){
      //console.log(event.currentTarget.dataset);
      const currentIndex = event.currentTarget.dataset.index
      this.triggerEvent("titleclick",currentIndex)
      this.setData({currentIndex})
    }
  }
})

页面
导入组件

index.json

{
  "usingComponents": {
    "section-info":"/components/section-info/section-info",
    "navigation":"/components/navigation/navigation"
  }
}

index.wxml

<!--pages/05_learn_cpns/index.wxml-->
<!-- 自定义组件 -->

<navigation titles='{{arr1}}' bind:titleclick="oninfo11" />

index.js

// pages/05_learn_cpns/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    arr1:["蔬菜","水果","青菜"]
  },
 
  oninfo11(event){
    console.log(event.detail);
  },
  
})

在这里插入图片描述

插槽的使用

单个插槽的使用

创建组件my-slot

<view>
  <view>header</view>
  <view>
  <slot></slot>
  </view>
  <view>footer</view>
</view>
index.json
{
  "usingComponents": {
    "my-solt":"/components/my-solt/my-solt"
  }
}
index.html

<my-solt>
  <button>按钮</button>
</my-solt>

多个插槽

my-solt.wxml

在组件中预留多个插槽

<!--components/my-solt/my-solt.wxml-->
<view>
    <view>
      <slot name="top" ></slot>
    </view>
    <view>
    <slot name="center"></slot>
    </view>
    <view>
    <slot name="descend"></slot>
    </view>
</view>

my-solt.js

开启多个插槽配置


Component({
 
  options: {
    multipleSlots: true
  },


})

index.wxml

页面进行使用

<my-solt>
  <button slot="top">top</button>
  <view slot="center">center</view>
  <button slot="descend">descend</button>
</my-solt>

在这里插入图片描述

组件的生命周期

指的是组件自身的一些函数,这些函数在特殊的时间点或遇到一些特殊的框架事件被自动触发

自小程序基础库2.2.3起,组件的生命周期也可以在lifetimes里进行声明

lifetimes:{
    created(){
      console.log("created在组件实例刚刚被创建时执行");
    },
    attached(){
      console.log("attached 在组件实例进入页面节点树时执行");
    },
    ready(){
      console.log("ready在组件在视图层完成后执行");
    },
    moved(){
      console.log("moved在组件实例被移动到节点树另一个位置时执行");
    },
    detached(){
      console.log("detached在组件实例被从页面节点树中移除");
    },
    error(){
      console.log("error每当组件方法抛出错误时执行");
    }
    
  },

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

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

相关文章

Talk预告 | 浙江大学乔硕斐:语言模型提示推理综述

本期为TechBeat人工智能社区第480期线上Talk&#xff01; 北京时间3月9日(周四)20:00&#xff0c;浙江大学计算机科学与技术硕士——乔硕斐的Talk将准时在TechBeat人工智能社区开播&#xff01; 他与大家分享的主题是: “语言模型提示推理综述 ”&#xff0c;届时将分享对语言…

知识点学习登记备份信息

知识点记录 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8ovilnIi-1681441105895)(C:\Users\admin\AppData\Roaming\Typora\typora-user-images\image-20211228090433836.png)] [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上…

计算机网络 实验三

⭐计网实验专栏&#xff0c;欢迎订阅与关注&#xff01; ★观前提示&#xff1a;本篇内容为计算机网络实验。内容可能会不符合每个人实验的要求&#xff0c;因此以下内容建议仅做思路参考。 一、实验目的 理解路由器转发分组的机制。 理解路由表的作用、基本结构。 掌握静态路…

Redis常见命令

Redis是典型的key-value数据库&#xff0c;key一般是字符串&#xff0c;而value包含很多不同的数据类型&#xff1a;1. Redis通用命令 通用指令是部分数据类型的&#xff0c;都可以使用的指令&#xff0c;常见的有&#xff1a; - KEYS&#xff1a;查看符合模板的所有key- KEYS…

cm-14.1 Android系统启动过程分析(2)- init进程的启动之前的那些事(偏嵌入式方向)

声明 前阶段在项目中涉及到了Android系统定制任务,Android系统定制前提要知道Android系统是如何启动的。本文参考了一些书籍的若干章节本文使用的代码是LineageOS的cm-14.1,对应Android 7.1.2,可以参考我的另一篇博客:如何下载Nexus5的LineageOS14.1(cm-14.1)系统源码并编译…

Golang每日一练(leetDay0038) 二叉树专题(7)

目录 112. 路径总和 Path Sum &#x1f31f; 113. 路径总和 II Path Sum II &#x1f31f;&#x1f31f; 114. 二叉树展开为链表 Flatten Binary Tree to Linked-list &#x1f31f;&#x1f31f; &#x1f31f; 每日一练刷题专栏 &#x1f31f; Golang每日一练 专栏 …

Nacos作为注册中心和配置中心

Cloud依赖&#xff1a; <dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-alibaba-dependencies</artifactId><version>${spring-cloud-alibaba.version}</version><type>pom</type><sco…

圣戈班Saint-Gobain EDI需求分析

圣戈班Saint-Gobain&#xff08;以下简称&#xff1a;圣戈班&#xff09;是一家总部位于法国的跨国公司&#xff0c;成立于1665年。它是全球领先的建筑和高性能材料解决方案提供商之一&#xff0c;产品包括玻璃、陶瓷、管道、密封材料等&#xff0c;在欧洲、北美、亚洲和南美等…

【软件测试】可以写进简历的项目巨真实

昨天逛帖子&#xff0c;看到有自学软件测试的同学苦恼于看书学习之后&#xff0c;学过的知识转瞬即忘&#xff0c;并且没有上手的测试项目&#xff0c;不管是知识巩固还是面试求职&#xff0c;都比较艰难。 其实&#xff0c;初次接触技术工作&#xff0c;遇到这样的困难是正常…

【数据结构】二叉树链式结构

&#x1f680;write in front&#x1f680; &#x1f4dc;所属专栏&#xff1a;初阶数据结构 &#x1f6f0;️博客主页&#xff1a;睿睿的博客主页 &#x1f6f0;️代码仓库&#xff1a;&#x1f389;VS2022_C语言仓库 &#x1f3a1;您的点赞、关注、收藏、评论&#xff0c;是对…

【Linux】CentOS7.6 升级 gcc/g++

CentOS 7.6 升级 gcc/g的方法&#xff0c;不一定适用于其他linux系统 1.查看版本 g -v gcc -v当前查看版本&#xff0c;发现是4.8.5&#xff0c;这已经是2015年的旧版本了&#xff0c;对c11的支持不是很完善&#xff0c;为了方便学习和编写新版本的代码&#xff0c;升级一下还…

使用python采集分享119个PHP江湖论坛源码,总有一款适合您

分享119个PHP江湖论坛源码&#xff0c;总有一款适合您 119个PHP江湖论坛源码下载链接&#xff1a;https://pan.baidu.com/s/1Zz-GiS6WT3i16dZMz-5rvQ?pwdr416 提取码&#xff1a;r416 Python采集代码下载链接&#xff1a;采集代码.zip - 蓝奏云 我的博客地址&#xff1a;…

【Unity URP】探讨描边方案 自定义后处理Volume

写在前面 本篇内容实现了在URP下获取深度、法线实现描边的后处理描边之前做的工作&#xff0c;包括讨论描边方案&#xff0c;以及写shader之前的自定义renderFeature和Volume组件的过程。 由于是想复刻《SCHiM》游戏里的画面风格&#xff0c;所以本篇文章的需求很明确&#x…

国网B接口调阅实时视频规范解读和代码示例分析

接口描述 国网B接口调阅实时视频&#xff0c;相关规范写的比较粗略&#xff1a; 调阅实时视频包括信令接口和媒体流接口&#xff0c;采用标准的SIP INVITESDP流程&#xff0c;媒体传输使用RTP/RTCP。 SDP 中 RTP Payload 的取值应遵守下面接口参数中的定义&#xff1a; a&a…

用低代码平台可视化设计表单

表单在前端可谓是非常常见的场景&#xff0c;而且通常需要花费开发非常多的时间来处理各种复杂的逻辑。特别是在企业中后台的业务中&#xff0c;存在着大量的表单&#xff0c;比如客户的订单&#xff0c;投诉的问题单&#xff0c;服务跟进过程每个流程的流转。凡是存在用户输入…

西安五日游规划

文章目录前言一、行前准备二、必带清单三、打卡美食四、景点地理坐标五、旅游时间轴六、景点小巴士第一天第二天第三天第四天第五天其他七、住宿八、小贴士总结前言 西安五日游。计划从北京出发&#xff0c;游玩五天&#xff0c;第五天回京。 一、行前准备 计划行程 票务预订 …

雅思资料汇总

关于雅思 流程&#xff1a; 雅思考试将全面启用现场照相和生物识别技术, 包括指纹采集和验证,考生将无需提供个人照片。我们建议考生在考试当天提前到场以完成个人物品放置&#xff0c;身份证件验证&#xff0c;检录入场等一系列重要考前准备工作。大厅在当天会贴出考生的考号…

【网络原理】应用层协议 与 传输层协议

✨个人主页&#xff1a;bit me&#x1f447; ✨当前专栏&#xff1a;Java EE初阶&#x1f447; 目 录&#x1f3c9;一. 应用层协议⚾️二. 传输层协议&#x1f452;1. UDP 协议&#x1f302;2. 校验和&#x1f453;3. TCP 协议&#x1f3c9;一. 应用层协议 我们自己写的应用程…

2023年MathorCup数模B题赛题

B 题 城市轨道交通列车时刻表优化问题 列车时刻表优化问题是轨道交通领域行车组织方式的经典问题之一。 列车时刻表规定了列车在每个车站的到达和出发(或通过)时刻&#xff0c;其在实 际运用过程中&#xff0c;通常用列车运行图来表示。图 1 为某一运行图的示例&#xff0c;图 …

代码随想录算法训练营第五十九天 | 503. 下一个更大元素 II、42. 接雨水

503. 下一个更大元素 II 方法一&#xff1a;将两个nums数组放在一起&#xff0c;使用单调栈求下一个更大元素&#xff0c;最后再把结果集即result数组resize到原数组大小就可以了。 方法二&#xff1a;在遍历的过程中模拟走了两遍nums class Solution { public:vector<in…