第四章总结

组件是页面视图层（WXNL）的基本组成单元，组件组合可以构建功能强大的页面结构。小程序框架为开发者提供了容器视图、基础内容、表单、导航、多媒体、地图、画布、开放能力等8类（30多个）基础组件。
每一个组件都由一对标签组成，有开始标签和结束标签，内容放置在开始标签和结束标
签之间，内容也可以是组件。组件的语法格式如下：
<标签名 属性名="属性值”>内容</标签名>
组件通过属性来进一步细化。不同的组件可以有不同的属性，但它们也有一些共用属
性，如id、class、style、hidden、data-*、bind*/catch*等。
id组件的唯一表示，保持整个页面唯一，不常用

class组件的样式类，对应WXSS中定义的样式。

style组件的内联样式，可以动态设置内联样式。组件是否显示，所有组件默认显示。
hiddens组件是否显示，所有组件默认显示。
data-*自定义属性，组件触发事件时，会发送给事件处理函数。事件处理函数可以通过传入参数对象的currentTarget. dataset方式来获取自定义属性的值。
bing*/catch组件的事件御产逻堤层相关事件处理函数

                                                                     容器视图组件

特有属性

 

<view style="text-align:center">默认 flex 布局</view>
<view style="display:flex">
<view style="border:lpx solid #f00;flex-grow:1" >1 </view>
<view style="border:1px solid #f00;flex-grow:1">2</view>
<view style="border:lpx solid #f00;flex-grow:1">3</view>
</view>
<view style="text-align:center">上下混合布局</view>
<view style="display:flex;flex-direction:column">
<view style="border:lpx solid #f00;">1 </view>
<view style="display:flex">
<view style="border:lpx solid #f00;flex-grow:1">2</view>
<view style="border:lpx solid #f00;flex-grow:2">3</view>
</view>
</view>
<view style="text-align:center">左右</view>
<view style="display:flex">
<view style="border:1px solid #f00;flex-grow:1">1</view>
<view style="display:flex;flex-direction:column;flex-grow:1">
<view style="border:1bx solid #f00;flex-grow:1">2</view>
<view style="border:1px solid #f00;flex-grow:2">3</view>
</view>
</view>

   srcoll-view组件属性

 <scro1l-view scroll-top ="{{scrollTop}}l"scroll -y="true"
    style ="height: {{scrollheight}}l px;" class ="list" bind.  
 scrolltolower = "bindDownLoad"
    bindscrolltoupper ="topLoad" bindscroll ="scroll" > 
    <view class = "item"wx:for="{{list}}">  
    <image class ="img"src ="{{item.pic_ur1]}" > </image> 
    <view class = "text"> 
    < text class="title">{{item.name|| </text > 
    < text class = "description"> {{ item.short _de-  
 scription}} </text >
    </view> 
    </view >  
    </scroll -view> 
    <view class="body -view"> 
  
 <loading hidden ="{{hidden}} "bindchange = "loadingChange" >
    加载中...  
    </1oading > 
    </view >  
    </view>

var url="http://www.imooc.com/course /ajaxlist";
var page=0;
var page_size = 5;
varsort ="last";
 var is_easy = 0;
 var lange_id = 0;var pos_id = 0;
 var unlearn = 0;
 //请求数据
var loadMore = function(that){
that.setData({
hidden: false
});
wx.request({
url:url,
data:{
page:page,
page_size: page_size,
sort:sort,
is_easy:is_easy,
lange_id:lange_id,
pos_id:pos_id,
unlearn: unlearn
},
success: function(res){
//console.info(that.data.list);
var list = that.data.list;
for(var i =0; i < res.data.list.length;i++){
list.push(res.data.list[i]);
}
that.setData({
list: list
});
page++;
that.setData({
hidden: true
});
Page({
  data: {
hidden:true,
list:[],
scrollTop:0,
scrollHeight:0
  },
  onLoad:function(){
    var that =this;
wx.getSystemInfo({
success: function(res){
that.setData({
scrollHeight: res. windowHeight
});
}
});
loadMore(that);
//页面滑动到底部
 bindDownLoad:function(){
var that = this;
loadMore(that);
console.log("lower");
}
 scroll:function(event){
//该方法绑定了页面滚动时的事件，这里记录了当据后把页面定位到这里
this.setData({
scrol1Top:event.detail.scrollTop
});
},
topLoad: function(event){
  page=0;
  this.setData(l
    list:[],
    scrollTop:0
  });
    loadMore(this);
    console.log( "lower");
  }
})

.userinfo {
display:flex;
flex-direction:column;
align-items:center;
}
.userinfo-avatar{
width:128rpx;
height:128rpx;
margin:20rpx;
border-radius:50%;
}
userinfo-nickname{
Color:#aaa;
}
usermotto {
margin-top:200px;
}
srcoll-view{
  width: 100%;
}
.item{
  width: 90%;
  height: 300rpx;
  margin: 20rpxauto;
  background:hidden ;
  
}
.item.img{
  width: 430rpx;
  margin-right: 20px;
  float:left;
}
.title{
font-size: 30rpx;
display: block;
margin: 30rpxauto;
}
.description{
  font-size: 26rpx;
  line-height: 15rpx;
}

没有放图片

<swiper indicator-dots='true' autoplay='true' interval='5000'du-ration='1000'>
<swiper-item>
<image src="/images/1.png" style="width: 100%;"></image>
</swiper-item>
<swiper-item>
<image src="/images/2.jpg" style="width: 100%;"></image>
</swiper-item>
<swiper-item>
  <image src="/images/3.jpg" style="width: 100%;"></image>
</swiper-item>
</swiper>

swiper组件属性

icon组件属性

<view>icon:类型:
<block wx:for ="{{iconType}}">
<icon type ="{{item}}"/>{{item}}</block >
</view>
<view>icon 大小：
<block wx:for ="{{iconsize}}">
<icon type="success" size ="{{item}}"/>{{item}}</block>
</view>
<view>icon 颜色:
<block wx:for="{{iconColor}}">
<icon type="success" size ="30" color={{item}}"/>{{item}}</block>
</view>

text组件属性

<block wx:for="{{x}}"wx:for-item="x">
<view class ="aa">
<block wx:for="{{25-x}}"wx:for-item="x">
<text decode = "{{true}}" space = "{{true}}" >&nbsp;
</text>
</block>
<block wx:for="{{y}}"wx:for-item="y">
<block wx:if="{{y<=2*x-1}}">
<text>*</text></block>
</block></view>
</block>
<block wx:for ="{{x}}"wx:for-item="x" >
<view class="aa">
<block wx:for="{{39+x}}" wx:for-item="x" >
<text decode="{{true}}"space="{{true}}">&nbsp;
</block>
<block wx:for="{{y}}"wx:for-item="y" >
<block wx:if="{{y <=11-2*x}}">
<text>*</text>
</block>
</block>
</view>
</block>

Page({
  data:{
  x:[1,2,3,4,5],
  y:[1,2,3,4,5,6,7,8,9]
  }
  })

progress组件属性

<view>显示百分比</view>
<progress percent ='80' show-info ='80'
></progress>
<view>改变宽度 </view>
<progress percent ='50' stroke-width ='2'> </progress >
<view>自动显示进度条</view>
<progress percent ='80' active> </progress >

button组件属性

<button type="default">type:default</button>
<button type="primary">type:primary</button>
<button type="warn">type:warn</button>
<button type="default" bindtap='buttonSize'size="{{size}}">改变size</button>
<button type="default" bindtap='buttonPlain'plain="{{plain}}">改变plain</button>
<button type="default" bindtap='buttonLoading'loading="{{size}}">改变loading</button>

Page({
date:{
  size:'dafult',
  plain:'false',
  loading:'false'
},
buttonSize:function(){
  if(this.data.size=="default")
  this.setData({size:'mini'})
  else
  this.setData({size:'default'})
},
buttonPlain:function(){
  this.setData({plain:!this.data.plain})
},
buttonLoading:function(){
  this.setData({loading:! this.data.loading})
}

  })

radio

<view>选择您喜爱的城市：</view>
<radio-group bindchange = "citychange">
  <radio value ="西安">西安</radio>
  <radio value ="北京">北京</radio>
  <radio value="上海">上海</radio>
  <radio value="广州">广州</radio>
  <radio value="深圳">深圳</radio>
  </radio-group>
<view>你的选择：{{city}}</view>
<view>选择您喜爱的计算机语言：</view>
<radio-group class ="radio-group" bindchange ="radiochange">
<label class="radio" wx:for="{{radios}}">
<radio value ="{{item. value}}" checked="{{item.checked}}"/>
{{item.name}}
</label></radio-group>
<view>你的选择：{{lang}}</view>

Page({
date:{
  radios:[
    {name:'java',value:'JAVA'},
    {name:'python',value:'PYthon',checked:'true'},
    {name:'php',value:'PHP'},
    {name:'swif',value:'Swif'},
  ],
  city:"",
  lang:""
},
citychange:function(e){
  this.setData({city:e.dateil.value});
},
radiochange: function(event){
  this. setpata( {lang: event.detail. value });console. log(event. detail. value)
}
  })

checkbox组件属性

<view>选择你想逃的课</view>
<checkbox-group bindchange = "cityChange">
<label wx:for ="{{citys}}">
<checkbox value = "{{item. value}}" checked='{{item. checked}}'>
{{item.value}}</checkbox>
</label>
</checkbox-group>
<view>您的选择是：{{city}}</view>

Page({
  city:"",
  data:{
  citys:[
  {name:'km',value:'昆明'},
  { name:'sy',value:'三亚'},
  {name:'zh',value:'珠海',checked:'true'},
  {name:'al',value:'大连'}]
  },
  cityChange: function(e){
  console.log(e.detail. value);var city = e.detail.value;this.setData({city:city})
  }
})

switch属性

<view>
<switch bindchange ="swl">{{var1}} </switch>
</view>
<view>
<switch checked bindchange="sw2">{{var2}}</switch>
</view>
<view>
<switch type ="checkbox" bindchange ="sw3">{{var3}} </switch>
</view>

Page({
  data:{
  varl:'关',
  var2:'开',
  var3:'未选'
  },
  swl:function(e){
  this.setData({varl:e.detail.value ?'开':'关'})
  },
  sw2: function(e){
  this.setData({var2:e.detail.value?'开':'关'})
  },
  sw3: function(e){
  this.setData({var3:e.detail.value ?'已选':'未选'})
  }
  })

slider组件属性

<view>默认min=0 max=100 step=1 </view>
<slider></slider>
<view>显示当前值</view>
<slider show-value></slider>
<view> 设置 min=20 max=200 step =10 </view>
<slider min='0'max='200' step ='10' show-value></slider>
<view>背颜色条红色，已选定颜色绿色</view>
<slider color="#f00" selected-color='#0f0'></slider>
<view>滑动改变 icon 的大小</view>
<slider show-value bindchange ='sliderchange'></slider>
<icon type="success" size='{{size}}'> </icon >

Page({
  data:{
  size:'20'
  },
  sliderchange:function(e){
    this.setData({size:e.detail.value})
  }
  })

pricker组件属性

<view>---range为数组---</view>
<picker range =" {{array}}" value =" {{indexl}}" bindchange=
'arrayChange'>
当前选择：{{larray[index1]}}
</picker>
<view >---range 为数组对象-—</view>
<picker
bindchange= "objArrayChange" value="{{index2}}" range-key=
"name" range="{{objArray}}">
当前选择：{{objArray[index2].name}}</picker >

Page({
  data:{
    array:['Java','Python','c','c#'],
    objArray:[
    {id:0,name:'Java'},
    {id: 1,name:'Python'},
    {id:2,name:'c'},
    {id: 3,name:'C#'}
    ],
    indexl:0,
    index2:0
  },
    arrayChange: function(e){
    console.log('picker 值变为',e.detail.value)
    var index = 0;
    this.setData({
    indexl: e.detail. value
    })
  },
    objArrayChange: function(e){
      console.log('picker 值变为',e.detail.value)
      this.setData({
        indexl: e.detail. value
        })
  }
  })

pricker组件属性

Page({
  data:{
    multiArray:[['陕西省','广东省',],['西安市','汉中市','延安市'],['雁塔区','长安区']],
    multiInde:[0,0,0]
  },
  //绑定MultiPcker
    bindMultiPickerColumnchange:function(e){
console.log('picker 发送选择改变，携带值为',e.detail. value)
this.setData({
multiIndex:e.detail.value
})
    },
//绑定 MultiPickerColumn
bindMultiPickerColumnchange:function(e){
console.log('修改的列为',e.detail.column,'值为',e.detail.value);
var data={
multiArray: this.data. multiArrayi,
multiIndex:this.data.multiIndex
};
data.multiIndex[e.detail.column]=e.detail.value;
switch(e.detail.column){
caseO;
switch(data.multiIndex[0]){
case0:
data.multiArray[1]=['西安市','汉中市','延安市门'];
data.multiArray[2] =['雁塔区','长安区'];
break;
casel:
data.multiArray[1]=['深圳市','珠海市'];
data.multiArray[2]=['南山区','罗湖区'];
break;
}
data.multiIndex[1] = 0,
data.multiIndex[2] = 0,
break;
casel:
switch(data.multiInde[0]){
  caseO:
  switch(data.multiInde[1]){
    case0:
data.multiArray[2] =['雁塔区','长安区'];
break;
casel:
data.multiArray[2] =['汉台区','南朕区'];
break;
case2:
data.multiArray[2] =['宝塔区','子长县','延川县'];
break;
  }
  break;
  casel:
switch(data.multiIndex[1]){
caseo:
data.multiArray[2]=['南山区','罗湖区门'];
break;
casel:
data.multiArray[2]=['香洲区','斗门区'];
break;
}
break;
}
data.multiIndex[2] = 0;
console. log(data. multiIndex);
break;
  }
  this.setData(data);
  },
}）

<view>多列选择器</view>
<picker 
rmode="multiSelector" 
bindchange="bindMultipickerChange" 
bindcolumnchange="bindMultipickerColumnChange" 
value="{{multiIndex}}" 
range="{{multiArray}}">
  <view>
    当前选择：{{multiArray[0][multiIndex[0]]}},
             {{multiArray[1][multiIndex[1]]}},
             {{multiArray[2][multiIndex[2]]}}
  </view>
</picker>

picker组件date选择器属性

<view>
<picker mode="date"start ="{{start}}" end="{{enddate}}"value="{{date}}"bindchange="changedate">
选择日期：{{date}}
</picker>
</view>
<view>
<picker mode="time"start="{{starttime}}"end="{{endtime}}"bindchange="changedate">
选择的时间{{time}}
</picker>
</view>

Page({
  data:{
    startdate: 2000,
    enddate: 2050,
    date: '2018',
    starttime:'00:00',
    endtime: '12:59',
    time:'8:00'
  },
changedate: function(e){
this.setData({ date: e.detail.value });
console. log(e. detail.value)
},
changetime: function(e){
this.setData({time:e.detail.value})
console.log(e. detail.value)
  }
})

<view>当前日期:{{year}}年{{month}}月{{day}}日</view>
<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 =1900;i <=2050;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,
      months: months,
      days: days,
      year: date.getFullYear(),
      month:date.getMonth()+1,
      day: date.getDate(),
      value:[118,0,0],//定位到2018年1月1日
 },
bindchange: function(e){
const val = e.detail.value
console.log(val);
this.setData({
year: this.data.years[val[0]],
month: this.data.months[val[1]],
day: this.data.days[val[2]]
})
  }
})

input

<input placeholder="这是一个可以自动聚焦的 input"auto-focus/>
<input placeholder="这个只有在按钮点击的时候才聚焦"focus="{{fo-cus}}"/>
<button bindtap ="bindButtonTap">使得輸入框获取焦点</button>
<input maxlength="10" piadebolaee="最大输入长度为10"/>
<view class="section_title">你輸入的是:{{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(/1/g,'2').length
 }
 return{
   value:value.replace(/11/g,'2'),
   cursor:pos
 }
  }
})

textarea

<textarea bindblur="bindTextAreaBlur" auto-height="" placeholder="自动变高"/>
     <textarea placeholder="placeholder 颜色是红色的" placeholder="color:red;"/>
    <textarea placeholder="这是一个可以自动聚焦的Textarea"auto-focus/>
    <textarea placeholder="这个只有在按钮点击的时候才聚焦"focus="{{focus}}"/>
    <button bindtap="bindButtonTat">使得输入框获取焦点</button>
   <form bindsubmit="bindFormSubmit">
   <textarea placeholder="form中的textarea" name="textarea"/>
   <button form-type="submit">提交</button>
  </form>

Page({
  data:{
    height:10,
    focus:false
  },
  bindButtonTap:function(){
    this.setData({
      focus:true
    })
  },
  binTextAreaBlur:function(e){
    console.log(e.detail.value.textarea)
  }
})

lable

<view><checkbox></checkbox>中国</view>
  <view><label><checkbox></checkbox>中国</label></view>
  <checkbox-group bindchange="cityChange">
  <label wx:for="{{citys}}">
  <checkbox value="{{item.value}}" checked="{{item.checked}}">{{item.value}}</checkbox>
</label>
</checkbox-group>
<view>您的选择是：{{city}}</view>

Page({
  city:"",
  data:{
    citys:[
      {name:'km',value:'昆明'},
      {name:'sy',value:'三亚'},
      {name:'zh',value:'珠海',checked:'true'},
      {name:'dl',value:'大连'}
    ]
  },
  cityChange:function(e){
    console.log(e.detail.value);
    var city = e.detail.value;
    this.setData({city:city})
  }
})

form

Page({
  hobby:"",
  data:{
    hobbies:[
      {name:'jsj',value:'计算机',checked:'true'},
      {name:'music',value:'听音乐'},
      {name:'game',value:'玩游戏'},
      {name:'swim',value:'游泳',checked:'true'}
    ]
  },
  formSubmit:function(e){
    console.log('form发生了submit事件,携带数据为:',e.detail.value)
  },
  formReset:function(){
    console.log('form发生了reset事件')
  }
})

<form bindsubmit="forSubnit" bindreset="forReset">
<view>姓名:
    <input type="text" name="xm"/>
 </view>
 <view>性别:
    <radio-group name="xb">
    <label>
    <radio value="男" checked/>男</label>
    <label>
    <radio value="女"/>女</label>
    </radio-group>
 </view>
 <view>爱好:
    <checkbox-group name="hobby">
    <label wx:for="{{hobbies}}">
       <checkbox value="{{item.value}}"
       checked="{{item.checked}}">{{item.value}}</checkbox>
    </label>
    </checkbox-group>
 </view>
 <button form-type="submit">提交</button>
 <button form-type="reset">重置</button>
</form>

缩放模式

d

<block wx:for="{{modes}}">
<view>当前图片模式是:{{item}}</view>
<image mode="{{item}}" src="/images/1.jpg" style="width:100%,height:100%"/>
</block>

Page({
  data:{
    modes:['scaleToFill','aspectFit','aspectFill','widthFix']
  }
})

裁剪

<block wx:for="{{modes}}">
<view>当前图片模式是:{{item}}</view>
<image mode="{{item}}" src="/images/1.jpg" style="width: 100%,height:100%"/>
</block>

Page({
  data:{
    modes:['top','center','bottom','left','right','top-left','top-right','bottom-left','bottom-right']
  }
})

audio

<audio src="{{src}}" action="{{action}}" poster="{{poster}}" name="{{name}}" author="{{author}}" loop controls></audio>
<button type="primary" bindtap='play'>播放</button>
<button type="primary" bindtap='pause'>暂停</button>
<button type="primary" bindtap='playRate'>设置速率</button>
<button type="primary" bindtap='currentTime'>设置当前时间(秒)</button>

Page({
  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=Efffffff82def4af4b12b3cd9337d5e7&uin =346897220&vkey =6292F51E1E384 EO6DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6a&fromtag=46',
  },
  play:function(){
    this.setData({
      action:{
        method:'play'
      }
    })
  },
  pause:function(){
    this.setData({
      action:{
        method:'pause'
      }
    })
  },
  playRate:function()
  {
    this.setData({
      action:{
        method:'setPlaybackRate',
        data:10
      }
    })
    console.log('当前速率:'+this.data.action.data)
  },
  currentTime:function(e){
    this.setData({
      action:{
        method:'setCurrentTime',
        data:120
      }
    })
  }
})

video

<video src="{{src}}" controls></video>
<view class="btn-area">
<button bindtap="bindButtonTap">获取视频</button>
</view>

Page({
  data:{
    src:"",
  },
  bindButtonTap:function(){
    var that=this
    wx.chooseVideo({
      sourceType:['album','camera'],
      maxDuration:60,
      camera:['front','back'],
      success:function(res){
        that.setData({
          src:res.tempFilePath
        })
      }
    })
  }
})

<camera device-position="back" flash="off" binderror="error" style="width: 100%;height: 350px;"></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)
}
})

Page({
  data:{
    markers:[{
      iconPath:"/pages/dw.png",
      id:0,
      longitude:"108.9290",
      latitude:"34.1480",
      width:50,
      height:50
    }],
    polyline:[{
      points:[
        {
          longitude:"108.9200",
          latitude:"34.1400",
        },
        {
          longitude:"108.9200",
          latitude:"34.1500"
        },
        {
          longitude:"108.9200",
          latitude:"34.1700"
        }
      ],
      color:"#00ff00",
      width:2,
      dottedLine:true
    }],
    controls:[{
      id:1,
      iconPath:'/pages/dw.png',
      position:{
        left:0,
        top:300,
        width:30,
        height:30
      },
      clickable:true
    }]
  },
  regionchange(e){
    console.log(e.type)
  },
  markertap(e){
    console.log(e.markerId)
  },
  controltap(e){
    console.log(e.controlId)
  }
})

<map id="map"
     longitude="108.9200" 
     latitude="34.1550"
     scale="14"
     controls="{{controls}}"
     bindcontroltap="controltap"
     markers="{{markers}}"
     bindmarkertap="markertap"
     polyline="{{polyline}}"
     bindregionchange="regionchange"
     show-location
     style="width: 100%;height: 300px;">
     </map>

<canvas canvas-id="myCanvas" style="border: 1px solid red;"/>

Page({
  onLoad:function(options){
    var ctx=wx.createCanvasContext('myCanvas')
    ctx.setFillStyle('green')
    ctx.fillRect(10,10,200,100)
    ctx.draw()
  }
})