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

第一步:新建自定义组件目录,如图,我新建了个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. 03 我的第一个html页面

    <!--定义文档的类型,一个html就是一个文档--> <!DOCTYPE html> <html lang="en"> <!--head ...

  2. 08、MySQL—字符串型

    字符串型 1.Char 定长字符:指定长度之后,系统一定会分配指定的空间用于存储数据 基本语法: char(L),L代表字符数(中文与英文字母一样),L长度为0到255 2.Varchar 变长字符: ...

  3. 性能监控: SPF4J介绍

    1. 总体介绍 性能测试是一项在软件生命开发周期中总是被置于最后一环的活动.我们经常依靠 Java profilers 去帮助发现性能问题. 在这篇文章中,我们将会学习关于 Java 的简单性能测试框 ...

  4. SQL注入与防御

    SQL注入与防御 下载:https://pan.baidu.com/s/1ZiLVY2IxHXD9-bMRS61Fzg 提取码:yof2

  5. MagicBook屏幕频闪解决方案(Windows、MacOS)

    对于已经看到这篇文章的小伙伴们,就不解释何为PWM调光频闪了. MagicBook笔记本性价比高,但屏幕素质确实很一般,我们人眼看不出来的频闪,实际对眼睛损害很大,如图(需要设置快门参数,如1/400 ...

  6. POJ 2455:Secret Milking Machine(二分+最大流)

    http://poj.org/problem?id=2455 题意:给出n个点和m条无向路,每条路都有一个长度.从1点到n点要走t次两两互不重合的路.求出每条1->n的路中相邻两点最大值的最小值 ...

  7. 关于安装了git或者小乌龟(TortoiseGit)使用之后出现红色! 绿色√ 蓝色?的解决办法:

    在当前目录中新建文件保存为(删除git信息.bat)在其写入:for /r . %%a in (.) do @if exist "%%a\.git" rd /s /q " ...

  8. scrapy基础知识之 Scrapy-Redis分布式策略:

    Scrapy-Redis分布式策略: 假设有四台电脑:Windows 10.Mac OS X.Ubuntu 16.04.CentOS 7.2,任意一台电脑都可以作为 Master端 或 Slaver端 ...

  9. 西门子PLC中各个组织块OB作用(OB1、OB100……)

    1.自由循环组织块OB1 S7  CPU启动完成后,操作系统循环执行OB1,OB1执行完成后,操作系统再次启动OB1.在OB1中可以调用FB.SFB.FC.SFC等用户程序使其循环执行.除OB90以外 ...

  10. JAVA基础-基础类型

    学习JAVA的同学都知道,数据类型是基础中的基础,而JAVA本身是强类型语言,他对变量的类型有这魔一般的执著,所以学好JAVA的重心就是要学好数据类型.既然有强类型语言,就会有弱类型语言如PHP.Ja ...