微信小程序 - 自定义components组件详解A篇
官网API:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/component.html
自定义组件的原因,可以重复使用,只有数据不同且模板一样,节约开发成本.
wxml
1 <!--logs.wxml--> 2 <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
1 <view class='swiper'> 2 <swiper indicator-dots="true" autoplay="true" interval="5000" duration="1000" > 3 <block wx:for="{{imgList}}" wx:key="*this"> 4 <swiper-item> 5 <image src="{{item[url]}}" class="slide-image" mode="aspectFill" /> 6 </swiper-item> 7 </block> 8 </swiper> 9 10 <button bindtap='m'>触发methods里面的方法</button> 11 </view>
js
1 Component({ 2 // 私有数据 3 data: { 4 5 }, 6 7 // 方法 8 methods: { 9 m() { 10 console.log('触发了!'); 11 } 12 }, 13 14 // 生命周期函数,可以为函数,或一个在methods段中定义的方法名 15 lifetimes: { 16 attached: function() { 17 console.log('attached'); 18 }, 19 moved: function() {}, 20 detached: function() {}, 21 }, 22 23 // 组件所在页面的生命周期函数 24 pageLifetimes: { 25 show: function() { 26 console.log('生命show!'); 27 }, 28 }, 29 30 // 变量替换以及修改 31 properties: { 32 imgList: { 33 type: Array, 34 value: [], 35 observer: function(newVal, oldVal) { 36 this.setData({ 37 imgList: newVal 38 }) 39 } 40 }, 41 url: { 42 type: String, 43 value: '' 44 }, 45 Height: String, 46 Width:String 47 } 48 })
json
1 { 2 "component": true 3 }
wxss
1 .swiper image{ 2 width: 100%; 3 }
总结
1. methods里面写方法
2. data初始化变量
3. 但凡变量都和properties脱不了关系
4. 渲染数据应来源于导入组件的页面
5. 被导入的组件必须在json文件定义
{ "component": true }
6. 引入组件的页面必须在json文件导入对应的组件路径以及名称
{ "usingComponents": { "swiper-banner": "../../components/swiper-banner/index" } }