微信小程序开发项目实战（微课版） 课后实训试题及答案 项目实训02.docx

PAGE49

项目2小程序编程基础

项目实训

一、选择题

1．下面程序，index.wxml页面显示的信息是（C）。

index.wxml页面代码如下：

viewwx:if={{length5}}1/view

viewwx:elif={{length2}}2/view

viewwx:else3/view

index.js页面代码如下：

Page{()

data:{length:6}

)}

A．3 B．2 C．1 D．不显示

2．下面结果，index.wxml页面显示的信息是（C）。

index.wxml页面代码如下：

blockwx:if={{true}}

viewview1/view

viewview2/view

/block

A．view1 B．view2 C．view1view2 D．无

3．App的生命周期函数不包括（C）。

A．onHide B．onError C．onLoad D．onLaunch

4．Page的生命周期函数不包括（D）。

A．onReady B．onUnload C．onShow D．onLaunch

5．下面程序，正确答案的是（D）。

blockwx:for={{[1,2,3]}}

view{{index}}:{{item}}/view

/block

A．0：3 B．0：0 C．1：1 D．0：1

1：2 1：1 2：2 1：2

2：1 2：2 3：3 2：3

二、综合实训

1．组件绑定事件，通过点击事件，使组件颜色和大小发生改变，并输出随机数。

步骤1：新建小程序页面，在WXML页面实现页面布局。

viewclass=box

style=background:{{color}};width:{{size}}rpx;height:{{size}}rpx;bindtap=clickBox

随机数是：{{num}}

/view

步骤2：在WXSS页面实现页面样式的设置。

.box{

margin:50rpx;

width:200rpx;

height:200rpx;

background:pink;

color:black;

display:flex;

justify-content:center;

align-items:center;

}

步骤3：在JS页面实现事件绑定clickBox代码的编写。

Page({

data:{

num:0,

color:pink,

size:300

},

clickBox(){

letrandomdata=parseInt(Math.random()*100)

letr1=parseInt(Math.random()*255)

letr2=parseInt(Math.random()*255)

letr3=parseInt(Math.random()*255)

letcolor=`rgb(${r1},${r2},${r3})`

letsize=parseInt(Math.random()*400)

size=size200?200:size

this.setData({

num:randomdata,

color:color,

size:size

})

},

})

2．实现以下效果，并在控制台上打印表单提交的信息，效果如图2-23、2-23所示。

图2-23表单效果

图2-24控制台结果