微信小程序开发项目实战（微课版） 课后实训试题及答案汇 黄龙泉 项目实训01-10

PAGE3项目1虚拟商业环境综合实训平台简介PAGE4微信小程序开发项目实战（微课版）项目实训一、选择题1．下面关于WXML的哪一个说法是错误的？（D）A．WXML是指WeiXinMarkupLanguage，用于构建页面的结构B．具有数据绑定、列表渲染的能力C．可以进行if/else等简单的条件渲染D．目前还不支持进行事件绑定2．小程序是通过哪一种方式实现动态改变样式的？（B）A．提供修改样式的APIB．使用WXML语言提供的数据绑定功能C．直接操作DOMD．没有任何方式3．微信小程序的页面逻辑部分主要使用哪一种语言开发？（B）A．Java B．Javascript C．C++ D．C#二、综合实训微信小程序提取公用函数到util.js及使用方法示例。步骤1：在util.js定义获得图片路径函数。代码如下：//定义图片路径varURl='/images/';//定义获取图片函数vargetImageurl=imageurl=>{returnURl+imageurl;}//输出函数module.exports={URl:URl,getImageurl:getImageurl}图1-38util.js文件定义函数步骤2：在index.js调用的util.js文件获取图片路径的函数。//模块化引用utils里面的js地址varutils=require('../../utils/util.js')//console.log(utils)可查看获得的函数console.log(utils.getImageurl('banner-01.png'))图1-39引用util.js里的函数PAGE49项目2小程序编程基础项目实训一、选择题1．下面程序，index.wxml页面显示的信息是（C）。index.wxml页面代码如下：<viewwx:if="{{length>5}}">1</view><viewwx:elif="{{length>2}}">2</view><viewwx:else>3</view>index.js页面代码如下：Page{()data:{length:6})}A．3 B．2 C．1 D．不显示2．下面结果，index.wxml页面显示的信息是（C）。index.wxml页面代码如下：<blockwx:if="{{true}}"><view>view1</view><view>view2</view></block>A．view1 B．view2 C．view1view2 D．无3．App的生命周期函数不包括（C）。A．onHide B．onError C．onLoad D．onLaunch4．Page的生命周期函数不包括（D）。A．onReady B．onUnload C．onShow D．onLaunch5．下面程序，正确答案的是（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=size<200?200:sizethis.setData({num:randomdata,color:color,size:size})},})2．实现以下效果，并在控制台上打印表单提交的信息，效果如图2-23、2-23所示。图2-23表单效果图2-24控制台结果PAGE127项目5新闻页面模块开发项目实训一、选择题1．（单选题）微信小程序特有的尺寸单位是？（A）A．rpx B．cm C．px D．pt2．（单选题）以下哪个不属于小程序的容器组件？(A)A．<cover-view> B．<text> C．<scroll-view> D．<view>3．<icon>是图标组件，以下哪句代码可以实现一个红色、40像素大小的搜索图标？(B)A．<icontype="discover"size="40rpx"color="red"></icon>B．<icontype="search"size="40"color="red"></icon>C．<icontype="search"size="40rpx"color="red"></icon>D．<icontype="discover"size="40"color="red"></icon>4．以下哪个不属于媒体组件？(C)A．<audio> B．<canvas> C．<video> D．<image>5．以下哪个不属于表单组件?(B)A．<input> B．<icon> C．<form> D．<button>6．以下哪个组件可以用于播放视频？(B)A．View B．video C．audio D．image二、综合实训（1）在utils/util文件中定义一个随机函数，在index.js中引入该文件，并使用随机函数获得图片。（2）定义一个函数分页函数，每10条数据作为一页，当上拉触底时调用分页函数实现分页数据的显示。项目实训一、选择题1．flex-basis的作用是？（D）A．分配多余空间之前，项目占据的主轴空间B．分配剩余空间给该元素C．该元素变为弹性宽度D．以上都对2．设置弹性子元素各行之间对齐的属性是？（C）A．flex-wrap B．space-between C．align-content D．align-items3．设置弹性子元素在主轴对齐方式的属性是？（B）A．flex-wrap B．space-between C．align-content D．align-items二、综合实训1．使用swiper组件实现顶部导航，使得内容页具有滑动功能，效果如图4-19所示。图4-19运行效果项目实训一、选择题1．首次调用wx.navigateTo从PageA页面跳转到PageB页面，下面哪一个生命周期函数不会被调用？（A）A．onUnload() B．onHide() C．onLoad() D．onShow()2．（多选）下列哪些属性参数传值的方法（ABCD）。A．给布局元素添加data-*属性来传递我们需要的值B．通过e.currentTarget.id获取设置的id的值C．通过设置全局对象的方式来传递数值D．在navigator中添加参数传值3．关于小程序的路由说法错误的是（A）。A．B．wx.redirectTo()：关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到tabbar页面C．wx.switchTab()：跳转到abBar页面，并关闭其他所有非tabBar页面D．wx.reLaunch()：关闭所有页面，打开到应用内的某个页面4．this.data赋值语句和this.setData({})赋值方式的区别是（A）。A．tB．C．D．this.data赋值语句只改变变量的值，this.setData({})既不改变变量的值又不会更新视图二、综合实训完成下面的新闻列表页和内容表，效果如图所示。 图5-21新闻列表页效果 图5-22新闻详情页效果项目实训一、选择题1．（多选）小程序是通过哪一种方式实现动态改变样式的？（AB）A．提供修改样式的API B．C．直接操作DOM D．没有任何方式2．下列不属于scroll-view组件属性的是（D）。A．scroll-x B．bindscroll C．scroll-top D．current3．（多选）小程序页面间有哪些传递数据的方法？（ABCD）A．使用全局变量实现数据传递B．页面跳转或重定向时，使用url带参数传递数据C．使用缓存传递参数D．使用数据库传递数据4．如何封装微信小程序的数据请求？以下说法错误的是（D）。A．将所有的接口放在统一的js文件中并导出B．在app.js中创建封装请求数据的方法C．在子页面中调用封装的方法请求数据D．webview用来处理业务逻辑、数据及接口调用。二、综合实训题请读者参考项目6实现商品分类页的过程。 图6-14产品分类页效果 图6-15分类切换效PAGE169项目7购物车模块开发项目实训一、选择题1．下列代码运行结果是（B）。letnum=[1,2,3,4,5];leteve=num.every(function(item,index,arr){return(item>2);});console.log(eve);A．true B．false C．3 D．null2．下列代码运行结果是（A）。letnum=[1,2,3,4,5];letsum=0num.forEach(function(item,index,arr){sum+=arr[index]})console.log(sum)A．15 B．12 C．6 D．103．下列代码运行结果是（A）letarr=[1,2,3]arr.forEach(function(item,index,array){console.log(array)})A．[1,2,3] B．[0,1,2] C．[3] D．[1]二、综合实训题 图7-10购物车页面效果 图7-11订单页面效果PAGE211项目实训一、选择题1．下列关于用户信息属性描述错误的是（D）。A．avatarUrl表示用户头像的URL地址B．nickName：用户昵称C．province：用户所在省份D．gender：用户的性别，0表示男，1表示女2．下列关于wx.getUserInfo()接口返回值说法错误的是（C）。A．errMsg表示错误信息B．rawData：用于计算签名C．iv：加密算法的初始向量D．userInfo：用户信息对象，包含openid等信息3．小程序模块开发中，通过（D）语法对外暴露接口。A．export B．import C．require D．moudle.exports4．小程序中模板的使用，通过<template>的（B）属性导入模板所需要的数据。A．value B．data C．data-item D．item5．小程序模块化开发中，（D）组件来定义模板。A．<view> B．<model> C．<component> D．<template>6．小程序中模板的使用，通过<template>的（D）属性来定义模板。A．is B．isname C．type D．name7．echarts是什么技术？（D）A．商业聊天软件 B．商业图片编辑软件C．商业办公软件 D．商业产品图表库二、综合实践题1．使用模板功能，完成以下效果，如图所示。图8-17模板功能2．使用echart功能，完成以下效果，如图8-18、8-19所示。项目实训一、选择题1．要使用node.js的http模块创建一个httpserver，需要调用哪些方法。（B）A．http.createClient B．http.createServerC．http.Server.listen D．http.get2．路由参数获取几种方式？（C）A．1 B．2 C．3 D．43.路由指什么（B）A接口B根据url的变更重新渲染页面布局和内容的过程。C返回的数据D以上都不对4．package.json文件中有一个什么字段，可以用于指定脚本命令。（A）A．scripts B．devDependenciesC．script D．name5．npminit__加那个参数可以生成package.json文件。（A）A．参数-y B．参数-v C．参数-i D．参数-a二、综合实践题1．使用小程序访问以下GET数据接口。app.get('/get',function(req,res){res.setHeader('Content-Type','text/plain;charset=utf8');res.end(JSON.stringify({code:0,data:{brandName:'品牌名称',couponAvailableTime:'2020-45-34',},msg:'success',success:true}))})2．使用小程序访问以下POST数据接口。app.post('/post',function(req,res){res.setHeader('Content-Type','text/plain;charset=utf8');res.end(JSON.stringify({code:0,data:{list:[{couponTemplateId:1,couponName:'小布丁代金券',}],pageIndex:1,pageSize:10,total:3},msg:'success',success:true}))})项目实训一、填空题1．在Node.js代码中要加载mysql模块，怎么做?（B）A．http模式是全局的，无需加载，直接使用即可B．使用require('mysql')即可C．使用module方法D．使用exports方法2．npmset用来设置什么?（C）A．默认值 B．变量 C．环境变量 D．默认环境3．mysql是一种什么类型的数据库?（A）A．关系型数据库 B．非关系型数据库C．资源管理器 D．一种python的数据类型4．module.exports和exports的区别是?（C）A．一个是对象下的值一个是方法B．没有区别C．module.export