微信小程序中的View知识点

View篇

1: swiper(切换栏)
属性:
indicator-dots(是否显示面板指示点)
autoplay(是否自动切换)
interval(自动切换时间间隔) 
duration(滑动动画时长)
vertical(滑动方向是否为纵向)
circular(是否采用衔接滑动)
示例代码如下:
<swiper indicator-dots="true" autoplay="true" interval="1000" duration="500" vertical='true' circular='true'>
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}"/>
    </swiper-item>
  </block>
</swiper>
测试截图
2:scroll-view(可滚动视图区域)
属性:
scroll-x(是否可以水平滑动)
scroll-y(是否可以垂直滑动)
示例代码如下:
<scroll-view scroll-x="true" style="width:100%;">
  <view style='flex-direction:row;width:150%;display: flex;'>//flex-direction:row属性和display: flex属性设置给view才能实现水平布局
    <view style=' background-color: #aaa222;width: 200px;height: 100%;'>green</view>
    <view style=' background-color: red;width: 200px;height: 100%;'>red</view>
    <view style=' background-color: blue;width: 200px;height: 100%;'>blue</view>
  </view>
</scroll-view>
<scroll-view scroll-y="true" style="height:100%;">
  <view style='flex-direction:column;height:150%;display: flex;'>
    <view style=' background-color: #aaa222;width: 100%;height: 200px;'>green</view>
    <view style=' background-color: red;width: 100%;height:200px;'>red</view>
    <view style=' background-color: blue;width: 100%;height: 200px;'>blue</view>
  </view>
</scroll-view>
测试截图
3:movable-view(可移动视图区域)
属性:
direction(属性值有all、vertical、horizontal、none)
scale(是否支持双指缩放,默认缩放手势生效区域是在movable-view内)
scale-min(定义缩放倍数最小值)
scale-max(定义缩放倍数最大值)
scale-value(定义缩放倍数,取值范围为 0.5 - 10)
注意:
movable-area的有个属性scale-area(当里面的movable-view设置为支持双指缩放时,设置此值可将缩放手势生效区域修改为整个movable-area)
示例代码如下:
movable-view区域小于movable-area
<movable-area style="height: 200px; width: 200px; background: red;">
  <movable-view style="height: 50px; width: 50px; background: blue;" direction="all">
  </movable-view>
</movable-area>
movable-view区域大于movable-area
<movable-area style="height: 100px; width: 100px; background: red;">
  <movable-view style="height: 200px; width: 200px; background: blue;" direction="all">
  </movable-view>
</movable-area>
可放缩
<movable-area style="height: 200px; width: 200px; background: red;" scale-area="true">
  <movable-view style="height: 50px; width: 50px; background: blue;" direction="all" scale="true" scale-min="0.5" scale-max="4" scale-value="2">
  </movable-view>
</movable-area>
测试截图
4:cover-view(覆盖在原生组件之上的文本视图,可覆盖的原生组件包括map、video、canvas、camera、live-player、live-pusher,只支持嵌套cover-view、cover-image,可在cover-view中使用button);cover-image(覆盖在原生组件之上的图片视图,可覆盖的原生组件同cover-view,支持嵌套在cover-view里)
示例代码如下:
<video src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
>
<cover-view>
  <cover-view>
    <cover-image style='height:20px;width:20px' src='../../image/swiper1.jpg' />
  </cover-view>
  <cover-view>
    <cover-image style='height:20px;width:20px' src="../../image/swiper1.jpg" />
  </cover-view>
  <cover-view>00:00</cover-view>
</cover-view>
</video>
测试截图
5:icon(图标)
属性:
type(icon的类型,有效值:success, success_no_circle, info, warn, waiting, cancel, download, search, clear)
size(icon的大小,单位px)
color(icon的颜色,同css的color)
示例代码如下:
<block wx:for="{{iconSize}}">
  <icon type="success" size="{{item}}" />
</block>

<block wx:for="{{iconType}}">
  <icon type="{{item}}" size="40" />
</block>

<block wx:for="{{iconColor}}">
  <icon type="success" size="40" color="{{item}}" />
</block>
数据代码如下:
data: {
    iconSize: [20, 30, 40, 50, 60, 70],
    iconColor: [
      'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
    ],
    iconType: [
      'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'
    ]
  }
测试截图
6:text(文本)
示例代码如下:
<text>我是文本</text>
7:rich-text(富文本)
示例代码如下:
<rich-text>我是富文本</rich-text>
8:progress(进度条)
属性:
percent(百分比0~100)
show-info(在进度条右侧显示百分比)
stroke-width(进度条线的宽度,单位px)
color(进度条颜色)
active(进度条从左往右的动画)
示例代码如下:
<progress percent="20" show-info="true" style='margin-bottom:20px'/>
<progress percent="40" stroke-width="12" style='margin-bottom:20px'/>
<progress percent="60" color="pink" style='margin-bottom:20px'/>
<progress percent="80" active="true" style='margin-bottom:20px'/>
测试截图
9:button(按钮)
属性:
size(按钮的大小,有默认大小default和小尺寸mini)
type(按钮的样式类型,有绿色primary,白色default,红色warn)
plain(按钮是否镂空,背景色透明)
disabled(是否禁用)
loading(名称前是否带 loading 图标)
open-type(微信开放能力,有contact打开客服会话;share触发用户转发;getUserInfo获取用户信息,可以从bindgetuserinfo回调中获取到用户信息;getPhoneNumber获取用户手机号,可以从bindgetphonenumber回调中获取到用户信息;launchApp打开APP,可以通过app-parameter属性设定向APP传的参数;openSetting打开授权设置页;feedback打开“意见反馈”页面,用户可提交反馈内容并上传日志,开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容)
lang(指定返回用户信息的语言,zh_CN 简体中文,zh_TW 繁体中文,en 英文)
bindgetuserinfo(用户点击该按钮时,会返回获取到的用户信息,回调的detail数据与wx.getUserInfo返回的一致)
示例代码如下:
<button type="default" size="{{defaultSize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="default"> default </button>
<button type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="primary"> primary </button>
<button type="warn" size="{{warnSize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="warn"> warn </button>
<button bindtap="setDisabled">点击设置以上按钮disabled属性</button>
<button bindtap="setPlain">点击设置以上按钮plain属性</button>
<button bindtap="setLoading">点击设置以上按钮loading属性</button>
<button open-type="contact">进入客服会话</button>
<button open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo">获取用户信息</button>
<button open-type="openSetting">打开授权设置页</button>
数据代码如下:
var types = ['default', 'primary', 'warn']
var pageObject = {
  data: {
    defaultSize: 'default',
    primarySize: 'default',
    warnSize: 'default',
    disabled: false,
    plain: false,
    loading: false
  },
  setDisabled: function(e) {
    this.setData({
      disabled: !this.data.disabled
    })
  },
  setPlain: function(e) {
    this.setData({
      plain: !this.data.plain
    })
  },
  setLoading: function(e) {
    this.setData({
      loading: !this.data.loading
    })
  },
  onGotUserInfo: function(e) {
    console.log(e.detail.errMsg)
    console.log(e.detail.userInfo)
    console.log(e.detail.rawData)
  },
}

for (var i = 0; i < types.length; ++i) {
  (function(type) {
    pageObject[type] = function(e) {
      var key = type + 'Size'
      var changedData = {}
      changedData[key] =
        this.data[key] === 'default' ? 'mini' : 'default'
      this.setData(changedData)
    }
  })(types[i])
}

Page(pageObject)
测试截图
10:checkbox-group和checkbox(多选项目)
checkbox-group的属性:
bindchange(<checkbox-group/>中选中项发生改变是触发 change 事件,detail = {value:[选中的checkbox的value的数组]})
checkbox的属性:
value(<checkbox/>标识,选中时触发<checkbox-group/>的 change 事件,并携带 <checkbox/> 的 value)
checked(当前是否选中,可用来设置默认选中)
color(checkbox的颜色)
示例代码如下:
<checkbox-group bindchange="checkboxChange">
  <checkbox color='red' wx:for="{{items}}" value="{{item.name}}" checked="{{item.checked}}">{{item.value}}</checkbox>
</checkbox-group>
数据代码如下:
Page({
  data: {
    items: [
      { name: 'USA', value: '美国' },
      { name: 'CHN', value: '中国', checked: 'true' },
      { name: 'BRA', value: '巴西' },
      { name: 'JPN', value: '日本' },
      { name: 'ENG', value: '英国' },
      { name: 'TUR', value: '法国' },
    ]
  },
  checkboxChange: function (e) {
    console.log('checkbox发生change事件,携带value值为:', e.detail.value)
  }
})
测试截图
11:form(表单,将组件内的用户输入的<switch/> <input/> <checkbox/> <slider/> <radio/> <picker/> 提交)
属性:
bindsubmit(携带 form 中的数据触发 submit 事件,event.detail = {value : {'name': 'value'} , formId: ''})
bindreset(表单重置时会触发 reset 事件)
示例代码如下(注意表单中的其他组件必须得有name属性才能将组件的值进行提交):
<form bindsubmit="formSubmit" bindreset="formReset">
  <switch name="switch">switch</switch>
  <slider name="slider" show-value="true">slider</slider>
  <input name="input" placeholder="please input here">input</input>
  <radio-group name="radio-group">
    radio-group
    <radio value="radio1">radio1</radio>
    <radio value="radio2">radio2</radio>
  </radio-group>
  <checkbox-group name="checkbox">
    checkbox-group
    <checkbox value="checkbox1">checkbox1</checkbox>
    <checkbox value="checkbox2">checkbox2</checkbox>
  </checkbox-group>
  <button formType="submit">Submit</button>
  <button formType="reset">Reset</button>
</form>
数据代码如下:
Page({
  formSubmit: function (e) {
    console.log('form发生了submit事件,携带数据为:', e.detail.value)
  },
  formReset: function () {
    console.log('form发生了reset事件')
  }
})
测试截图
12:input(输入框)
属性:
type(input 的类型)
password(是否是密码类型)
placeholder(输入框为空时占位符)
placeholder-style(指定 placeholder 的样式)
focus(获取焦点)
maxlength(最大输入长度,设置为 -1 的时候不限制最大长度)
auto-focus((即将废弃,请直接使用 focus )自动聚焦,拉起键盘)
示例代码如下:
<input placeholder="这是一个可以自动聚焦的input" auto-focus/>
<input placeholder="这个只有在按钮点击的时候才聚焦" focus="{{focus}}" />
<button bindtap="bindButtonTap">使得输入框获取焦点</button>
<input maxlength="10" placeholder="最大输入长度10" />
<view>你输入的是:{{inputValue}}</view>
<input bindinput="bindKeyInput" placeholder="输入同步到view中" />
<input bindinput="bindReplaceInput" placeholder="连续的两个1会变成2" />
<input password type="number" />
<input password type="text" />
<input type="digit" placeholder="带小数点的数字键盘" />
<input type="idcard" placeholder="身份证输入键盘" />
<input placeholder-style="color:red" placeholder="占位符字体是红色的" />
数据代码如下:
Page({
  data: {
    focus: false,
    inputValue: ''
  },
  bindButtonTap: function () {
    this.setData({
      focus: true
    })
  },
  bindKeyInput: function (e) {
    this.setData({
      inputValue: e.detail.value
    })
  },
  bindReplaceInput: function (e) {
    var value = e.detail.value
    var pos = e.detail.cursor
    if (pos != -1) {
      //光标在中间
      var left = e.detail.value.slice(0, pos)
      //计算光标的位置
      pos = left.replace(/11/g, '2').length
    }

    //直接返回对象,可以对输入进行过滤处理,同时可以控制光标的位置
    return {
      value: value.replace(/11/g, '2'),
      cursor: pos
    }
  }
})
测试截图
13:picker(从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器)
普通选择器:mode = selector
属性:
range(mode为 selector 或 multiSelector 时,range 有效)
value(value 的值表示选择了 range 中的第几个(下标从 0 开始))
bindchange(value 改变时触发 change 事件,event.detail = {value: value})
多列选择器:mode = multiSelector
属性:
range(mode为 selector 或 multiSelector 时,range 有效。二维数组,长度表示多少列,数组的每项表示每列的数据,如[["a","b"], ["c","d"]])
value(value 每一项的值表示选择了 range 对应项中的第几个(下标从 0 开始))
bindchange(value 改变时触发 change 事件,event.detail = {value: value})
bindcolumnchange(某一列的值改变时触发 columnchange 事件,event.detail = {column: column, value: value},column 的值表示改变了第几列(下标从0开始),value 的值表示变更值的下标)
时间选择器:mode = time
属性:
value(表示选中的时间,格式为"hh:mm")
start(表示有效时间范围的开始,字符串格式为"hh:mm")
end(表示有效时间范围的结束,字符串格式为"hh:mm")
bindchange(value 改变时触发 change 事件,event.detail = {value: value}  )
日期选择器:mode = date
属性:
value(表示选中的日期,格式为"YYYY-MM-DD")
start(表示有效日期范围的开始,字符串格式为"YYYY-MM-DD")
end(表示有效日期范围的结束,字符串格式为"YYYY-MM-DD")
bindchange(value 改变时触发 change 事件,event.detail = {value: value})
省市区选择器:mode = region
属性:
value(表示选中的省市区,默认选中每一列的第一个值)
custom-item(可为每一列的顶部添加一个自定义的项)
bindchange(value 改变时触发 change 事件,event.detail = {value: value, code: code, postcode: postcode},其中字段code是统计用区划代码,postcode是邮政编码)
示例代码如下:
普通选择器
<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
  当前选择:{{array[index]}}
</picker>
多列选择器
<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
  当前选择:{{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}},{{multiArray[2][multiIndex[2]]}}
</picker>
时间选择器
<picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
  当前选择: {{time}}
</picker>
日期选择器
<picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
  当前选择: {{date}}
</picker>
省市区选择器
<picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}">
  当前选择:{{region[0]}},{{region[1]}},{{region[2]}}
</picker>
数据代码如下:
Page({
  data: {
    array: ['美国', '中国', '巴西', '日本'],
    objectArray: [{
        id: 0,
        name: '美国'
      },
      {
        id: 1,
        name: '中国'
      },
      {
        id: 2,
        name: '巴西'
      },
      {
        id: 3,
        name: '日本'
      }
    ],
    index: 0,
    multiArray: [
      ['无脊柱动物', '脊柱动物'],
      ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'],
      ['猪肉绦虫', '吸血虫']
    ],
    objectMultiArray: [
      [{
          id: 0,
          name: '无脊柱动物'
        },
        {
          id: 1,
          name: '脊柱动物'
        }
      ],
      [{
          id: 0,
          name: '扁性动物'
        },
        {
          id: 1,
          name: '线形动物'
        },
        {
          id: 2,
          name: '环节动物'
        },
        {
          id: 3,
          name: '软体动物'
        },
        {
          id: 3,
          name: '节肢动物'
        }
      ],
      [{
          id: 0,
          name: '猪肉绦虫'
        },
        {
          id: 1,
          name: '吸血虫'
        }
      ]
    ],
    multiIndex: [0, 0, 0],
    date: '2016-09-01',
    time: '12:01',
    region: ['广东省', '广州市', '海珠区'],
    customItem: '全部'
  },
  bindPickerChange: function(e) {
    console.log('picker发送选择改变,携带值为', e.detail.value)
    this.setData({
      index: e.detail.value
    })
  },
  bindMultiPickerChange: function(e) {
    console.log('picker发送选择改变,携带值为', e.detail.value)
    this.setData({
      multiIndex: e.detail.value
    })
  },
  bindMultiPickerColumnChange: function(e) {
    console.log('修改的列为', e.detail.column, ',值为', e.detail.value);
    var data = {
      multiArray: this.data.multiArray,
      multiIndex: this.data.multiIndex
    };
    data.multiIndex[e.detail.column] = e.detail.value;
    switch (e.detail.column) {
      case 0:
        switch (data.multiIndex[0]) {
          case 0:
            data.multiArray[1] = ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'];
            data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
            break;
          case 1:
            data.multiArray[1] = ['鱼', '两栖动物', '爬行动物'];
            data.multiArray[2] = ['鲫鱼', '带鱼'];
            break;
        }
        data.multiIndex[1] = 0;
        data.multiIndex[2] = 0;
        break;
      case 1:
        switch (data.multiIndex[0]) {
          case 0:
            switch (data.multiIndex[1]) {
              case 0:
                data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
                break;
              case 1:
                data.multiArray[2] = ['蛔虫'];
                break;
              case 2:
                data.multiArray[2] = ['蚂蚁', '蚂蟥'];
                break;
              case 3:
                data.multiArray[2] = ['河蚌', '蜗牛', '蛞蝓'];
                break;
              case 4:
                data.multiArray[2] = ['昆虫', '甲壳动物', '蛛形动物', '多足动物'];
                break;
            }
            break;
          case 1:
            switch (data.multiIndex[1]) {
              case 0:
                data.multiArray[2] = ['鲫鱼', '带鱼'];
                break;
              case 1:
                data.multiArray[2] = ['青蛙', '娃娃鱼'];
                break;
              case 2:
                data.multiArray[2] = ['蜥蜴', '龟', '壁虎'];
                break;
            }
            break;
        }
        data.multiIndex[2] = 0;
        console.log(data.multiIndex);
        break;
    }
    this.setData(data);
  },
  bindDateChange: function(e) {
    console.log('picker发送选择改变,携带值为', e.detail.value)
    this.setData({
      date: e.detail.value
    })
  },
  bindTimeChange: function(e) {
    console.log('picker发送选择改变,携带值为', e.detail.value)
    this.setData({
      time: e.detail.value
    })
  },
  bindRegionChange: function(e) {
    console.log('picker发送选择改变,携带值为', e.detail.value)
    this.setData({
      region: e.detail.value
    })
  }
})
测试截图
14:picker-view(嵌入页面的滚动选择器)
属性:
value(数组中的数字依次表示 picker-view 内的 picker-view-column 选择的第几项(下标从 0 开始),数字大于 picker-view-column 可选项长度时,选择最后一项)
indicator-style(设置选择器中间选中框的样式)
bindchange(当滚动选择,value 改变时触发 change 事件,event.detail = {value: value};value为数组,表示 picker-view 内的 picker-view-column 当前选择的是第几项(下标从 0 开始))
示例代码如下:
{{year}}年{{month}}月{{day}}日
<picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}" bindchange="bindChange">
  <picker-view-column>
    <view wx:for="{{years}}" style="line-height: 50px">{{item}}年</view>
  </picker-view-column>
  <picker-view-column>
    <view wx:for="{{months}}" style="line-height: 50px">{{item}}月</view>
  </picker-view-column>
  <picker-view-column>
    <view wx:for="{{days}}" style="line-height: 50px">{{item}}日</view>
  </picker-view-column>
</picker-view>
数据代码如下:
const date = new Date()
const years = []
const months = []
const days = []

for (let i = 1990; i <= date.getFullYear(); i++) {
  years.push(i)
}

for (let i = 1; i <= 12; i++) {
  months.push(i)
}

for (let i = 1; i <= 31; i++) {
  days.push(i)
}

Page({
  data: {
    years: years,
    year: date.getFullYear(),
    months: months,
    month: 2,
    days: days,
    day: 2,
    value: [9999, 1, 1],
  },
  bindChange: function (e) {
    const val = e.detail.value
    this.setData({
      year: this.data.years[val[0]],
      month: this.data.months[val[1]],
      day: this.data.days[val[2]]
    })
  }
})
测试截图
15:radio(单选项目)
属性:
value(<radio/> 标识。当该<radio/> 选中时,<radio-group/> 的 change 事件会携带<radio/>的value)
checked(当前是否选中)
color(radio的颜色)
示例代码如下:
<radio-group bindchange="radioChange">
  <block wx:for="{{items}}">
    <radio color='red' value="{{item.name}}" checked="{{item.checked}}" />{{item.value}}
  </block>
</radio-group>
数据代码如下:
Page({
  data: {
    items: [
      { name: 'USA', value: '美国' },
      { name: 'CHN', value: '中国', checked: 'true' },
      { name: 'BRA', value: '巴西' },
      { name: 'JPN', value: '日本' },
      { name: 'ENG', value: '英国' },
      { name: 'TUR', value: '法国' },
    ]
  },
  radioChange: function (e) {
    console.log('radio发生change事件,携带value值为:', e.detail.value)
  }
})
测试截图
16:slider(滑动选择器)
属性:
min(最小值)
max(最大值)
step(步长,取值必须大于 0,并且可被(max - min)整除)
show-value(是否显示当前 value)
bindchange(完成一次拖动后触发的事件,event.detail = {value: value}   )
示例代码如下:
设置step
<slider bindchange="slider2change" step="5" /> 显示当前value
<slider bindchange="slider3change" show-value/> 设置最小/最大值
<slider bindchange="slider4change" min="50" max="200" show-value/>
数据代码如下:
var pageData = {}
for (var i = 1; i < 5; i++) {
  (function (index) {
    pageData['slider' + index + 'change'] = function (e) {
      console.log('slider' + 'index' + '发生 change 事件,携带值为', e.detail.value)
    }
  })(i)
}
Page(pageData)
测试截图
17:switch(开关选择器)
属性:
checked(是否选中)
bindchange(checked 改变时触发 change 事件,event.detail={ value:checked})
示例代码如下:
<switch checked bindchange="switch1Change" />
<switch bindchange="switch2Change" />
数据代码如下:
Page({
  switch1Change: function (e) {
    console.log('switch1 发生 change 事件,携带值为', e.detail.value)
  },
  switch2Change: function (e) {
    console.log('switch2 发生 change 事件,携带值为', e.detail.value)
  }
})
测试截图
18:textarea(多行输入框)
属性:
placeholder(输入框为空时占位符)
placeholder-style(指定 placeholder 的样式)
auto-height(是否自动增高,设置auto-height时,style.height不生效)
focus(获取焦点)
auto-focus(自动聚焦,拉起键盘)
bindblur(输入框失去焦点时触发,event.detail = {value, cursor})
示例代码如下:
<textarea bindblur="bindTextAreaBlur" auto-height placeholder="自动变高" />
<textarea placeholder="placeholder颜色是红色的" placeholder-style="color:red;" />
<textarea placeholder="这是一个可以自动聚焦的textarea" auto-focus />
<textarea placeholder="这个只有在按钮点击的时候才聚焦" focus="{{focus}}" />
<button bindtap="bindButtonTap">使得输入框获取焦点</button>
<form bindsubmit="bindFormSubmit">
  <textarea placeholder="form 中的 textarea" name="textarea" />
  <button form-type="submit"> 提交 </button>
</form>
数据代码如下:
Page({
  data: {
    height: 20,
    focus: false
  },
  bindButtonTap: function () {
    this.setData({
      focus: true
    })
  },
  bindTextAreaBlur: function (e) {
    console.log(e.detail.value)
  },
  bindFormSubmit: function (e) {
    console.log(e.detail.value.textarea)
  }
})
测试截图
19:navigator(页面链接)
属性:
url(当前小程序内的跳转链接)
open-type(跳转方式,默认方式为navigate,它的值有navigate,对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能;redirect,对应 wx.redirectTo 的功能;switchTab,对应 wx.switchTab 的功能;reLaunch,对应 wx.reLaunch 的功能;navigateBack,对应 wx.navigateBack 的功能;exit,退出小程序,target="miniProgram"时生效)
示例代码如下:
<navigator url="../../pages/ceshi/ceshi" open-type="redirect">跳转方式一</navigator>
<navigator url="../../pages/ceshi/ceshi" open-type="navigate">跳转方式二</navigator>
<navigator url="../../pages/ceshi/ceshi" open-type="exit" target="miniProgram">退出小程序</navigator>
20:audio(音频)
属性:
id(audio 组件的唯一标识符)
src(要播放音频的资源地址)
loop(是否循环播放)
controls(是否显示默认控件)
poster(默认控件上的音频封面的图片资源地址,如果 controls 属性值为 false 则设置 poster 无效)
name(默认控件上的音频名字,如果 controls 属性值为 false 则设置 name 无效)
author(默认控件上的作者名字,如果 controls 属性值为 false 则设置 author 无效)
示例代码如下:
<audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" id="myAudio" controls loop/>
<button type="primary" bindtap="audioPlay">播放</button>
<button type="primary" bindtap="audioPause">暂停</button>
<button type="primary" bindtap="audio14">设置当前播放时间为14秒</button>
<button type="primary" bindtap="audioStart">回到开头</button>
数据代码如下:
Page({
  onReady: function (e) {
    // 使用 wx.createAudioContext 获取 audio 上下文 context
    this.audioCtx = wx.createAudioContext('myAudio')
  },
  data: {
    poster: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
    name: '此时此刻',
    author: '许巍',
    src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46',
  },
  audioPlay: function () {
    this.audioCtx.play()
  },
  audioPause: function () {
    this.audioCtx.pause()
  },
  audio14: function () {
    this.audioCtx.seek(14)
  },
  audioStart: function () {
    this.audioCtx.seek(0)
  }
})
测试截图
21:image(图片)
属性:
src(图片资源地址)
mode(图片裁剪、缩放的模式)
lazy-load(图片懒加载。只针对page与scroll-view下的image有效)
示例代码如下:
<view wx:for="{{array}}">
  <view>{{item.text}}</view>
  <view>
    <image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="{{item.mode}}" src="{{src}}"></image>
  </view>
</view>

数据代码如下:

Page({
  data: {
    array: [{
      mode: 'scaleToFill',
      text: 'scaleToFill:不保持纵横比缩放图片,使图片完全适应'
    }, {
      mode: 'aspectFit',
      text: 'aspectFit:保持纵横比缩放图片,使图片的长边能完全显示出来'
    }, {
      mode: 'aspectFill',
      text: 'aspectFill:保持纵横比缩放图片,只保证图片的短边能完全显示出来'
    }, {
      mode: 'top',
      text: 'top:不缩放图片,只显示图片的顶部区域'
    }, {
      mode: 'bottom',
      text: 'bottom:不缩放图片,只显示图片的底部区域'
    }, {
      mode: 'center',
      text: 'center:不缩放图片,只显示图片的中间区域'
    }, {
      mode: 'left',
      text: 'left:不缩放图片,只显示图片的左边区域'
    }, {
      mode: 'right',
      text: 'right:不缩放图片,只显示图片的右边边区域'
    }, {
      mode: 'top left',
      text: 'top left:不缩放图片,只显示图片的左上边区域'
    }, {
      mode: 'top right',
      text: 'top right:不缩放图片,只显示图片的右上边区域'
    }, {
      mode: 'bottom left',
      text: 'bottom left:不缩放图片,只显示图片的左下边区域'
    }, {
      mode: 'bottom right',
      text: 'bottom right:不缩放图片,只显示图片的右下边区域'
    }],
    src: '../../image/swiper1.jpg'
  },
  imageError: function (e) {
    console.log('image3发生error事件,携带值为', e.detail.errMsg)
  }
})
测试截图
22:video(视频)
属性:
src(要播放视频的资源地址)
controls(是否显示默认播放控件(播放/暂停按钮、播放进度、时间))
danmu-list(弹幕列表)
danmu-btn(是否显示弹幕按钮,只在初始化时有效,不能动态变更)
enable-danmu(是否展示弹幕,只在初始化时有效,不能动态变更 )
示例代码如下:
<video src="{{src}}" controls></video>
<button bindtap="bindButtonTap">获取视频</button>
<video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
  danmu-list="{{danmuList}}" enable-danmu danmu-btn controls></video>
<button bindtap="bindButtonTap">获取视频</button>
<input bindblur="bindInputBlur" />
<button bindtap="bindSendDanmu">发送弹幕</button>
数据代码如下:
function getRandomColor() {
  let rgb = []
  for (let i = 0; i < 3; ++i) {
    let color = Math.floor(Math.random() * 256).toString(16)
    color = color.length == 1 ? '0' + color : color
    rgb.push(color)
  }
  return '#' + rgb.join('')
}

Page({
  onReady: function (res) {
    this.videoContext = wx.createVideoContext('myVideo')
  },
  inputValue: '',
  data: {
    src: '',
    danmuList: [
      {
        text: '第 1s 出现的弹幕',
        color: '#ff0000',
        time: 1
      },
      {
        text: '第 3s 出现的弹幕',
        color: '#ff00ff',
        time: 3
      }]
  },
  bindInputBlur: function (e) {
    this.inputValue = e.detail.value
  },
  bindButtonTap: function () {
    var that = this
    wx.chooseVideo({
      sourceType: ['album', 'camera'],
      maxDuration: 60,
      camera: ['front', 'back'],
      success: function (res) {
        that.setData({
          src: res.tempFilePath
        })
      }
    })
  },
  bindSendDanmu: function () {
    this.videoContext.sendDanmu({
      text: this.inputValue,
      color: getRandomColor()
    })
  }
})
测试截图
23:camera(系统相机)
属性:
device-position(前置或后置,值为front, back)
flash(闪光灯,值为auto, on, off)
binderror(用户不允许使用摄像头时触发)
示例代码如下:
<camera device-position="back" flash="off" binderror="error" style="width: 100%; height: 300px;"></camera>
<button type="primary" bindtap="takePhoto">拍照</button>
<view>预览</view>
<image mode="widthFix" src="{{src}}"></image>
数据代码如下:
Page({
  takePhoto() {
    const ctx = wx.createCameraContext()
    ctx.takePhoto({
      quality: 'high',
      success: (res) => {
        this.setData({
          src: res.tempImagePath
        })
      }
    })
  },
  error(e) {
    console.log(e.detail)
  }
})
测试截图
24:map(地图)
属性:
longitude(中心经度)
latitude(中心纬度)
scale(缩放级别,取值范围为5-18)
controls(控件)
markers(标记点)
polyline(路线)
show-location(显示带有方向的当前定位点)
bindmarkertap(点击标记点时触发,会返回marker的id)
bindregionchange(视野发生变化时触发)
示例代码如下:
<map longitude="113.324520" latitude="23.099994" scale="14" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" bindregionchange="regionchange" show-location style="width: 100%; height: 300px;"></map>
数据代码如下:
Page({
  data: {
    markers: [{
      iconPath: "../../image/swiper1.jpg",
      id: 0,
      latitude: 23.099994,
      longitude: 113.324520,
      width: 50,
      height: 50
    }],
    polyline: [{
      points: [{
        longitude: 113.3245211,
        latitude: 23.10229
      }, {
        longitude: 113.324520,
        latitude: 23.21229
      }],
      color: "#FF0000DD",
      width: 2,
      dottedLine: true
    }],
    controls: [{
      id: 1,
      iconPath: '../../image/swiper1.jpg',
      position: {
        left: 0,
        top: 300 - 50,
        width: 50,
        height: 50
      },
      clickable: true
    }]
  },
  regionchange(e) {
    console.log(e.type)
  },
  markertap(e) {
    console.log(e.markerId)
  },
  controltap(e) {
    console.log(e.controlId)
  }
})
测试截图
25:canvas(画布)
属性:
canvas-id(canvas 组件的唯一标识符)
binderror(当发生错误时触发 error 事件,detail = {errMsg: 'something wrong'})
示例代码如下:
<canvas style="width: 300px; height: 200px;" canvas-id="firstCanvas"></canvas>
<!-- 当使用绝对定位时,文档流后边的 canvas 的显示层级高于前边的 canvas -->
<canvas style="width: 400px; height: 500px;" canvas-id="secondCanvas"></canvas>
<!-- 因为 canvas-id 与前一个 canvas 重复,该 canvas 不会显示,并会发送一个错误事件到 AppService -->
<canvas style="width: 400px; height: 500px;" canvas-id="secondCanvas" binderror="canvasIdErrorCallback"></canvas>
数据代码如下:
Page({
  canvasIdErrorCallback: function (e) {
    console.error(e.detail.errMsg)
  },
  onReady: function (e) {
    // 使用 wx.createContext 获取绘图上下文 context
    var context = wx.createCanvasContext('firstCanvas')

    context.setStrokeStyle("#00ff00")
    context.setLineWidth(5)
    context.rect(0, 0, 200, 200)
    context.stroke()
    context.setStrokeStyle("#ff0000")
    context.setLineWidth(2)
    context.moveTo(160, 100)
    context.arc(100, 100, 60, 0, 2 * Math.PI, true)
    context.moveTo(140, 100)
    context.arc(100, 100, 40, 0, Math.PI, false)
    context.moveTo(85, 80)
    context.arc(80, 80, 5, 0, 2 * Math.PI, true)
    context.moveTo(125, 80)
    context.arc(120, 80, 5, 0, 2 * Math.PI, true)
    context.stroke()
    context.draw()
  }
})
测试截图
26:icon(图标)
属性:
type(开放数据类型,具体的值如下图所示)
open-gid(当 type="groupName" 时生效, 群id)
lang(当 type="user*" 时生效,以哪种语言展示 userInfo,有效值有:en, zh_CN, zh_TW)
type具体的值如下图所示:
示例代码如下:
<open-data type="userAvatarUrl"></open-data>
<open-data type="userGender" lang="zh_CN"></open-data>
测试截图

-------------------------------------------------------------------

用到的js语言语法的总结

1:数组
在js中数组具有的方法如下:

push(参数a):向数组中放入元素a;
pop():移除数组中的最后一个元素;
join(参数a):将a插入都数组的各个元素之间,然后返回各个元素和a组合成的字符串;
length:返回数组中元素的个数;

2:const关键字修饰的表示是常量,var关键字修饰的表示是变量

-------------------------------------------------------------------

注意事项:

1:出现 Now you can provide attr "wx:key" for a "wx:for" to improve performance.警告的处理方式,处理方式如下:

这只是一个警告信息,不是错误信息,不理他不会对程序运行有任何的影响。其次这是在112300版本中新增的内容。课程里没有去处理的原因在于,对于静态的只有5条数据的文章列表加入wx:key并没有任何的意义。wx:key用来对列表渲染的数据指定一个"主键”,以加快列表渲染的速度。以下是官方文档原话:如不提供 wx:key,会报一个 warning, 如果明确知道该列表是静态,或者不必关注其顺序,可以选择忽略。
如果你一定想去掉这个警告,可以在wx:for的组件属性里增加一个 wx:key="unique",unique请替换成数据绑定列表里的任意一个字段的字段名,比如文章列表数据中的字段“postId”,即wx:key="postId"。不建议使用wx:key="*this"。

-------------------------------------------------------------------

心得总结

1:每个View所特有的属性是在.wxml文件中进行设置的(当然也可以在.wxml文件中设置通用的属性用style来设置),通用的属性是在.wxss文件中进行设置的;

2:在.wxml文件中配置的属性都是以=来赋值的(除了style的属性值),属性值必须在引号里面(除了style的属性值中的属性值),而在.wxss文件和.js文件中属性都是以:来赋值的,在.wxss文件中属性值不在引号里面,在.js文件中如果在引号里面表示字符串;

3:出现多个相同元素的分割情况:在.wxml文件中多个属性是用空格来分割,在.wxss文件中多个属性是用;来分割的,在.js文件中多个数据是用,来分割的;

推荐阅读更多精彩内容