微信小程序开发常用组件及用法详解

一、基础组件

1. 视图容器

(1) view - 视图容器

<view class="container">
  <view hover-class="hover-style" hover-stop-propagation hover-start-time="50" hover-stay-time="400">
    这是一个可点击的view
  </view>
</view>

(2) scroll-view - 可滚动视图

<scroll-view scroll-y style="height: 300px;" bindscroll="onScroll">
  <view style="height: 500px;">可滚动内容</view>
</scroll-view>

Page({
  onScroll(e) {
    console.log('滚动位置', e.detail.scrollTop)
  }
})

(3) swiper - 滑块视图容器,也就是常说的轮播图

<swiper indicator-dots autoplay interval="3000" duration="500">
  <swiper-item>
    <view class="swiper-item">A</view>
  </swiper-item>
  <swiper-item>
    <view class="swiper-item">B</view>
  </swiper-item>
</swiper>

2. 基础内容

(1) text - 文本

<text selectable space="ensp" decode>
  这是一段可选择的文本&nbsp;&lt;&gt;&amp;
</text>

//selectable  这个属性的作用是长按文字弹出复制弹出框然后即可复制

(2) icon - 图标

<icon type="success" size="23" color="green"></icon>

(3) progress - 进度条

<progress percent="50" show-info stroke-width="5" />

3. 表单组件

(1) button - 按钮

<button 
  type="primary" 
  size="mini" 
  plain 
  loading="{{loading}}" 
  bindtap="handleClick"
>
  点击我
</button>

//type有三个属性，分别是defult,primary,warn

Page({
  data: {
    loading: false
  },
  handleClick() {
    this.setData({ loading: true })
    setTimeout(() => {
      this.setData({ loading: false })
    }, 2000)
  }
})

(2) input - 输入框

<input 
  type="text" 
  placeholder="请输入内容" 
  maxlength="10" 
  focus 
  bindinput="onInput" 
  bindfocus="onFocus"
/>

Page({
  onInput(e) {
    console.log('输入内容:', e.detail.value)
  },
  onFocus() {
    console.log('输入框获得焦点')
  }
})

(3) checkbox/radio - 复选框/单选框

<checkbox-group bindchange="onCheckboxChange">
  <checkbox value="1">选项1</checkbox>
  <checkbox value="2">选项2</checkbox>
</checkbox-group>

<radio-group bindchange="onRadioChange">
  <radio value="1">单选1</radio>
  <radio value="2">单选2</radio>
</radio-group>

(4) picker - 选择器

<!-- 普通选择器 -->
<picker 
  mode="selector" 
  range="{{['A','B','C']}}" 
  bindchange="onPickerChange"
>
  <view>当前选择：{{currentValue}}</view>
</picker>

<!-- 日期选择器 -->
<picker mode="date" start="2020-01-01" end="2025-12-31" bindchange="onDateChange">
  <view>选择日期：{{date}}</view>
</picker>

二、导航组件

navigator - 页面链接

<navigator 
  url="/pages/detail/detail?id=123" 
  open-type="navigate" 
  hover-class="navigator-hover"
>
  跳转到详情页
</navigator>

<navigator url="/pages/index/index" open-type="switchTab">
  切换到首页Tab
</navigator>

<navigator open-type="exit" target="miniProgram">
  退出小程序
</navigator>

三、媒体组件

1. image - 图片

<image 
  src="https://example.com/image.jpg" 
  mode="aspectFit" 
  lazy-load 
  bindload="onImageLoad"
  binderror="onImageError"
/>

2. video - 视频

<video 
  src="https://example.com/video.mp4" 
  controls 
  autoplay 
  loop 
  muted 
  bindplay="onPlay"
  bindpause="onPause"
/>

3. camera - 相机

<camera 
  device-position="back" 
  flash="auto" 
  bindstop="onCameraStop"
  binderror="onCameraError"
/>

四、地图组件

map - 地图

<map 
  id="myMap" 
  longitude="116.397428" 
  latitude="39.90923" 
  scale="14" 
  markers="{{markers}}"
  bindmarkertap="onMarkerTap"
  style="width: 100%; height: 300px;"
/>

Page({
  data: {
    markers: [{
      id: 1,
      latitude: 39.90923,
      longitude: 116.397428,
      title: '天安门'
    }]
  },
  onMarkerTap(e) {
    console.log('点击了标记点', e.markerId)
  }
})

五、画布组件

canvas - 画布

<canvas 
  canvas-id="myCanvas" 
  style="width: 300px; height: 200px;"
/>

Page({
  onReady() {
    const ctx = wx.createCanvasContext('myCanvas')
    ctx.setFillStyle('red')
    ctx.fillRect(10, 10, 150, 75)
    ctx.draw()
  }
})

六、开放能力组件

1. open-data - 展示开放数据

<open-data type="userNickName"></open-data>
<open-data type="userAvatarUrl"></open-data>

2. web-view - 网页容器

<web-view src="https://example.com/"></web-view>

七、自定义组件

1. 创建自定义组件

// components/my-component/my-component.wxml
<view class="custom-component">
  <slot></slot>
  <text>{{innerText}}</text>
</view>

// components/my-component/my-component.js
Component({
  properties: {
    innerText: {
      type: String,
      value: 'default value'
    }
  },
  methods: {
    customMethod() {
      console.log('自定义方法')
    }
  }
})

2. 使用自定义组件

// 页面json配置
{
  "usingComponents": {
    "my-component": "/components/my-component/my-component"
  }
}

<!-- 页面wxml使用 -->
<my-component inner-text="自定义内容">
  <view>插槽内容</view>
</my-component>

八、扩展组件库

除了基础组件，微信还提供了扩展组件库：

1. WeUI组件库：官方UI组件库，提供一致的视觉体验

2. Vant Weapp：有赞开发的轻量级组件库

3. MinUI：小米开发的组件库

使用扩展组件库示例：这个是对于Vant组件说的，这个组件我用过确实好用

快速上手 - Vant Weapphttps://vant-ui.github.io/vant-weapp/#/quickstart

// app.json
{
  "usingComponents": {
    "van-button": "@vant/weapp/button/index"
  }
}

<van-button type="primary">Vant按钮</van-button>

组件使用技巧

1. 样式控制：使用class和style属性控制组件样式

2. 数据绑定：使用{{}}语法实现数据动态绑定

3. 事件处理：使用bind或catch前缀绑定事件处理函数

4. 条件渲染：使用wx:if、wx:elif、wx:else控制组件显示

5. 列表渲染：使用wx:for循环渲染列表数据

<view wx:if="{{show}}">条件显示内容</view>

<view wx:for="{{list}}" wx:key="id">
  {{index}}: {{item.name}}
</view>