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

小程序组件介绍

• 组件是可复用的软件模块
• 组件是用来封装页面中某一部分功能的，例如：轮播图组件、底部tabBar组件、业务组件
• 多个组件的灵活组合可以实现不同的页面功能展示

小程序中常用的组件

• view
• text
• button
• icon
• swiper
• input
• navigator
• image
• radio
• checkbox

view组件

视图容器

text组件

文本组件

button组件

button 组件 开放能力

获取用户信息


share转发页面

打开系统设置页面


// index.js
// 获取用户信息
  handleUserInfo:function(e){
    // 打印e
    console.log(e);
    console.log(e.detail.userInfo);
  },

icon组件

swiper组件

• 滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。

navigator组件

• 页面跳转组件

等价默认不写navigate

redirect

switchTab

reLanuch

image组件

• 图片。支持 JPG、PNG、SVG、WEBP、GIF 等格式

radio 组件 | radio-group 组件

• 单选组件 | 单项选择器，内部由多个 radio 组成

  
    中国
  
  
    美国
  


// js
  radioChange(e) {
    console.log(e);
    console.log(e.detail.value);
  },

checkbox 组件 | checkbox-group 组件

• 多选项目 | 多项选择器，内部由多个checkbox组成

  
    中国
  
  
    美国
  
  
    日本
  


// js
  checkboxChange:function (e) {
    console.log(e.detail.value);
  },

input 组件

• 输入框组件

微信小程序事件处理

• 普通事件绑定
  语法：bind+事件名称=“处理事件函数” 或者 bind:事件名称=“处理事件函数”

Click
Click

// js

  // 处理函数，定义在js文件中
  handleTap(e){
    console.log(e);
  },

• 绑定并阻止事件冒泡
  除 bind 外，也可以用 catch 来绑定事件。与 bind 不同， catch 会阻止事件向上冒泡。

  子


// js

  changeTap(e){
    console.log(e);
    console.log(e.target.dataset);
  },