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

一、基础组件

1. 视图容器

(1) view - 视图容器

这是一个可点击的view

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

可滚动内容

Page({

onScroll(e) {

console.log('滚动位置', e.detail.scrollTop)

}

})

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

A

B

2. 基础内容

(1) text - 文本

这是一段可选择的文本 <>&

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

(2) icon - 图标

(3) progress - 进度条

3. 表单组件

(1) button - 按钮

type="primary"

size="mini"

plain

loading="{{loading}}"

bindtap="handleClick"

>

点击我

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

Page({

data: {

loading: false

},

handleClick() {

this.setData({ loading: true })

setTimeout(() => {

this.setData({ loading: false })

}, 2000)

}

})

(2) 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 - 复选框/单选框

选项1

选项2

单选1

单选2

(4) picker - 选择器

mode="selector"

range="{{['A','B','C']}}"

bindchange="onPickerChange"

>

当前选择：{{currentValue}}

选择日期：{{date}}

二、导航组件

navigator - 页面链接

url="/pages/detail/detail?id=123"

open-type="navigate"

hover-class="navigator-hover"

>

跳转到详情页

切换到首页Tab

退出小程序

三、媒体组件

1. image - 图片

src="https://example.com/image.jpg"

mode="aspectFit"

lazy-load

bindload="onImageLoad"

binderror="onImageError"

/>

2. video - 视频

src="https://example.com/video.mp4"

controls

autoplay

loop

muted

bindplay="onPlay"

bindpause="onPause"

/>

3. camera - 相机

device-position="back"

flash="auto"

bindstop="onCameraStop"

binderror="onCameraError"

/>

四、地图组件

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-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 - 展示开放数据

2. web-view - 网页容器

七、自定义组件

1. 创建自定义组件

// components/my-component/my-component.wxml

{{innerText}}

// 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"

}

}

插槽内容

八、扩展组件库

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

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

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

MinUI：小米开发的组件库

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

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

// app.json

{

"usingComponents": {

"van-button": "@vant/weapp/button/index"

}

}

Vant按钮

组件使用技巧

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

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

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

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

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

条件显示内容

{{index}}: {{item.name}}