本博文是通过实际开发中的一个实例来讲解自定义组件的使用。

第一步:新建自定义组件目录,如图,我新建了个componts和tabList目录,然后右键tabList目录选择新建compont取名为tabList,就生成了如下目录结构,组件结构和page一样,包含js json wxml wxss 四个文件

第二步:写好js 写好wxml  写法和page一样

第三步:在要使用的目标页面,配置下

第四步:以标签的形式在页面中使用;

传递数据和vue一样,通过自定义属性,如图红框中的tabData,组件里再用

properties接受就可以了。
需要本项目demo的朋友赞助后联系我,完全实战项目,接口均可调用。

原创:微信小程序如何使用自定义组件的更多相关文章

  1. 微信小程序页面调用自定义组件内的事件

    微信小程序页面调用自定义组件内的事件 page page.json { "usingComponents": { "my-component": ". ...

  2. 微信小程序中的自定义组件

    微信小程序中的组件 前言 之前做小程序开发的时候,对于开发来说比较头疼的莫过于自定义组件了,当时官方对这方面的文档也只是寥寥几句,一笔带过而已,所以写起来真的是非常非常痛苦!! 好在微信小程序的库从 ...

  3. 手摸手教你微信小程序开发之自定义组件

    前言 相信大家在开发小程序时会遇到某个功能多次使用的情况,比如弹出框.这个时候大家首先想到的是组件化开发,就是把弹出框封装成一个组件,然后哪里使用哪里就调用,对,看来大家都是有思路的人,但是要怎样实现 ...

  4. 微信小程序中的自定义组件(components)

     其实小程序开发很像vue和react的结合,数据绑定和setData  重新渲染页面的数据,最近发现连写组件都是很像,也是醉了,自我认为哈, 因为小程序可以将页面内的功能模块抽象成自定义组件,以便在 ...

  5. 微信小程序中的自定义组件 以及 相关的坑

    Step1 我们初始化一个小程序(本示例基础版本库为 1.7 ),删掉里面的示例代码,并新建一个 components 文件夹,用于存放我们以后开发中的所用组件,今天我们的目的是实现一个 首页 组件, ...

  6. 微信小程序 - radio/checkbox自定义组件

    更新 2019-01-26:首次发布 2019-01-27:增加默认取值选中radio/checkbox,checkbox需在onload取值 2019-01-28:增加radio取值不存在红色提示和 ...

  7. [小程序开发] 微信小程序audio音频播放组件+api_wx.createAudioContext

    引言: audio是微信小程序中的音频组件,可以轻松实现小程序中播放/停止音频等自定义动作. 附上微信小程序audio组件的相关属性说明:https://mp.weixin.qq.com/debug/ ...

  8. 微信小程序底部实现自定义动态Tabbar

    多图警告!!! 最近在工作中遇到这样一个需求:微信小程序底部的Tab需要通过判断登录人的角色动态进行改变,想要实现这个功能依靠小程序原生的Tabbar是不可能实现的了,所以研究了一下自定义Tab,这里 ...

  9. 小程序 模态对话框自定义组件(modal)

    1. 概述 1.1 说明 小程序中使用wx.showModal(Object object)打开一个模态对话框,但是目前小程序所提供的modal中的内容显示比较死板,不能够完全满足工作中所遇到的功能信 ...

随机推荐

  1. Mybatis_three

    延迟加载 实现多对一的延迟加载(association) 例如下面的:有很多个账户信息(招商\工商\农商)是属于一个用户人的 [需求] 查询账户(Account)信息并且关联查询用户(User)信息. ...

  2. Kafka 学习之路(五)—— 深入理解Kafka副本机制

    一.Kafka集群 Kafka使用Zookeeper来维护集群成员(brokers)的信息.每个broker都有一个唯一标识broker.id,用于标识自己在集群中的身份,可以在配置文件server. ...

  3. spring 5.x 系列第17篇 —— 整合websocket (xml配置方式)

    源码Gitub地址:https://github.com/heibaiying/spring-samples-for-all 一.说明 1.1 项目结构说明 项目模拟一个简单的群聊功能,为区分不同的聊 ...

  4. 戴尔R720安装ESXI系统

    1.U盘安装系统,使用UltraISO制作启动盘 参考地址:https://jingyan.baidu.com/article/5225f26b0bb45fe6fa0908bc.html 2.插上U盘 ...

  5. STM32 HAL库学习系列第7篇---定时器TIM 输入捕获功能

    测量脉冲宽度或者测量频率   基本方法 1.设置TIM2 CH1为输入捕获功能:  2.设置上升沿捕获:  3.使能TIM2 CH1捕获功能:  4.捕获到上升沿后,存入capture_buf[0], ...

  6. leetcode笔记 动态规划在字符串匹配中的应用

    目录 leetcode笔记 动态规划在字符串匹配中的应用 0 参考文献 1. [10. Regular Expression Matching] 1.1 题目 1.2 思路 && 解题 ...

  7. c++学习书籍推荐《Advanced C++》下载

    百度云及其他网盘下载地址:点我 作者简介 James Coplien先在威斯康星大学获得电气与计算机工程学士学位,后又在该大学获得计算机科学硕士学位.他在贝尔实验室的软件产品研发部门工作,在这个部门从 ...

  8. C++学习书籍推荐《Exceptional C++》下载

    百度云及其他网盘下载地址:点我 编辑推荐 <Exceptional C++:47个C++工程难题.编程问题和解决方案(中文版)>中的每个问题都给出了难度系数,在这些问题中阐释一些微妙的编程 ...

  9. C语言字符型数据的ASCII码值为何是负数?

    有如下一段C语言程序: #include "stdio.h" int main(void) { char a = 0xC8; printf ("字符a的ASCII码值的1 ...

  10. java高并发系列 - 第12天JUC:ReentrantLock重入锁

    java高并发系列 - 第12天JUC:ReentrantLock重入锁 本篇文章开始将juc中常用的一些类,估计会有十来篇. synchronized的局限性 synchronized是java内置 ...