微信小程序精通到入门---06 组件
2021/4/12 20:55:22
本文主要是介绍微信小程序精通到入门---06 组件,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
微信小程序精通到入门---06 组件
一、组件基本使用
1、组件基本使用
1) 新建一个一级目录components,并且右键创建一个component组件
2) 组件注册
在.json文件进行注册,app.json是全局注册
"usingComponents": { "top": "/components/top/top", "baseTable": "/components/table/baseTable", "base": "/components/base/base", "count": "/components/count/count" },
3) 组件的js
组件的js主要是通过properties接收父页面或父组件的参数,可以通过this.data.获取,页面可以使用模板语法{{}},通过ready()函数,是组件加载时的钩子函数。 组件内可以通过<slot>插槽接收组件标签的内容。案例如下:
Component({ externalClasses:['myclass'], // 外部样式 组件内引用 <view class="myclass"> 组件使用:<top myclass='custom_class'> options: {multipleSlots: true }, // 是否使用多slot /** * 组件的属性列表 */ properties: { title:{ type:String, value:'top' } },
wxml: (myclass 是外部传入的样式,即在页面编写组件时使用 myclass="自定义样式",这个样式会传递给组件内部使用)
<view class="top_nav"> <view class="tit_ myclass"> <i>.</i> {{title}} <i>.</i> <slot/> </view> </view>
wxss:
.top_nav{ height: 85rpx; width: 100%; display: flex; justify-content: space-between; box-sizing: border-box; background: #2793da; line-height: 100%; text-align: center; } .top_nav .tit_{ line-height: 85rpx; height: 85rpx; width: 100%; color: #fff; }
4) 页面使用组件
新建一个comp页面,用来演示组件的使用
<view style="width:750rpx"> <top title="{{title}}" myclass="custom_class">顶部bar</top> </view>
2、table组件案例
js:
Component({ externalClasses: ['_class'], options: { multipleSlots: true }, properties: { _height: { type: Number, value: 65 }, titles: { type: Array, value: ['', '', ''] }, widths: { type: Array, value: [30, 40, 30] }, props: { type: Array, value: ['id', 'name', 'age'] }, datas: { type: Array, value: [{ "id": 1, "name": 'zhangsan1', "age": 20 }, { "id": 2, "name": 'zhangsan2', "age": 22 }] } }, data: { show:false }, methods: { }, ready () { this.setData({ size:this.data.datas.length }); } })
Wxml:
<view class="baseTable _class"> <block wx:if="{{size!=0}}"> <view class="tr" style="height: {{_height}}rpx;"> <block wx:for="{{titles}}" wx:key="id"> <view class="th" style="width:{{widths[index]}}%">{{item}}</view> </block> </view> <block wx:for="{{datas}}" wx:key="id"> <view class="tr" style="height: {{mheight}}rpx;"> <block wx:for="{{props}}" wx:for-item="obj"> <view class="td" style="width:{{widths[index]}}%">{{item[obj]}}</view> </block> </view> </block> </block> </view>
wxss:
view .baseTable{width: 100%; border: 0px solid #C1D2DE;} view .baseTable .tr{display: flex;width: 100%;justify-content: center;align-items: center;height: 80rpx;} view .baseTable .td{display: flex;justify-content: center;text-align: center;height: 100%;box-sizing: border-box} view .baseTable .th{display: flex;justify-content: center;text-align: center;height: 100%;box-sizing: border-box} view .baseTable .th{padding:10rpx 0px;background:#333;color:#fff;border:#C1D2DE 1px solid;} view .baseTable .td{padding:10rpx 0px;border:#C1D2DE 1px solid;white-space:pre-line;display:block } .baseTable {font-size: 24rpx;} .baseTable th{height: 40rpx;} .baseTable td{height: 40rpx;}
页面引用和效果
<view style="width:750rpx"> <baseTable titles="{{titles}}" datas="{{datas}}"></baseTable> </view>
3、组件内数据传递
父组件通过properties给子组件传递数据,子组件通过 this.triggerEvent('customEvent', {参数}),触发事件并且传递参数,父组件通过bindcustomEvent事件绑定方法接收。
<view class="base _class"> <slot name="first"></slot> {{out_text}} <button bindtap='customMethod'>点击</button> <button bindtap='triggerEventTop'>触发父组件的方法</button> <slot name="end"></slot> </view>
Component({ externalClasses:['_class'], // <view class='base _class'> options: {multipleSlots: true }, /** * 组件的属性列表 */ properties: { out:{ type:String, value:'' } }, /** * 组件的初始数据 */ data: { inner:1, out_text:'' }, /** * 组件的方法列表 */ methods: { customMethod() { var temp = ''; for(var i =0 ;i<=this.data.inner; i++) { temp += this.data.out; } this.data.inner++; this.setData({ out_text: temp }) }, // 子组件的方法触发父组件绑定的事件 triggerEventTop() { // 触发父组件事件 this.triggerEvent('customEvent', {a:1,b:2}); // 父使用 bindcustomEvent="" } } })
页面引用组件 (这里使用了命名slot,即组件内用slot name = "name" 占位,页面使用带slot属性="name",传入html元素)
<view style="width:750rpx"> <base bindcustomEvent="changeOutStr" out="{{out}}"> <block slot="first">首</block> <block slot="end">尾</block> </base> </view>
4、综合案例
功能概述: 我们设计一个count组件,这个组件初始可以设置count值,并且有2个按钮,一个是increment,一个是substract,这2个按钮可以加减count的值。
流程概述:父组件(页面)通过 count属性给count组件通过properties的形式赋值,count组件内部ready函数校验count值的正确,count组件内部加减按钮触绑定事件,事件函数的功能是触发父组件自定义事件,并且传递count加减后的值(如果加减值超越边界,那么return),父组件自定义事件的方法负责更改父组件的count值,此时子组件的properties属性的count值就被改变了。
js 、wxss、wxml:
// components/count/count.js Component({ externalClasses:['_class'], // <view class='base _class'> options: {multipleSlots: true }, /** * 组件的属性列表 */ properties: { count:{ type:Number, value:1 }, min:{ type:Number, value:0, }, max:{ type:Number, value:10 } }, data: { }, ready() { var count = this.data.count; count = Math.max(count,this.data.min); count = Math.min(count,this.data.max); this.setData({ count:count }) }, methods: { increment() { var count = this.data.count + 1; if(count>this.data.max) { return ; } this.triggerEvent('changeCount', {count:count}); }, substract() { var count = this.data.count - 1; if(count < this.data.min) { return; } this.triggerEvent('changeCount', {count:count}); }, }, })
<view class="wrap_class _class"> <button bindtap="increment">+</button> <text>{{count}}</text> <button bindtap="substract">-</button> </view>
.wrap_class { display: flex; justify-content: space-between; flex-wrap:nowrap; height: 80rpx; line-height: 80rpx; width: 750rpx; margin-top: 10rpx; }
页面使用组件:
<view style="width:750rpx"> <count count="{{out_count}}" bindchangeCount="changeCount"> </count> </view>
这篇关于微信小程序精通到入门---06 组件的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-03-30微信小程序的网络设置,及网络请求:wx.request(OBJECT)
- 2024-01-22基于taro搭建小程序多项目框架
- 2024-01-13小程序开发:在插件市场寻找步骤条组件并二开
- 2024-01-05钉钉小程序生态—企业机器人加互动卡片,改善用户体验的开始!
- 2023-12-29【UniApp】-uni-app-打包成小程序
- 2023-12-26性能翻倍!京东亿级体量小程序优化实践
- 2023-12-25小程序优化:第三方SDK过大解决方案
- 2023-11-26微信小程序文件预览和下载-文件系统
- 2023-11-2652天学习微信小程序计划No.2:注册小程序账号&安装开发者工具
- 2023-11-1952天学习微信小程序计划No.1:小程序简介