微信小程序课程-第二章 微信小程序作业

第二章文章列表页面填空题1.微信小程序中swiper组件包含________组件添加轮播项。答案：swiper-items组件2.微信小程序页面生命周期回调函数主要包含________。答案：onLoad()、onShow()、onReady()、onHide()、onUnload()3.微信小程序中更新页面数据执行________方法答案：this.setData()4.微信小程序跳转页面，并且关闭当前页面执行______方法。答案：wx.redirectTo(object)5.微信小程序通过________方式实现单击事件________。答案：bindtap和catchtap判断题1.微信小程序页面生命周期回调函数先执行onReady()方法，后执行onShow()方法。(×)2.微信小程序中，在组件上可以绑定多个数据，同时也可以绑定多个事件。(√)3.微信小程序中组件的大小是固定的，无法更改。(×)4.微信小程序绑定数据在页面使用$｛｛｝｝语法读取数据(×)在微信小程序中使用bind绑定的方式可以触发事件冒泡，而使用catch绑定的方式可以阻止事件冒泡(√)选择题微信小程序中swiper组件属性是(ABCD)A.indicator-dotsB.indicator-colorC.indicator-active-colorD.autoplay2.微信小程序中单击事件是(B)。A.touchmoveB.tapC.touchendD.touchstart3.下列选项中，不属于App生命周期函数的是(BC)。A.onLaunchB.onLoadC.onUnloadD.OnHide4.下列选项中，不属于小程序路由函数是(C)。A.navigateToB.navigateBackC.forwardD.switchTab4.下列选项中，哪些不属于微信小程序事件对象属性(B)。A.typeB.resourceC.targetD.currentTarget5.下列选项中，关于微信小程序事件说法正确是(AB)。A.微信小程序中事件分为冒泡事件和非冒泡事件。B.事件对象可以携带额外信息，如id,dataset,touches。C.bind为组件绑定非冒泡事件，catch则绑定冒泡事件。D.同一组件只能绑定一次事件处理函数。简答题1.请描述微信小程序页面生命周期函数执行过程？请举例说明什么是事件，什么是事件处理函数。请简单描述wx.navigateTo方法和wx.redirectTo方法区别？请描述在数据绑定中this.data与this.setData的使用场景区别？编程题按照课程中微信小程序项目中【文章页面】的轮播图、文章列表功能、页面跳转功能。按照下图完成小米商城首页效果和商品明细效果。图-1微信小米商城首页效果图图-2商品详情页面效果功能要求描述：完成微信小米商城首页静态页面布局。完成首页轮播效果(轮播数据模拟数据定义在js文件中)。通过列表线上商品信息(模拟数据定义js文件)。点击商品，页面跳转到【商品详细页面】实现参考步骤：完成【微信小米商城】首页静态效果。新建页面，页面元素代码如下：<!--index.wxml--><view

class="container">

<!--

轮播图

-->

<swiper

class="banner"

indicator-dots="{{true}}"

indicator-color="rgba(255,255,255,0.3)"

indicator-active-color="#edfdff"

indicator

autoplay="true"

interval="5000"

circular="{{true}}">

<swiper-item>

<image

src="../../images/01.jpg"></image>

</swiper-item>

<swiper-item>

<image

src="../../images/02.jpg"></image>

</swiper-item>

<swiper-item>

<image

src="../../images/03.jpg"></image>

</swiper-item>

<swiper-item>

<image

src="../../images/04.jpg"></image>

</swiper-item>

<swiper-item>

<image

src="../../images/05.jpg"></image>

</swiper-item>

</swiper>

<!--爆破推荐

-->

<image

src="../../images/pb.webp"

class="bp"></image>

<!--

商品列表

-->

<view

class="good-list">

<view

class="good">

<image

class="good-img"

src="/images/good01.jpg"></image>

<view

class="good-info">

<text

class="info-title">小米路由器</text>

<text

class="info-attr">6000兆无线速度</text>

<view

class="info-price"><text>599</text></view>

</view>

</view>

<view

class="good">

<image

class="good-img"

src="/images/good02.jpg"></image>

<view

class="good-info">

<text

class="info-title">米家增压蒸汽挂烫机</text>

<text

class="info-attr">轻松深层除皱，熨出专业效果</text>

<view

class="info-price"><text>529</text></view>

</view>

</view>

<view

class="good">

<image

class="good-img"

src="/images/good03.jpg"></image>

<view

class="good-info">

<text

class="info-title">小爱触屏音箱</text>

<text

class="info-attr">好听，更好看</text>

<view

class="info-price"><text>249</text></view>

</view>

</view>

<view

class="good">

<image

class="good-img"

src="/images/good04.jpg"></image>

<view

class="good-info">

<text

class="info-title">米家智能蒸烤箱</text>

<text

class="info-attr">30L大容积，

蒸烤烘炸炖一机多用</text>

<view

class="info-price"><text>1499</text></view>

</view>

</view>

<view

class="good">

<image

class="good-img"

src="/images/good05.jpg"></image>

<view

class="good-info">

<text

class="info-title">触屏音箱Pro</text>

<text

class="info-attr">大屏不插电，小爱随身伴</text>

<view

class="info-price"><text>599</text></view>

</view>

</view>

<view

class="good">

<image

class="good-img"

src="/images/good06.jpg"></image>

<view

class="good-info">

<text

class="info-title">米家互联网洗碗机

8套嵌入式</text>

<text

class="info-attr">洗烘一体，除菌率高达99.99%</text>

<view

class="info-price"><text>2299</text></view>

</view>

</view>

</view></view>页面样式代码如下：/*

设置swiper的样式

*/swiper.banner{

width:

100%;

height:

187.5px;}

.banner

image{

width:

750rpx;

height:

375rpx;}.bp{

padding-top:

20rpx;

width:

100%;

height:

116rpx;

background-color:

#fffdff;}/*

商品列表样式

*/.good-list{

background-color:

#fffdff;

display:

flex;

flex-direction:

row;

flex-wrap:

wrap;

justify-content:space-between;

margin-top:

16rpx;

padding:

0

12rpx

;}.good{

width:

228rpx;

display:

flex;

flex-direction:column;

align-items:

center;

padding-bottom:

60rpx;}.good-img{

width:

228rpx;

height:

228rpx;

border-radius:

10rpx

10rpx

0rpx

0rpx;}.good-info{

display:flex;

flex-direction:

column;

align-items:

center;

width:

288rpx;

margin-top:

24rpx;}.good-info

text{

margin-bottom:

14rpx;}.info-title{

width:

210rpx;

height:

30rpx;

line-height:

30rpx;

font-weight:

bold;

color:

#3c3c3c;

white-space:nowrap;

overflow:

hidden;

text-overflow:

ellipsis;}.info-price

text::before{

content:

'¥';}.info-attr{

width:

210rpx;

height:

30rpx;

line-height:

30rpx;

color:

#3c3c3c;

white-space:nowrap;

font-size:

28rpx;

overflow:

hidden;

text-overflow:

ellipsis;}.info-price{

color:#ff4a48;

font-weight:

700;}添加模拟数据内容，代码如下：

/**

*

页面的初始数据

*/

data:

{

//

轮播信息

bannerData:{

listImage:["../../images/01.jpg","../../images/02.jpg","../../images/03.jpg","../../images/04.jpg","../../images/05.jpg"],

indicatordots:true,

indicatorolor:"rgba(255,255,255,0.3)",

indicatoractivecolor:"#edfdff",

autoplay:true,

interval:"5000",

circular:true,

},

//

商品列表

goodList:

[]

},/**

*

生命周期函数--监听页面加载

*/

onLoad:

function

(options)

{

var

goodList

=

[{

gid

:

"1",

image:

"/images/good01.jpg",

title:

"小米路由器",

attr:

"6000兆无线速度",

price:

"599"

},

{

gid

:

"2",

image:

"/images/good02.jpg",

title:

"米家增压蒸汽挂烫机",

attr:

"轻松深层除皱，熨出专业效果",

price:

"529"

},

{

gid

:

"3",

image:

"/images/good03.jpg",

title:

"小爱触屏音箱",

attr:

"好听，更好看",

price:

"249"

},

{

gid

:

"4",

image:

"/images/good04.jpg",

title:

"米家智能蒸烤箱",

attr:

"30L大容积，

蒸烤烘炸炖一机多用",

price:

"1499"

},

{

gid

:

"5",

image:

"/images/good05.jpg",

title:

"触屏音箱Pro",

attr:

"大屏不插电，小爱随身伴",

price:

"599"

},

{

gid

:

"6",

image:

"/images/good06.jpg",

title:

"米家互联网洗碗机

8套嵌入式",

attr:

"洗烘一体，除菌率高达99.99%",

price:

"2299"

},

];

this.setData({

goodList

})

},在页面进行数据绑定，参考代码如下：<view

class="container">

<!--

轮播图

-->

<swiper

class="banner"

indicator-dots="{{bannerData.indicatordots}}"

indicator-color="{{bannerData.indicatorolor}}"

indicator-active-color="{{bannerData.indicatoractivecolor}}"

autoplay="{{bannerData.autoplay}}"

interval="{{bannerDerval}}"

circular="{{bannerData.circular}}">

<swiper-item

wx:for="{{bannerData.listImage}}"

wx:for-index="idx"

wx:key="idx">

<image

src="{{item}}"></image>

</swiper-item>

</swiper>

<!--爆破推荐

-->

<image

src="../../images/pb.webp"

class="bp"></image>

<!--

商品列表

-->

<view

class="good-list">

<block

wx:for="{{goodList}}"

wx:for-item="good"

wx:key="gid">

<view

class="good"

bind:tap="goToGoodDetail">

<image

class="good-img"

src="{{good.image}}"></image>

<view

class="good-info">

<text

class="info-title">{{good.title}}</text>

<text

class="info-attr">{{good.attr}}</text>

<view

class="info-price"><text>{{good.price}}</text></view>

</view>

</view>

</block>

</view></view>完成【商品详情】页面静态效果，参考代码如下：页面元素代码如下：<view

class="container">

<!--

商品明细轮播图

-->

<swiper

class="goodbanner"

indicator-dots="{{true}}"

indicator-color="rgba(255,255,255,0.3)"

indicator-active-color="#edfdff"

indicator

autoplay="true"

interval="5000"

circular="{{true}}">

<swiper-item>

<image

src="/images/good-detail01.jpg"></image>

</swiper-item>

<swiper-item>

<image

src="/images/good-detail02.jpg"></image>

</swiper-item>

<swiper-item>

<image

src="/images/good-detail03.jpg"></image>

</swiper-item>

<swiper-item>

<image

src="/images/good-detail04.jpg"></image>

</swiper-item>

</swiper>

<!--

商品信息

-->

<view

class="good">

<!--

价格

-->

<view

class="good-price">

<text

class="price

cur-price">¥579</text>

<text

class="price

origin-price">¥579</text>

</view>

<!--

商品名称

-->

<text

class="good-name">小米路由器AX6000</text>

<!--

商品明细介绍

-->

<view

class="good-info">

<view

class="good-info-item">

<text

class="good-id">1</text>

<text>增强版，6000兆级无线速率</text>

</view>

<view

class="good-info-item">

<text

class="good-id">2</text>

<text>超强覆盖，6路独立高性能信号放大器</text>

</view>

<view

class="good-info-item">

<text

class="good-id">3</text>

<text>2500M全速网口，满足未来5年网速需求</text>

</view>

</view>

</view></view>页面样式参考代码如下：.container{

box-sizing:

border-box;}.goodbanner{

width:

100%;

height:

824rpx;}.goodbanner

image{

width:

100%;

height:

824rpx;}/*

商品样式

*/.good{

display:

flex;

flex-direction:

column;}/*

商品价格样式

*/.good-price{

margin-left:

30rpx;

margin-top:

20rpx;}.price{

line-height:

2rem;}.cur-pri