微信小程序常见组件的使用

小程序组件介绍

• 组件是可复用的软件模块
• 组件是用来封装页面中某一部分功能的，例如：轮播图组件、底部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);
  },