微信小程序第四章总结

4.1组件的定义及属性

每一个组件都由一对标签组成，有开始标签和结束标签，内容放置在开始标签和结束标 签之间，内容也可以是组件。组件的语法格式如下：

<标签名 属性名="属性值">内容……

组件通过属性来进一步细化。不同的组件可以有不同的属性，但它们也有一些共用属 性，如id、class、style、hidden、data-*、bind*/catch*等。

不同组件的属性如下：id    组件的唯一表示，保持整个页面唯一，不常用。 class   组件的样式类，对应WXSS中定义的样式。

style组件的内联样式，可以动态设置内联样式。

hidden组件是否显示，所有组件默认显示。

data-*自定义属性，组件触发事件时，会发送给事件处理函数。事件处理函数可以通过传人参数对象的currentTarget. dataset方式来获取自定义属性的值。bind */catch *组件的事件，绑定逻辑层相关事件处理函数。

4.2 容器视图组件

容器视图组件是能容纳其他组件的组件，是构建小程序页面布局的基础组件，主要包括view、scroll-view和swiper组件。

4.2.1 view

  view组件是块级组件，没有特色功能，主要用于布局展示，相当于HTML中的div，是布局中最基本的用户界面（er Inteface，UI）组件，通过设置view的CSS属性可以实现各种复杂的布局。

view组件的特有属性表如下：

示例代码如下：

wxml：

默认flex布局

1

2

3

上下混合布局

1

2

3

左右混合布局

1

2

3

完成效果图如下：

* 

4.2.2 scroll-view

通过设置seroll-view组件的相关属性可以实现滚动视图的功能。

其属性如下图所示：

 通过serol-view 组件可以实现下拉刷新和上拉加载更多，代码如下:

wxml代码如下：

//index.wxml

style="height: {{scrollHeight}} px;" class="list" bind-scrolltolower="binsdDowLoad"

bindscrolltoupper="topLoad"bindscroll="scroll">

"

{{item.name}}>

{{item.short_description}}

加载中。。。。

wxss代码如下

//wxss

.userinfol{

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;

}

/**/

scroll-view{

width:100%;

}

.item{

width:90%;

height:300rpx;

margin:20rpxauto;

background:brown;

overflow:hidden;

}

.item.img{

width:430rpx;

margin-right:20rpx;

float:left;

}

.title{

font-size:30rpx;

display:block;

margin:30rpxauto;

}

.description{

font-size:26rpx;

line-height:15rpx;

}

js代码如下

//js

var url ="http://www.imooc.con/course/ajaxlist";

var page = 0;

var page_size =5;

var sort="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_ia,

unlearn:unlearn

},

success:function(res){

var list=that.data.list;

for(var i=0;i

list.push(res.data.list[i]);

}

that.setData({

list:list

});

page ++;

that.setData({

hidden: true

});

}

});

}

Page({

data:{

hidden: true,

list:[],

scrol1Top:0,

scrollHeight: 0

},

onLoad: function(){

var that = this;

wx.getSystemInfo({

success: function(res){

that.setData({

scrol1Height: res. windowHeight

});

}

});

loadMore(that);

},

bindDownLoad: function(){

var that = this;

loadMore(that);

console.log("lower");

},

scroll: function(event){

this.setData({

scrollTop: event.detail.scrollTop

});

},

topLoad: function(event){

page =0;

this.setData({

list:[1],

scrollTop:0

});

loadMore(this);

console.log("lower");

}

})

4.2.3 swiper

  swiper组件可以实现轮播图、图片预览、滑动页面等效果。一个完整的swiper 组件由和两个标签组成，它们不能单独使用。中只能放置-个或多个，若放置其他组件则会被删除;内部可以放置任何组件，默认宽高自动设置为100%。swiper组件的属性如下图所示

 设置swiper组件，可以实现轮播图效果，代码如下:

//index.wxml:

//index.wxml

完成效果如下图：

4.3 基础内容组件

基础内容组件包括icon、text和progress，主要用于在视图页面中展示图标、文本和进度条等信息。

4.3.1 icon

icon组件即图标组件，通常用于表示一种状态，如success、info、warn、waiting、cancel等。

属性图如下所示：

 代码示例如下：

index.wxml代码如下：

//index.wxml

icon类型：

{{item}}

icon大小：

{{item}}

icon颜色：

{{item}}

 index.js代码如下：

//index.js

Page({

data:{

iconType:["success","success_no_circle","info","warn","waiting","cancel","download","search","clear"],

iconSize:[10,20,30,40],

iconColor:["#f00","#0f0","#00f"]

}

})

 完成效果如下：

4.3.2 text

   text 组件用于展示内容，类似HTML中的，text 组件中的内容支持长按选中，支持转义字符“\”，属于行内元素。text组件的属性如下所示 。

 text组件属性

示例代码如下：

text.wxml代码如下：

//text.wxml

*

*

 text.js代码如下：

// text.js

Page({

data:{

x:[1,2,3,4,5],

y:[1,2,3,4,5,6,7,8,9]

}

})

 运行结果如下：

4.3.3 progress 

   progress 组件用于显示进度状态，如资源加载、用户资料完成度、媒体资源播放进度等progress 组件属于块级元素。

其属性如下图所示：

 示例代码如下：

index.wxml：

//index.wxml

显示百分比

改变宽度

自动显示进度条

完成效果如下：

4.4 表单组件

    表单组件的主要功能是收集用户信息，并将这些信息传递给后台服务器，实现小程序与用户之间的沟通。表单组件不仅可以放置在

js代码如下：

//js:

Page({

data:{

height:10,

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)

}

})

完成效果如下图：

4.4.10 ladel 

 label组件为标签组件, 用于提升表单组件的可用性。label 组件支持使用for属性找到对应的id,或者将控件放在该标签下, 当点击label 组件时,就会触发对应的控件。 for 属性的优先级高于内部控件, 内部有多个控件的时候默认触发第一个控件。 目前, label 组件可以绑定的控件有、、、。

示例代码如下：

wxml代码如下：

//wxml:

中国

中国

{{item.value}}

您的选择是：{{city}}

js代码如下：

//js:

Page({

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})

}

})

完成效果如下：

4.4.11 form

form 组件为表单组件, 用来实现将组件内的用户输入信息进行提交。 当< form/ > 表单中formType为submit 的

组件时, 会将表单组件中的value 值进行提交。

其属性如下表：

示例代码如下：

wxml代码如下：

//wxml:

姓名：

性别：

男

女

爱好：

{{item.value}}

提交

重置

js代码如下：

//js:

Page({

hobby:'',

data:{

hobbies:[

{name:'jsj',value:'计算机',checked:'true'},

{name:'music',value:'听音乐'},

{name:'game',value:'玩电竞'},

{name:'swim',value:'游泳',checked:'true'}

]

},

forSubmit:function(e){

console.log('form发生了submit事件，携带数据为：',e.detail.value)

},

formReset:function(){

console.log('form发生了reset事件')

}

})

完成效果如下：

4.5 多媒体组件

  多媒体组件包括image (图像)、audio (音频)、video(视频)、camera (相机) 组件,使用这些组件, 可以让页面更具有吸引力。

4.5.1 image

image 组件为图像组件, 与HTML中的< img/ > 类似, 系统默认image 组件的宽度为300px、高度为2250px。

image组件的属性如下表：

  image组件中的mode属性有13种模式, 其中缩放模式有4种, 裁剪模式有9种。

1.缩放模式

 scaleToFill  不保持纵横比缩放图片, 使图片的宽高完全拉伸至填满image元素。  aspectFit  保持纵横比缩放图片, 使图片的长边能完全显示出来。 也就是说, 可以将图片完整地显示出来。  aspectFill  保持纵横比缩放图片, 只保证图片的短边能完全显示出来。 也就是说,图片通常只在水平或垂直方向是完整的, 在另一个方向将会发生截取。  widthFix  宽度不变, 高度自动变化, 保持原图宽高比不变。

示例代码如下：

wxml代码如下：

当前图片的模式是:{{item}}

js代码如下：

Page({

data:{

modes:['scaleToFill','aspectFit','aspectFill','widthFix']

}

})

完成效果如下：

 2.裁剪模式

top不缩放图片, 只显示图片的顶部区域。

 bottom 不缩放图片, 只显示图片的底部区域。

 center不缩放图片, 只显示图片的中间区域。

 left 不缩放图片, 只显示图片的左边区域。

 right 不缩放图片, 只显示图片的右边区域。

 top-left 不缩放图片, 只显示图片的左上边区域。

 top-right 不缩放图片, 只显示图片的右上边区域。

 bottom-right 不缩放图片, 只显示图片的左下边区域。

示例代码如下：

wxml代码如下：

当前图片的模式是：{{item}}

js代码如下：

Page({

data:{

modes:['top','center','bottom','left','right','top_left','top_right','bottom_right','bottom_right']

}

})

完成效果如下：

4.5.2 audio

audio组件用来实现音乐播放、暂停等。

其属性如下表：

示例代码如下：

wxml代码如下：

播放

暂停

设置速率

设置当前时间（秒)

js代码如下：

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= ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey =6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8 DFEAF74 C0A5CCFADD6471160CAF3E6A&from tag=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

}

})

}

})

完成效果如下：

4.5.3 video

 video组件用来实现视频的播放、暂停等。

其属性如下表：

示例代码如下：

wxml代码如下：

获取视频

js代码如下：

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

})

}

})

}

})

完成效果如下：

4.5.4 camera

camera 组件为系统相机组件, 可以实现拍照或录像功能。 在一个页面中, 只能有一camera 组件。 在开发工具中运行时, 使用电脑摄像头实现拍照或录像; 在手机中运行时, 使用手机前后摄像头实现拍照或录像。

其属性如下表：

示例代码如下：

wxml代码如下：

拍照

预览

js代码如下：

Page({

takePhoto(){

const ctx=wx.createCameraContext()

ctx.takePhoto({

quality:'high',

success:(res)=>{

this.setData({

src:res.tempImagePath

})

}

})

},

error(e){

console.log(e.detail)

}

})

完成效果如下：

4.6 其他组件

在小程序中，除了前面介绍的组件以外，map组件和canvas组件比较常用。

4.6.1 map

  map 组件用于在页面中显示地图或路径, 常用于LBS (基于位置服务) 或路径指引, 功能相对百度地图、高德地图较简单, 目前具备绘制图标、路线、半径等能力, 不能在croll-view、swipe、picker-view、movable-view组件中使用。

其属性如下表：

 map组件的markers属性用于地图上显示标记的位置，其相关属性表如下：

 map 组件的 polyline  属性用来指定一系列坐标点，从数组第一项连线到最后一项，形成一条路线，可以指定线的颜色、宽度、线型以及是否带箭头等。

其相关属性表如下：

示例代码如下：

wxml代码如下：

longitude="108.9200"

latitude="34.1550"

scale="14"

controls="{{controls}}"

bindcontroltap="controlstap"

markers="{{markers}}"

bindmarkertap="markertap"

polyline="{{polyline}}"

bindregionchange="regionchange"

show-location style="width: 100%;height: 300px;">

js代码如下：

Page({

data:{

markers:[{

iconPath:"/images/1.jpg",

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:'/images/2.jpg',

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)

}

})

完成效果如下：

 4.6.2 canvas

 canvas组件用来绘制图形，相当于一块无色透明的普通图布。canvas组件本身并没有绘图能力，仅仅是图形容器，通过绘图API实现绘图功能。 在默认情况下，canvas组件的默认宽度为300px，高度为225px，同一页面中的canvas-id不能重复，否则会出错。

组件属性如下表：

（1）创建一个canvas绘图上下文。

var context=wx.createCanvasContext('MyCanvas')

（2）使用canvas绘图上下文进行绘图描述。

context.setFillStyle('green')//设置绘图上下文的填充色为绿色

context.fillRect(10,10,200,100)//方法画一个矩形，填充为设置的绿色

（3）画图。

context.draw()

示例代码如下：

sxml:

js:

Page({

onLoad:function(options){

var ctx=wx.createCanvasContext('myCanvas')

ctx.setFillStyle('green')

ctx.fillRect(10,10,200,100)

ctx.draw()

}

})

完成效果如下图：

文章来源

 您阅读本篇文章共花了：