微信小程序组件

文章目录

微信小程序组件

一、小程序组件

1.组件介绍

2.组件分类

二、视图容器

1.视图容器

2.可滚动视图容器

3.滑块视图容器

4.可移动视图容器

5.可覆盖在原生组件之上的文本视图容器

三、基本内容

1.图标组件

2.文本组件

3.富文本组件

4.进度条组件

四、表单组件

1.按钮组件

2.复选框组件

3.输入框组件

4.标签label

5.从底部单起的滚动选择器

6.嵌入页面的滚动选择器

7.单选框组件

8.滑动条组件

五、导航组件

六、媒体组件

1.音频组件

2.图片组件

3.视频组件

4.相机组件

七、地图组件

八、画布组件

九、推荐小程序（欢迎各位大佬指导）

一、小程序组件

1.组件介绍

小程序组件是视图层的基本组成单元，它自带微信风格UI样式和特定功能效果。例如，我们在小程序页面上所看到的图片、文本、按钮等都属于小程序组件。小程序为开发者提供了一系列基础组件，通过组合这些组件可以进行更高效地开发。

<text id="demo">这是一段文本内容。</text>

其中id属性是一个通用属性，可以被所有组件使用。小程序目前提供七类通用属性，如表所示。

2.组件分类

基础组件按照功能主要分类如下：

1.视图容器（View Container）：主要用于规划布局页面内容；

2.基础内容（Basic Content）：用于显示图标、文字等常用基础内容；

3.表单组件（Form）：用于制作表单；

4.导航组件（Navigation）：用于跳转指定页面；

5.媒体组件（Media）：用于显示图片、音频、视频等多媒体内容；

6.地图组件（Map）：用于显示地图效果；

7.画布组件（Canvas）：用于绘制图画内容。

二、视图容器

视图容器组件主要包含5种，如表所示。

1.视图容器

1.view是静态的视图容器，通常用和首尾标签来表示一个容器区域。需要注意的是，view容器本身没有大小和颜色，需由开发者自行进行样式设置。

2.可滚动视图容器

2.滚动视图scroll-view 是可滚动视图区域，对应的属性如表所示。 注：使用竖向滚动时，需要给一个固定高度，并且通过 WXSS 设置 height。

3.滑块视图容器

3.滑块视图swiper-view 也称为滑块视图容器，通常使用该组件制作幻灯片切换播放效果。组件的可用属性如表所示。

<swiper indicator-dots autoplay></swiper>

上述代码表示希望实现一个带有指示点的滑块视图容器，并且需要自动播放。但是仅凭这一句代码是不够的，标签必须配合组件一起使用，该组件才是用于切换的具体内容。 中可以包含文本或图片，其宽高默认为100%。并且需要注意的是，组件中可直接放置的只有组件，否则会导致未定义的行为。

4.可移动视图容器

4.可移动视图movable-view 也称为可移动的视图容器，该组件可以在页面中拖拽滑动。该组件不能独立使用，必须放在组件中且是直接子节点，否则无效。 注：movable-area 可以自定义width和height属性，其默认值均为10px。

5.可覆盖在原生组件之上的文本视图容器

5.是可以覆盖在原生组件上的文本视图，可覆盖的原生组件包括：map、video、canvas、camera、live-player、live-pusher等。其内部只允许嵌套使用、和。

三、基本内容

基础组件主要包含4种

1.图标组件

1.为图标组件，开发者可以自定义其类型、大小和颜色。该组件对应的属性如表所示。 例如，依次生成红、黄、蓝色的信息图标。代码如下：

<!--WXML-->
<view>
  <block wx:for="{{iconColor}}">
    <icon type="info" color="{{item}}"/>
  </block>
</view>

//JS
Page({
  data: {
    iconColor: ['red', 'yellow', 'blue']
})

2.文本组件

2.text为文本组件，该组件对应的属性如表所示。

3.富文本组件

3.为富文本组件，该组件对应的属性如表所示。 例如，在WXML中声明一个富文本组件，代码如下：

<rich-text nodes='{{nodes}}'></rich-text>

其中{{nodes}}为自定义名称的变量，用于定义HTML内容。 如果是用纯字符串（String类型）描述HTML代码，在JS中表示如下：

Page({
  data: {
     nodes:'<div style="line-height: 60px; color: red;">Hello World!</div>'
  }
})

4.进度条组件

4.progress为进度条组件，该组件对应的属性如表所示。 例如，声明一个目前正处于80%刻度，并且宽20px的进度条组件。WXML代码如下：

<progress  percent="80"  stroke-width="20"  / >

四、表单组件

表单组件主要包含10种，如表所示。

1.按钮组件

为按钮组件，该组件对应的常用属性如表所示。 注：hover-class 的属性值button-hover 默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}

2.复选框组件

组件的属性值如表所示。

3.输入框组件

为输入框组件，其属性值如表所示。 keyCode为键值，2.1.0起支持，处理函数可以直接return 一个字符串，将替换输入框的内容。

bindfocus|EventHandle||输入框聚焦时触发,event.detail = { value, height }. height为键盘高度，在基础库1.9.90起支持

bindblur|EventHandle||输入框失去焦点时触发,event.detail = {value: value}

bindconfirm|EventHandle||点击完成按钮时触发,event.detail = {value: value}

4.标签label

以多选框为例，使用标签的for属性代码如下：

<checkbox-group>
    <checkbox id='apple' value='apple' checked /> 
    <label for='apple'>苹果</label>
</checkbox-group>

也可以将组件直接放在内：

<checkbox-group>
    <label>
        <checkbox value='apple' checked />苹果
    </label>
</checkbox-group>

5.从底部单起的滚动选择器

是从底部弹起的滚动选择器组件，目前根据mode属性值的不同共支持五种选择器： 普通选择器 开发者可以自由更改数组内容和元素个数，运行效果如图所示。 对应的JS代码片段如下：

Page({
  data: {
    selectorItems:['苹果','香蕉','葡萄']
  },
  selectorChange: function (e) {
    let i = e.detail.value;//获得选项的数组下标
    let value = this.data.selectorItems[i];//获得选项的值
    this.setData({selector:value});//将选项名称更新到WXML页面上
  }
})

多列选择器 对应的JS代码片段如下：

Page({
  data: {
  multiSelectorItems: [['智', '慧'], ['云', '工', '具'], ['箱', '']]
  },
  multiSelectorChange: function (e) {
    let arrayIndex = e.detail.value;//获得选项的数组下标
    let array = this.data.multiSelectorItems;//获得选项数组
    let value = new Array();//声明一个空数组，用于存放最后选择的值
    for(let i=0;i<arrayIndex.length;i++){
      let k = arrayIndex[i];//第i个数组的元素下标
      let v = array[i][k];//获得第i个数组的元素值
      value.push(v);//往数组中追加新元素
    }
    this.setData({ multiSelector: value });//将选项名称更新到WXML页面上
  }
})

时间选择器 对应的JS代码片段如下：

Page({
  timeChange: function (e) {
    let value = e.detail.value;//获得选择的时间
    this.setData({ time: value });//将选项名称更新到WXML页面上
  }
})

日期选择器 对应的JS代码片段如下：

Page({
  dateChange: function (e) {
    let value = e.detail.value;//获得选择的日期
    this.setData({ date: value });//将选项名称更新到WXML页面上
  }
})

省市区选择器 对应的JS代码片段如下：

Page({
  regionChange: function (e) {
    let value = e.detail.value;//获得选择的省市区
    this.setData({ region: value });//将选项名称更新到WXML页面上
  }
})

6.嵌入页面的滚动选择器

是嵌入页面的滚动选择器，相关属性如表所示

7.单选框组件

为单选项目组件，往往需要与单项选择器组件配合使用，其中首尾标签之间可以包含若干个组件。 组件只有一个属性，如表所示。 组件的属性值如表所示。

8.滑动条组件

为滑动选择器。该组件对应的属性如表所示。

五、导航组件

导航组件用于点击跳转页面链接，其对应的属性如表所示。

在新页面JS文件的onLoad函数中可以获取到该参数，代码如下：

Page({
  onLoad: function (options) {
      console.log(options.date);//将在控制台打印输出20180803
  }
})

六、媒体组件

媒体组件目前主要包含4种，如表所示。

1.音频组件

可以用于播放本地或网络音频

2.图片组件

可以用于显示本地或网络图片，其默认宽度为300px、高度为225px。

3.视频组件

可用于播放本地或网络视频资源，其默认宽度为300px、高度为225px

4.相机组件

系统相机组件，基础库 1.6.0 开始支持，低版本需做兼容处理。在真机测试时，需要用户授权 scope.camera

七、地图组件

是地图组件，根据指定的中心经纬度可以使用腾讯地图显示对应的地段。

属性名 类型 说明

longitude Number 中心经度

latitude Number 中心纬度

scale Number 缩放级别，取值范围为5-18。默认值为16

markers Array 标记点

covers Array 即将移除，请使用markers替代。

polyline Array 路线

circles Array 圆

controls Array 即将废弃，请使用cover-view替代。

inelude-points Array 缩放视野以包含所有给定的坐标点

show-location Boolean 显示带有方向的当前定位点

bindmarkertap EventHandle 点击标记点时触发，会返回marker的id

bindcallouttap EventHandle 点击标记点对应的气泡时触发。会返回marker的id

bindcontroltap EventHandle 点击控件时触发，会返回control的id

bindregionehange EventHandle 视野发生变化时触发

bindtap EventHandle 点击地图时触发

bindupdated EventHandle 在地图渲染更新完成时触发

例题 map.js文件

  data: {
    latitude: 39.917940,
    longitude: 116.397140,
    markers: [{
      id:'001',
      latitude: 39.917940,
      longitude: 116.397140,
      iconPath:'/images/zhygjx/location.png',
      label:{
        content:'故宫博物院'
      }
    }]
  },
  regionChange: function (e) {
    console.log('regionChange被触发，视野发生变化。');
  },

map.wxml文件

map{
  width: 100%;
  height: 600rpx;
}

八、画布组件

为画布组件，其默认尺寸是宽度300px、高度225px。 该组件对应的常用属性如表所示。

在组件声明完毕后，一个简单的画图工作主要分为三个步骤： 步骤一：声明画布上下文（CanvasContext）。 步骤二：使用画布上下文进行绘图描述（例如设置画笔颜色）。 步骤三：画图。

Page({
  onLoad: function (options) {
    //1.创建画布上下文
    const ctx = wx.createCanvasContext('myCanvas')
    //2.设置填充颜色
    ctx.setFillStyle('orange')
    //3.设置填充区域为矩形
    ctx.fillRect(20, 20, 150, 80)
    //4.画图
    ctx.draw()
  }
})

九、推荐小程序（欢迎各位大佬指导）