小程序中相关知识总结

组件

$\color{red}{所有组件和属性都必须小写}$

一、视图容器组件

目标图

• view
• moveable-area
• movable-view
  可移动的视图容器，在页面中可以拖拽滑动。
  $\color{red}{注意：}$
  1.movable-view必须在 movable-area 组件中，并且必须是直接子节点，否则不能移动。
  2.movable-view 必须设置width和height属性，不设置默认为10px。
  3.movable-view 默认为绝对定位，top和left属性为0px
  案例
  index.wxml文件：

  //index.wxml
  <view class="container">
      <movable-area style="height: 200px; width: 200px; background: pink;">
        <movable-view style="height: 50px; width: 50px; background: skyblue;" x="{{x}}" y="{{y}}" direction="all">
        </movable-view>
      </movable-area>
  </view>
  

  index.js文件

  //index.js
  Page({
    data: {
      x: 0,
      y: 0
    },
  })
  

• swiper
  滑块视图容器。其中只可放置swiper-item组件，其宽高自动设为100%。
  案例：
  • index.wxml文件：

    <swiper indicator-dots="{{indicatorDots}}"
         autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
         <block wx:for="{{imgUrls}}" wx:key="index">
            <swiper-item>
               <image src="{{item}}" width="355" height="150"/>
            </swiper-item>
         </block>
    </swiper>
    <!-- 按钮 -->
    <button bindtap="changeIndicatorDots" style="font-size:14px"> indicator-dots(是否显示面板指示点）</button>
    <button bindtap="changeAutoplay" style="font-size:14px"> autoplay（是否自动切换） </button>
    

  • index.js

    //3.swiper
    Page({
      data: {
        imgUrls: [
          'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640',
          'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640',
          'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640'
        ],
        indicatorDots: false,
        autoplay: false,
        interval: 3000,
        duration: 1000    //滑动动画时长
      },
      changeIndicatorDots: function (e) {
        this.setData({
          indicatorDots: !this.data.indicatorDots
        })
      },
      changeAutoplay: function (e) {
        this.setData({
          autoplay: !this.data.autoplay
        })
      }
    })
    

二、小知识

• wx:for
  在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。 $\color{red}{默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item}$。
• block
  block并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。比如： wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 block标签将多个组件包装起来，并在上边使用 wx:if 控制属性。

    <block wx:if="{{true}}">
        <view> view1 </view>
        <view> view2 </view>
    </block>
  

  同样，也可以将 wx:for 用在block标签上，以渲染一个包含多节点的结构块。

    <block wx:for="{{[1, 2, 3]}}">
        <view> {{index}}: </view>  //index为默认下标名
        <view> {{item}} </view>    //item为默认的变量名
    </block>
  

三、基础组件

$\color{red}{目标图}$

• icon

  常见属性有：type、 color 和size

  案例
  index.xml

  <!-- 图标的大小设置 -->
  <view class='group'>
    <block wx:for="{{iconSize}}" wx:key="">
      <icon type='success' size='{{item}}'></icon>
    </block>
  </view>
  
  <!-- 图标的类型设置 -->
  <view class='group'>
    <block wx:for="{{iconType}}" wx:key="">
      <icon type='{{item}}' size='35'></icon>
    </block>
  </view>
  
  <!-- 图标的颜色设置 -->
  <view class='group'>
    <block wx:for="{{iconColor}}" wx:key="">
      <icon color='{{item}}' size='35' type='success'></icon>
      <!-- 此处要写上type，否则看不见效果 -->
    </block>
  </view>
  

  index.js

  Page({
    data:{
      iconSize:[20,25,30,35,40,45,50],
      iconType:['success','success_no_circle','info','warn','waiting','cancle','download','search','clear'],
      iconColor:['red','green','yellow','blue','pink','blue','purple','skyblue']
    }
  })
  
  

  效果图
  

  • text
  • progress

四、表单组件

$\color{red}{目标图}$

• button
  （1）按钮的样式类型type：default(白色)、 primary(绿色)、 warn(红色)
  （2）按钮的大小size:default(默认大小)、 mini(小尺寸)
  （3）名称前是否带 loading 图标
  （4）按钮是否镂空，背景色透明plain
  （5）是否禁用 disabled
  index.wxml文件

  <button type="default" size="{{defaultSize}}" 
      loading="{{loading}}" plain="{{plain}}"
      disabled="{{disabled}}" bindtap="default"> default (白色)
  </button>
  

  index.js文件

  Page({
    data: {
      defaultSize: 'default',
      disabled: false,
      plain: false,
      loading: false
    },
  

• checkbox-group

  多项选择器，内部由多个checkbox组成。

• checkbox

  <checkbox-group bindchange="checkboxChange">
    <label class="checkbox" wx:for="{{items}}" wx:key="" style='display:block'>
      <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
    </label>
  </checkbox-group>
  

  Page({
    data: {
      items: [
        { name: 'USA', value: '美国', checked: 'true' },
        { name: 'CHN', value: '中国' },
        { name: 'BRA', value: '巴西' },
        { name: 'JPN', value: '日本' },
        { name: 'ENG', value: '英国' },
        { name: 'TUR', value: '法国' },
      ]
    },
    checkboxChange: function (e) {
      console.log('checkbox发生change事件，携带value值为：', e.detail.value)
    }
  })
  

  注意：用label组件是为了把复选框和文字放在一起无论点击框还是文字都可以选中的效果。

• form

  表单。将组件内的用户输入的switch input checkbox slider radio picker 提交。

五、导航组件

页面链接（navigator）

六、媒体组件

媒体组件中涉及API接口

• audio
• image

七、地图组件

map，是比较复杂的组件，文档比较多。
$\color{red}{注意}$：地图中的颜色值color/borderColor/bgColor等需使用6位（8位）十六进制表示，8位时后两位表示alpha值，如：#FF0000AA

八、画布组件

canvas
$\color{red}{注意}$：同一页面中的 canvas-id 不可重复，如果使用一个已经出现过的 canvas-id，该 canvas 标签对应的画布将被隐藏并不再正常工作。
该组件如果不做动画设计时用的比较少，和map一样比较复杂。

九、操作反馈组件

参考

原生组件

小程序中的部分组件是由客户端创建的原生组件，这些组件有：

• camera
• canvas
• input（仅在focus时表现为原生组件）
• live-player
• live-pusher
• map
• textarea
• video

$\color{red}{原生组件的使用限制}$

• 原生组件的层级是最高的，所以页面中的其他组件无论设置 z-index 为多少，都无法盖在原生组件上。
  • 后插入的原生组件可以覆盖之前的原生组件。
• 原生组件还无法在 picker-view 中使用。
  • 基础库 2.4.4 以下版本，原生组件不支持在 scroll-view、swiper、movable-view 中使用。
• 部分CSS样式无法应用于原生组件，例如：
  • 无法对原生组件设置 CSS 动画
  • 无法定义原生组件为 position: fixed
  • 不能在父级节点使用 overflow: hidden 来裁剪原生组件的显示区域
• 原生组件的事件监听不能使用 bind:eventname 的写法，只支持 bindeventname。原生组件也不支持 catch 和 capture 的事件绑定方式。
• 原生组件会遮挡 vConsole 弹出的调试面板。 在工具上，原生组件是用web组件模拟的，因此很多情况并不能很好的还原真机的表现，建议开发者在使用到原生组件时尽量在真机上进行调试。