官网API:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/component.html

自定义组件的原因,可以重复使用,只有数据不同且模板一样,节约开发成本.

wxml

 <!--logs.wxml-->
<swiper-banner Height="400rpx" Width="100%" imgList="{{banners}}" url="picUrl"></swiper-banner>

js

Page({

  /**
* 页面的初始数据
*/
data: {
banners: [], //轮播数组
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
this.getBanners();
},
/**
* 拉取图片
*/
//获取轮播图片
getBanners() {
var self = this;
wx.request({
url: 'https://api.it120.cc/jy02149522/banner/list',
data: {
type: 0
},
success(res) {
console.log(res);
if (res.data.code == 0) {
self.setData({
banners: res.data.data
})
}
}
})
}
})

json

{
"usingComponents": {
"swiper-banner": "../../components/swiper-banner/index"
}
}

我们再来看看模板的代码

wxml

 <view class='swiper'>
<swiper indicator-dots="true" autoplay="true" interval="5000" duration="1000" style="height:{{Height}};width:{{Width}};">
<block wx:for="{{imgList}}" wx:key="*this">
<swiper-item>
<image src="{{item[url]}}" class="slide-image" mode="aspectFill" />
</swiper-item>
</block>
</swiper> <button bindtap='m'>触发methods里面的方法</button>
</view>

js

 Component({
// 私有数据
data: { }, // 方法
methods: {
m() {
console.log('触发了!');
}
}, // 生命周期函数,可以为函数,或一个在methods段中定义的方法名
lifetimes: {
attached: function() {
console.log('attached');
},
moved: function() {},
detached: function() {},
}, // 组件所在页面的生命周期函数
pageLifetimes: {
show: function() {
console.log('生命show!');
},
}, // 变量替换以及修改
properties: {
imgList: {
type: Array,
value: [],
observer: function(newVal, oldVal) {
this.setData({
imgList: newVal
})
}
},
url: {
type: String,
value: ''
},
Height: String,
Width:String
}
})

json

 {
"component": true
}

wxss

 .swiper image{
width: 100%;
}

总结

1. methods里面写方法

2. data初始化变量

3. 但凡变量都和properties脱不了关系

4. 渲染数据应来源于导入组件的页面

5. 被导入的组件必须在json文件定义

{
"component": true
}

6. 引入组件的页面必须在json文件导入对应的组件路径以及名称

{
"usingComponents": {
"swiper-banner": "../../components/swiper-banner/index"
}
}

微信小程序 - 自定义components组件详解A篇的更多相关文章

  1. 微信小程序自定义音频组件,自定义滚动条,单曲循环,循环播放

    小程序自定义音频组件,带滚动条 摘要:首先自定义音频组件,是因为产品有这样的需求,需要如下样式的 而微信小程序API给我们提供的就是这样的 而且产品需要小程序有后台播放功能,所以我们不考虑小程序的 a ...

  2. 微信小程序 自定义导航组件 nav头部 全面屏设计

    nav-dynamic 微信小程序自定义nav头部组件:适配全面屏设计: 实现功能 初始进入页面时,展示初始状态下的nav样式: 页面滚动时,监听页面滚动事件,展示滚动状态下的nav样式: 根据配置字 ...

  3. 微信小程序项目wx-store代码详解

    这篇文章会很长,非常长,特别长,无敌长. 真的是挤牙膏般的项目进度,差不多是8月底有开始这个项目的想法,时至今日都1个多月了,抛去频繁的加班时间,王者时间,羽毛球时间...见缝插针的写这个项目,我竟然 ...

  4. 微信小程序--问题汇总及详解之form表单

    附上微信小程序开发文档链接:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/MINA.html form表单: 当点击 <form/> ...

  5. 微信小程序 this和that详解及简单实例

    微信小程序中,在wx.request({});方法调用成功或者失败之后,有时候会需要获取页面初始化数据data的情况,这个时候,如果使用,this.data来获取,会出现获取不到的情况,调试页面也会报 ...

  6. 微信小程序获取用户手机号详解

    最近在做一款微信小程序,需要获取用户手机号,具体步骤如下: 流程图: 1.首先,客户端调用wx.login,回调数据了包含jscode,用于获取openid(用户唯一标识)和sessionkey(会话 ...

  7. 【微信小程序】支付过程详解

    一.介绍 今天跟大家分享微信小程序集成支付. 二.分析 1.小程序支付API 地址:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-pay.html ...

  8. 微信小程序支付之代码详解

    微信小程序自带的一套规则,类似vue语法,但是好多功能都集成在api中,给了很多初学者轮子,所以首先要熟悉这些api,忘记可照官网继续开发 这里主要说下微信小程序的支付,原理类似上篇介绍的公众网页支付 ...

  9. 微信小程序——自定义图标组件

    字体图标在网页中非常常见了.为了方便在小程序里面重复使用,自定义了一个图标组件,方便控制它的大小,颜色,自定义点击事件. 自定义图标组件的代码如下: 下面的代码是icon文件夹下面的4个文件 inde ...

随机推荐

  1. java switch

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha switch 是 开关:转换 的意思. 支持的数据类型 有 : 字节,字符,短整型,整型 ...

  2. [BJOI2011]禁忌 --- AC自动机 + 矩阵优化 + 期望

    bzoj 2553 [BJOI2011]禁忌 题目描述: Magic Land上的人们总是提起那个传说:他们的祖先John在那个东方岛屿帮助Koishi与其姐姐Satori最终战平.而后,Koishi ...

  3. 【推导】【线段树】hdu5929 Basic Data Structure

    题意: 维护一个栈,支持以下操作: 从当前栈顶加入一个0或者1: 从当前栈顶弹掉一个数: 将栈顶指针和栈底指针交换: 询问a[top] nand a[top-1] nand ... nand a[bo ...

  4. activemq消息重发机制[转]

    大家知道,JMS规范中,Message消息头接口中有setJMSRedelivered(boolean redelivered)和getJMSRedelivered()方法,用于设置和获取消息的重发标 ...

  5. iOS开发经验总结——基础工程

    iOS开发经验总结--依赖库 这篇博客,我想说一下开发中经常遇到的一个问题,虚拟个场景描述一下的话,应该是这样的. 项目经理:今天我们正式开始一个新项目,iOSer你负责把苹果端的APP完成,有没有问 ...

  6. PHP自动加载下——PSR4

    1.先来介绍一下PSR规范 PHP-FIG,它的网站是:www.php-fig.org.就是这个联盟组织发明和创造了PSR规范,其中自动加载涉及其中两个规范,一个是PSR0,一个是PSR4, PSR0 ...

  7. “请不要直接访问超全局$_GET数组”

    下载了一个名为NetBeans的IDE开发PHP程序,当我输入常用的的$name = $_GET['name'];时却收到警告:请不要直接访问超全局$_GET数组 请改用某些过滤函数(例如filter ...

  8. Supported_Hardware#4G_LTE_cards_and_modems

    https://wiki.mikrotik.com/wiki/Supported_Hardware#4G_LTE_cards_and_modems

  9. Wix使用整理(一)

    由于工作需要,学习了一段时间Wix,总算小有起色.鉴于国内Wix  的普及和使用有限,这里将个人遇到得问题和解决方案记录下来,以便交流和相互促进. Wix :全称 Windows Installer ...

  10. 解决HUE报错MultipleObjectsReturned: get() returned more than one Document2 -- it returned 2!

    表现:界面上报错:,刚登陆进去就能看到,点击执行也会出现.日志里报: Traceback (most recent call last): File "/home/work/hue-3.10 ...