当前位置: 首页 > news >正文

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

一、基础组件

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. 样式控制:使用classstyle属性控制组件样式

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

  3. 事件处理:使用bindcatch前缀绑定事件处理函数

  4. 条件渲染:使用wx:ifwx:elifwx:else控制组件显示

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

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

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

http://www.dtcms.com/a/121869.html

相关文章:

  • 如何解决Chrome浏览器安装时提示“无法连接互联网”
  • Linux入门指南:从零开始探索开源世界
  • Mysql备忘记录
  • EasyExcel导入导出
  • 雷电防护检测工作流程及重要性
  • 【愚公系列】《高效使用DeepSeek》062-图书库存管理
  • 台式电脑插入耳机没有声音或麦克风不管用
  • Dify 生成提示词的 Prompt
  • git回滚指定版本并操作
  • Llama 4的争议
  • 【重装系统】大白菜自制U盘装机,备份C盘数据,解决电脑启动黑屏/蓝屏
  • 批量合并多张 jpg/png 图片为长图或者 PDF 文件,支持按文件夹合并图片
  • 面向大模型的开发框架LangChain
  • LLM Agents项目推荐:MetaGPT、AutoGen、AgentVerse详解
  • 工业制造核心术语
  • 每日文献(十)——Part two
  • STM32 CRC校验与芯片ID应用全解析:从原理到实践 | 零基础入门STM32第九十七步
  • 分类算法的介绍和应用场景
  • Spring MVC 重定向(Redirect)详解
  • 【Linux笔记】文件的传输(scp、rsync、归档、压缩)
  • 使用 VSCode 本地历史记录‌恢复误删除文件
  • 复习防火墙(一)
  • 知微·智研重磅发布:AI加持的智能化研发管理,革新科技组织数字化转型
  • 4.9复习记
  • Flutter Invalid constant value.
  • 【Java设计模式】第3章 软件设计七大原则
  • ragflow开启https访问:添加证书后,使用浏览器还是有警告,如何解决?
  • [ AI工具库 ] 宝藏级 AI 工具合集
  • MySQL多表查询、事务与索引的实践与应用
  • C++字符串复习