小程序组件介绍
- 组件是可复用的软件模块
- 组件是用来封装页面中某一部分功能的，例如：轮播图组件、底部tabBar组件、业务组件
- 多个组件的灵活组合可以实现不同的页面功能展示
小程序中常用的组件
- view
- text
- button
- icon
- swiper
- input
- navigator
- image
- radio
- checkbox
view组件
视图容器
text组件
文本组件
button组件
button 组件 开放能力
<!-- 利用button开放的能力 获取用户的信息 -->
<!-- 定义开放能力响应的事件 -->
<button open-type="getUserInfo"
type="primary" bindgetuserinfo="handleUserInfo">获取用户信息</button>
<!-- 利用button 开放能力share转发页面 -->
<button type="default" open-type="share">share转发页面</button>
<!-- openSetting -->
<button type="warn" open-type="openSetting">打开系统设置页面</button>
// index.js
// 获取用户信息
handleUserInfo:function(e){
// 打印e
console.log(e);
console.log(e.detail.userInfo);
},
icon组件
<icon type="success"></icon>
<icon type="success_no_circle"></icon>
<icon type="download"></icon>
<icon type="search"></icon>
<icon type="clear"></icon>
<icon type="warn"></icon>
<icon type="cancel"></icon>
<icon type="waiting"></icon>
<icon type="info"></icon>
swiper组件
- 滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。
<!--
autoplay:自动播放
indicator-dots：是否显示面板指示点
interval：自动切换时间间隔
indicator-color：指示点颜色
indicator-active-color：当前选中的指示点颜色 -->
<swiper indicator-color="#ffcce3" indicator-active-color="#00beff"
indicator-dots="true" interval="3000" autoplay="{{true}}">
<swiper-item wx:for="{{swiperData.message}}" wx:key='*this'>
<image src="{{item.image_src}}"></image>
</swiper-item>
</swiper>
navigator组件
- 页面跳转组件
<navigator open-type="navigate" url="/pages/logs/logs">等价默认不写navigate</navigator>
<navigator open-type="redirect" url="/pages/logs/logs">redirect</navigator>
<navigator open-type="switchTab" url="/pages/text/text">switchTab</navigator>
<navigator open-type="reLaunch" url="/pages/logs/logs">reLanuch</navigator>
image组件
- 图片。支持 JPG、PNG、SVG、WEBP、GIF 等格式
<!--
src：图片资源地址
mode：图片裁剪、缩放的模式
-->
<image style="width: 200px; height: 200px; background-color: #eeeeee;"
mode="scakeToFill"
src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"></image>
<image style="width: 200px; height: 200px; background-color: #eeeeee;"
mode="aspectFit"
src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"></image>
<image style="width: 200px; height: 200px; background-color: #eeeeee;"
mode="aspectFill"
src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"></image>
radio 组件 | radio-group 组件
- 单选组件 | 单项选择器，内部由多个 radio 组成
<radio-group bindchange="radioChange">
<label for="v">
<radio value="cn">中国</radio>
</label>
<label for="v">
<radio value="usa">美国</radio>
</label>
</radio-group>
// js
radioChange(e) {
console.log(e);
console.log(e.detail.value);
},
checkbox 组件 | checkbox-group 组件
- 多选项目 | 多项选择器，内部由多个checkbox组成
<checkbox-group bindchange="checkboxChange">
<label for="c">
<checkbox value="cn"></checkbox>中国
</label>
<label for="c">
<checkbox value="usa"></checkbox>美国
</label>
<label for="c">
<checkbox value="jp"></checkbox>日本
</label>
</checkbox-group>
// js
checkboxChange:function (e) {
console.log(e.detail.value);
},
input 组件
- 输入框组件
<input class="weui-input" auto-focus placeholder="将会获取焦点"/>
微信小程序事件处理
- 普通事件绑定
语法：bind+事件名称=“处理事件函数” 或者 bind:事件名称=“处理事件函数”
<view bindtap="handleTap">Click</view>
<view bind:tap="handleTap">Click</view>
// js
// 处理函数，定义在js文件中
handleTap(e){
console.log(e);
},
- 绑定并阻止事件冒泡
除 bind 外，也可以用 catch 来绑定事件。与 bind 不同， catch 会阻止事件向上冒泡。
<!-- 阻止冒泡 -->
<view bindtap="changeTap">
<view catchtap="changeTap" data-id="123">子</view>
</view>
// js
changeTap(e){
console.log(e);
console.log(e.target.dataset);
},
