小程序 常用组件

组件介绍

框架为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发。一个组件通常包括开始标签和结束标签，属性用来修饰这个组件，内容在两个标签之间。

• 文档地址：
• https://developers.weixin.qq.com/miniprogram/dev/framework/view/component.html
• 属性值类型：

类型	描述	注解
Boolean	布尔值	组件写上该属性，不管该属性等于什么，其值都为true，只有组件上没有写该属性时，属性值才为false。如果属性值为变量，变量的值会被转换为Boolean类型**{{}}**
Number	数字	1, 2.5**{{}}**
String	字符串	“string”
Array	数组	[ 1, “string” ]{{}}
Object	对象	{ key: value }{{}}
EventHandler	事件处理函数名	“handlerName” 是 Page中定义的事件处理函数名

• 所有组件都有的属性：

属性名	类型	描述	注解
id	String	组件的唯一标示	保持整个页面唯一
class	String	组件的样式类	在对应的 WXSS 中定义的样式类
style	String	组件的内联样式	可以动态设置的内联样式
hidden	Boolean [false]	组件是否显示	所有组件默认显示，不需要加{{}}
data-*	Any	自定义属性	组件上触发的事件时，会发送给事件处理函数
bind* / catch*	EventHandler	组件的事件	详见事件

视图容器组件

swiper

• 文档地址：

• https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

• 案例：使用swiper展示轮播图

• 目录结构：

• main.wxml文件代码

<!--miniprogram/pages/main/main.wxml-->

<view class="page-section page-section-spacing swiper">
    <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
        <block wx:for="{{background}}" wx:key="*this">
            <swiper-item>
                <!-- image标签一般都需要配合图片处理属性去使用：mode。image标签除了展示图以外，还提供了一套对于图片的裁剪，缩放等功能 -->
                <image style="height: 150px;" src="{{item}}"/>
            </swiper-item>
        </block>
    </swiper>
</view>

• main.js文件代码

// miniprogram/pages/main/main.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    background: ["https://storage.lynnn.cn/assets/markdown/91147/pictures/2020/11/bce52a5f143cd3e25c6c39c7a0fd7f276ce43bad.png?sign=f4ec5771f7eabd11226fe5f4b7f0f6e8&t=5fa403f2",
        "https://storage.lynnn.cn/assets/markdown/91147/pictures/2020/11/6018ac895dd29437b1d023c121c7539ecf2e9221.jpeg?sign=47da092f8a6a1650df3da3dd3dd40cb3&t=5fa4041d",
        "https://storage.lynnn.cn/assets/markdown/91147/pictures/2020/11/f81d133833b89a18cb1842f449810d16ec5d3c78.jpeg?sign=22eadb72caac161df642aa18b84127a8&t=5fa40431"
    ],
    // 是否显示小圆点
    indicatorDots: true,
    // 滑动方向是否为纵向
    vertical: false,
    // 是否自动轮播
    autoplay: true,
    // 自动切换时间间隔（单个图片显示的时长）
    interval: 2000,
    // 切换的持续时间
    duration: 500
},

• 运行结果：

图片采用image组件进行展示，其支持对图片进行缩放、裁剪处理。关于image组件的信息，可以访问文档：
https://developers.weixin.qq.com/miniprogram/dev/component/image.html

• 在设计图片的时候，一定要和设计人员对接好图片的合适尺寸比例。

scroll-view

• 文档地址：

• https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

• 案例：实现滚动切换的效果

• main.wxml文件代码

<!--miniprogram/pages/main/main.wxml-->

<scroll-view scroll-y="true" style="height: 560rpx;" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
    <block wx:for="{{imgs}}" wx:key="*this">
        <image src="{{item.url}}" />
    </block>
</scroll-view>

• main.js文件代码

// miniprogram/pages/main/main.js

const order = [
  {id:"a",url:"https://storage.lynnn.cn/assets/markdown/91147/pictures/2020/11/bce52a5f143cd3e25c6c39c7a0fd7f276ce43bad.png?sign=f4ec5771f7eabd11226fe5f4b7f0f6e8&t=5fa403f2"},
  {id:"b",url:"https://storage.lynnn.cn/assets/markdown/91147/pictures/2020/11/6018ac895dd29437b1d023c121c7539ecf2e9221.jpeg?sign=47da092f8a6a1650df3da3dd3dd40cb3&t=5fa4041d"},
  {id:"c",url:"https://storage.lynnn.cn/assets/markdown/91147/pictures/2020/11/f81d133833b89a18cb1842f449810d16ec5d3c78.jpeg?sign=22eadb72caac161df642aa18b84127a8&t=5fa40431"}
]
Page({
  /**
   * 页面的初始数据
   */
  data: {
      // 默认要显示的元素
      toView: 'a',
      // 绑定数据给页面
      imgs: order
  },

  // 监听是否滚动到顶部
  scrollToTop() {
      this.setAction({
          scrollTop: 0
      })
  },

  // 触摸事件
  tap() {
      for (let i = 0; i < order.length; ++i) {
          // this.data.toView此时是图片的id
          if (order[i].id === this.data.toView) {
              this.setData({
                  toView: order[i + 1].id,
                  scrollTop: (i + 1) * 200
              })
              break
          }
      }
  },

  // 触摸并拖拽事件
  tapMove() {
      this.setData({
          scrollTop: this.data.scrollTop + 10
      })
  },
})

• 运行结果：
  

表单组件

小程序项目中但凡是涉及到表单的地方，都需要使用表单组件。表单组件的作用就是用于组成表单的。

• 文档地址：

• https://developers.weixin.qq.com/miniprogram/dev/component/button.html

• 注意点：

1.  这里面表单组件**部分**的标签继续沿用html的标签，与之前完全同名
2. 组件标签的部分属性也与之前html属性一致，但是更多的是不一致的

• main.wxml文件代码

<!--miniprogram/pages/main/main.wxml-->

<!-- 表单组件：按钮组件 -->
<!-- 常规按钮：底色灰白的，不易见，type值为default（可以不写） -->
<button>常规按钮</button>
<!-- 主要按钮：绿色按钮，最常用的按钮 -->
<button type="primary">主要按钮</button>
<!-- 警告按钮：底色灰色，但是字是红色 -->
<button type="warn">警告按钮</button>
<!-- 按钮开放功能：打开授权，需要配合授权的回调函数，综合案例中再讲 -->
<button open-type="getUserInfo" bindgetuserinfo="getInfo">授权</button>

<!-- 单选按钮组 -->
<!-- 由于单选按钮组中包含了多个redio，因此需要被包裹 -->
<radio-group>
    <radio value="1">男</radio>
    <radio value="2">女</radio>
</radio-group>

<!-- 复选框组 -->
<!-- 与单选按钮组类似，也需要被包裹 -->
<checkbox-group>
    <checkbox value="吃饭">吃饭</checkbox>
    <checkbox value="睡觉">睡觉</checkbox>
    <checkbox value="打DD">打DD</checkbox>
</checkbox-group>

<!--表单组件的标签的样式是需要自己去调节设置的 -->
<input type="text" value="zhangsan" />

• 运行结果：

• 按钮button组件有一个非常实用的属性open-type，后续可以通过该属性赋予按钮高级的功能（微信开放能力），例如：

1. 获取用户信息的时候
2. 唤起源App
3. 获取用户手机号
4. ......