微信小程序开发学习笔记005--微信小程序组件详解

先来再看看事件冒泡:
看个例子,新建项目库credemo05


case1.wxml
<view bindtap="fn1">
outer
   <view bindtap="fn2">
   middle
       <view bindtap="fn3">
         inner
       </view>
   </view>
</view>
去看看效果,再来看看catch什么意思?
他是阻断事件冒泡的.


case1.wxml
<view bindtap="fn1">
outer
   <view bindtap="fn2">
   middle
   //1.这里用catch
       <view catchtap="fn3">
         inner
       </view>
   </view>
</view>
 
然后写case1.js


fn1:function(){
console.log('inner');
},
fn2:function(){
console.log('middle');
},
fn3:function(){
console.log('outer');
},




好,开始新的课程,今天主要说组件:
帮助文档:
https://mp.weixin.qq.com/debug/wxadoc/dev/component/


常见的组件:
视图容器
基础内容
表单组件
导航
媒体
地图
画布
客服会话
------------------
咱们通过案例给大家说:
案例1：轮播图
案例2：下拉加载更多。。。
案例3：进度条
案例4：嵌入页面滚动器:就是比如选择一个出生年月对吧
                      滚动选择几几年出生这样.
案例5：选择器:单个的选择
案例6：注册登录
案例7：开关选择器
案例8：各种图标
案例9：页面跳转
案例10：多媒体音视频
案例11：嵌入地图
案例12：画布
-------------------------
好,咱们先来看前6个
案例1：轮播图:
https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html
swiper
滑块视图容器。


属性名 类型 默认值 说明
indicator-dots Booleanfalse 是否显示面板指示点:这个指的是
                                                   显示的时候的小点.
indicator-color Colorrgba(0, 0, 0, .3) 指示点颜色 （这个属性目前暂未启用）
indicator-active-color Color#000000 当前选中的指示点颜色 （这个属性目前暂未启用）
autoplay Booleanfalse 是否自动切换
current Number0 当前所在页面的 index
interval Number5000 自动切换时间间隔
duration Number500 滑动动画时长
circular Booleanfalse 是否采用衔接滑动
bindchange EventHandlecurrent 改变时会触发 change 事件，event.detail = {current: current}
注意：其中只可放置<swiper-item/>组件，否则会导致未定义的行为。


好,咱们来试试:
swiper-item
仅可放置在<swiper/>组件中，宽高自动设置为100%。
他指的是每一张轮播的图片.


好,新建一个页面case2
case2.wxml
//1.这样写就可以了每个参数是什么意思,都有写的对吧.
//
<view class="page">
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{true}}" interval="{{interval}}"  duration="{{duration}}">
<swiper-item>
<image src="/imgs/1.jpg" width="750rpx" height="130"/>
</swiper-item>


<swiper-item>
<image src="/imgs/2.jpg" width="750rpx" height="130"/>
</swiper-item>


<swiper-item>
<image src="/imgs/3.jpg" width="750rpx" height="130"/>
</swiper-item>


<swiper-item>
<image src="/imgs/4.jpg" width="750rpx" height="130"/>
</swiper-item>


</swiper>
</view>
-----------------------------
把找好的图片放到和代码pages文件夹同目录的目录中


然后写一写:
case2.wxss
这里的width="750rpx" height="130"也可以写到
wxss中,而且应该写在wxss中,否者可能会有点问题.
case2.wxss
image{
width:750rpx;
}


case2.js中定义数据:
Page({
data:{
//1.这里定义数据
//
indicatorDots:true,
interval:4000,
duration:1000,
},
onLoad:function(options){

},
onReady:function(){

},
onShow:function(){

},
onHide:function(){

},
onUnload:function(){

},
onPullDownRefresh:function(){

},
onReachBottom:function(){

}
})
--------------------------
然后把页面设置成首页case2:
app.json
{
  "pages":[
  //1.这里添加
  //
   "pages/case2/case2",
   "pages/case1/case1",
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}
------------------------------------
看看,效果好,这是静态的,咱们看看动态的图片怎么做:
case2.wxml
<view class="page center">
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{true}}" interval="{{interval}}"  duration="{{duration}}">
//1.这里用这个block循环一个数组
//
<block wx:for="{{imgs}}">
   <swiper-item>
       <image src="{{item}}"  height="130"/>
   </swiper-item>
</block>
</swiper>
</view>


case2.js中定义图片数据:
Page({
data:{
indicatorDots:true,
interval:4000,
duration:1000,
//1.所有的图片数据
//这个图片数据
//
imgs:[
'/imgs/1.jpg',
'/imgs/2.jpg',
'/imgs/3.jpg',
'/imgs/4.jpg',]


},
onLoad:function(options){

},
onReady:function(){

},
onShow:function(){

},
onHide:function(){

},
onUnload:function(){

},
onPullDownRefresh:function(){

},
onReachBottom:function(){

}
})
-------------------------
看看效果.
好,咱们看,图片是铺满整个屏幕的对吧
咱们如果想让图片,距离左右都有一定距离,咱们看看怎么做?
case2.wxss
image{
//1.750-->730
width:730rpx;
}


可以看到图片居左了对,不对


好,咱们来写个样式在app.wxss中,这样其他的页面也能用了
app.wxss:


-----------------------
/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
} 
//1.这里对吧.
.center{
text-align:center;
}




然后在:
case2.wxml中:
//1.这里添加整个center样式
<view class="page center">
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{true}}" interval="{{interval}}"  duration="{{duration}}">


<block wx:for="{{imgs}}">
   <swiper-item>
       <image src="{{item}}"  height="130"/>
   </swiper-item>
</block>


</swiper>
</view>
-------------------
看看效果,左右居中了对吧.


好,再看看,如果不想让图片播放的时候,小点显示的话,那么
case2.js
Page({
data:{
//1.这里改成false就行了.
//
indicatorDots:false,
interval:4000,
duration:1000,
imgs:[
'/imgs/1.jpg',
'/imgs/2.jpg',
'/imgs/3.jpg',
'/imgs/4.jpg',]


},
onLoad:function(options){

},
onReady:function(){

},
onShow:function(){

},
onHide:function(){

},
onUnload:function(){

},
onPullDownRefresh:function(){

},
onReachBottom:function(){

}
})
---------------------------
好,再看看下拉加载
https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html
scroll-view
可滚动视图区域。


属性名 类型 默认值 说明
scroll-x Booleanfalse 允许横向滚动
scroll-y Booleanfalse 允许纵向滚动
upper-threshold Number50 距顶部/左边多远时（单位px），触发 scrolltoupper 事件
lower-threshold Number50 距底部/右边多远时（单位px），触发 scrolltolower 事件
scroll-top Number设置竖向滚动条位置
scroll-left Number设置横向滚动条位置
scroll-into-view String值应为某子元素id，则滚动到该元素，元素顶部对齐滚动区域顶部
bindscrolltoupper EventHandle滚动到顶部/左边，会触发 scrolltoupper 事件
bindscrolltolower EventHandle滚动到底部/右边，会触发 scrolltolower 事件
bindscroll EventHandle滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
使用竖向滚动时，需要给<scroll-view/>一个固定高度，通过 WXSS 设置 height。




好,咱们直接看功能
新建一个页面case3:
case3
case3.js
case3.wxml
case3.wxss


先看看:
case3.wxml
<view class="page">
<scroll-view class="scroll" scroll-y="{{true}}" 
style="height:300px" scroll-top="10" 
bindscrolltolower="lower" bindscrolltoupper="upper">
<view class="inner">
hello
</view>
</scroll-view>
</view>


case.wxss
.scroll{
background-color:blue;
}


.inner{
//1.这里设置500,外面那个是300
height:500px;
}


这里设置一下看看:
比如背景颜色,里面有个view对吧,这个高度要比外面的scroll-view的高度
高,要不然就不会有滚动条了对吧


好,这里,咱们再看看,当用户滑动,滚动条,比如到距离
scroll-view 10像素的时候就触发相应的事件去加载数据对吧.


好,咱们看看:
咱们给,上滑下滑都绑定了事件对吧.
比如:
case3.wxml中:
 scroll-top="10" 
bindscrolltolower="lower" bindscrolltoupper="upper"


距离上或者下,10像素的时候,执行lower或者upper事件


咱们把事件添加上看看:
case3.js


Page({
data:{

},
onLoad:function(options){

},
lower:function(e){
console.log('lower');
},
upper:function(e){
console.log('upper');
},
onReady:function(){

},
onShow:function(){

},
onHide:function(){

},
onUnload:function(){

},
onPullDownRefresh:function(){

},
onReachBottom:function(){

}
})
-----------------
好,咱们把事件加上后,看看效果对吧.
滑动的时候,控制台打印出了数据了.


好,接下来咱们看看进度条
咱们看看帮助文档:
progress
进度条。


属性名 类型 默认值 说明
percent Float 无 百分比0~100
show-info Booleanfalse 在进度条右侧显示百分比
stroke-width Number6 进度条线的宽度，单位px
color Color #09BB07 进度条颜色
active Booleanfalse 进度条从左往右的动画




咱们新建一个页面
case4
case4.js
case4.wxml
case4.wxss


case4.wxml
<view class="page">
//1.每个属性试一下看看效果.
//
<progress  percent="100" active show-info stroke-width="20" color="blue"/>
</view>


然后:
app.json中:
{
  "pages":[
  //1.这里添加case4
  //
   "pages/case4/case4",
    "pages/case3/case3",
   "pages/case2/case2",
   "pages/case1/case1",
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}
---------------
看下一个效果,滚动选择
咱们看看:
新建case5
case5.js
case5.wxss
case5.wxml
https://mp.weixin.qq.com/debug/wxadoc/dev/component/picker-view.html
需要用到组件
picker-view
嵌入页面的滚动选择器


属性名 类型 默认值 说明
value Number 
        Array 数组中的数字依次表示 picker-view 内的 picker-view-colume 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项。
indicator-style String设置选择器中间选中框的样式
bindchange EventHandle当滚动选择，value 改变时触发change 事件，event.detail = {value: value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始）
注意：其中只可放置<picker-view-column/>组件，其他节点不会显示。


picker-view-column
仅可放置于<picker-view />中，其孩子节点的高度会自动设置成与
picker-view的选中框的高度一致


好,咱们做这样一个东西,每个地区,有不同的技术方向,不同的班级
case5.wxml
<view class="page">
<view style="text-align:center">
//1.这里读取js中定义的数据
//滑动的时候触发事件会自动改变这里的值
//在事件中会重新设置js文件中定义的这些数据
//
{{seladdr}}-{{selcour}}-{{selclz}}
</view>
//2.用picker-view声明一个滚动器
// bindchange="change"绑定事件
//
<picker-view value="{{value}}"
 bindchange="change" indicator-style="height:50px;" 
 style="width:100%;height:300px">
//3.<picker-view-column>
//每一个<picker-view-column>是一个列
//
<picker-view-column>
<view wx:for="{{address}}" style="line-height:50px;">
{{item}}
</view>
</picker-view-column>


<picker-view-column>
<view wx:for="{{course}}" style="line-height:50px;">
{{item}}
</view>
</picker-view-column>


<picker-view-column>
//3.循环每列信息
<view wx:for="{{clz}}" style="line-height:50px;">
{{item}}
</view>
</picker-view-column>
</picker-view>
</view>
---------------------
定义数据
case5.js
Page({
data:{
//1.这里定义数据
seladdr:'济南',
selcour:'HTML5',
selclz:1703,
value:[0,0,0],
address:['大连','济南','武汉','乌克兰'],
course:['HTML5','ANDROID','.NET','JAVA'],
clz:[1601,1602,1703,1704,1405,1506]
},
//2.这里来定义滚动时触发的事件
//
change:function(e){
var val=e.detail.value;
this.setData({
seladdr:this.data.address[val[0]],
selcour:this.data.course[val[1]],
selclz:this.data.clz[val[2]]
})
},
onLoad:function(options){

},
onReady:function(){

},
onShow:function(){

},
onHide:function(){

},
onUnload:function(){

},
onPullDownRefresh:function(){

},
onReachBottom:function(){

}
})
-----------------
app.json
{
  "pages":[
     "pages/case5/case5",
   "pages/case4/case4",
    "pages/case3/case3",
   "pages/case2/case2",
   "pages/case1/case1",
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}


看看效果,然后
--------------------------
好,接下来看下一个
选择器:
https://mp.weixin.qq.com/debug/wxadoc/dev/component/picker.html
用picker组件:
picker
从底部弹起的滚动选择器，现支持三种选择器，通过mode来区分，分别是普通选择器，时间选择器，日期选择器，默认是普通选择器。


普通选择器：mode = selector


属性名 类型 默认值 说明
range Array / Object Array[] mode为 selector 时，range 有效
range-key String当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
value Number 0 value 的值表示表示选择了 range 中的第几个（下标从 0 开始）。
bindchange EventHandlevalue 改变时触发 change 事件，event.detail = {value: value}
disabled Booleanfalse 是否禁用
时间选择器：mode = time


属性名 类型 默认值 说明
value String 表示选中的时间，格式为"hh:mm"
start String 表示有效时间范围的开始，字符串格式为"hh:mm"
end String 表示有效时间范围的结束，字符串格式为"hh:mm"
bindchange EventHandlevalue 改变时触发 change 事件，event.detail = {value: value}
disabled Booleanfalse 是否禁用
日期选择器：mode = date


属性名 类型 默认值 说明
value String 0 表示选中的日期，格式为"YYYY-MM-DD"
start String 表示有效日期范围的开始，字符串格式为"YYYY-MM-DD"
end String 表示有效日期范围的结束，字符串格式为"YYYY-MM-DD"
fields String day 有效值 year,month,day，表示选择器的粒度
bindchange EventHandlevalue 改变时触发 change 事件，event.detail = {value: value}
disabled Booleanfalse 是否禁用
注意：开发工具暂时只支持mode = selector。


好,试试,新加一个页面
case6
case6.js
case6.wxss
case6.wxml
--------------------------
咱们用picker来实现选择器:
case6.wxml:
<view class="page">
<picker bindchange="change" value="{{index}}" range="{{arrayObject}}">
<view class="picker">
{{arrayObject[index]}}
</view>
</picker>
</view>


case6.js
Page({
data:{
//1.定义数据
arrayObject:['济南','北京','大连'],
   index:0
},
//2.绑定数据
//
change:function(e){
this.setData({
index:e.detail.value
})
},
onLoad:function(options){

},
onReady:function(){

},
onShow:function(){

},
onHide:function(){

},
onUnload:function(){

},
onPullDownRefresh:function(){

},
onReachBottom:function(){

}
})


最后这个功能,是一个注册登录的,使用input那个组件来实现就可以了.