《微信小程序程序设计与开发》课程第一次大作业.docxVIP

微信小程序课程第一次大作业

选择题（10分）

1.下面对于微信小程序目录结构说法中，正确是(AB)

A.app.wxss表示公共样式文件

B.index.wxss表示页面样式文件

C.app.js表示应用逻辑配置文件

D.index.js表示应用逻辑文件

2.在微信小程序的页面组件，视图容器组件(C)表示

A.block

B.text

C.view

D.icon

3.下列选项中，关于微信小程序事件说法正确是(AB)。

A.微信小程序中事件分为冒泡事件和非冒泡事件。

B.事件对象可以携带额外信息，如id,dataset,touches。

C.bind为组件绑定非冒泡事件，catch则绑定冒泡事件。

D.同一组件只能绑定一次事件处理函数。

4.在代码viewbindtp=”changeItem”data-item=”0”获取item值view,通过(BC)可以获取到item。

A.changeItem:funtion(e){console.log(e.detail.dataset.item)}

B.changeItem:funtion(e){console.log(e.target.dataset.item)}

C.changeItem:funtion(e){console.log(e.currentTarget.dataset.item)}

changeItem:funtion(e){console.log(e.detai.item)}

5.下列选项中，关于小程序图片相关API的描述，说法错误的是(B)。

A.wx.chooselmage()表示从本地相册选择图片或者使用相机拍照

B.在选择图片时，count参数设置上传图片的张数，默认为1

C.wx.previewlmage()表示在新页面中全屏预览图片

D.wx.getlmagelnfo()可获取图片信息

简答题（20分）

微信小程序的主要文件以及它们的作用？

参考答案：

WXML——模板文件

JSON——配置/设置文件，如标题,tabbar,页面注册

WXSS——样式文件，样式可直接用import导入

JS——脚本逻辑文件，逻辑处理，网络请求

app.json——配置文件入口，整个小程序的全局配置，网络超时时间、底部tab、页面路径，window字段是小程序所有页面的顶部背景颜色、文字颜色

app.js——可以没有内容，可以在里边监听生命周期函数、声明全局变量

app.wxss——全局配置样式文件

请简单描述微信小程序页面生命周期函数有哪些？

参考答案：

onLoad——页面加载，调一次

onShow——页面显示，每次打开页面都调用

onReady——初次渲染完成，调一次

onHide——页面隐藏，当navigateTo或底部tab切换时调用

onUnload——页面卸载，当redirectTo或navigateBack时调用

在微信小程序中bindtap和catchatap的区别是什么？

参考答案：

bindtap不会阻止冒泡事件，catchtap阻止冒泡

请简单描述自定义组件的使用步骤？

参考答案：

先创建一个components文件夹，用来存放所有自定义组件的，然后在components文件夹中创建组件，目录结构依然是js,wxml,json,wxss。

在使用的页面中配置引用组件，例如在index页面引用组件，需要在index.json中配置：

{

usingComponents:{

component-tag-name:path/to/the/custom/component

}}

在页面上使用自定义组件，例如：

view

!--以下是对一个自定义组件的引用--

component-tag-nameinner-text=Sometext/component-tag-name

/view

操作题（70分）

完成旅游博客小程序开发，旅游小程序页面包括，欢迎页面，如下图：

小程序欢迎页面

点击欢迎页面“欢迎进入旅游博客网”，页面跳转到旅游博客主页，如下图：

小程序旅游博客页面效果

要求完成功能：

欢迎页面功能要求：(15分)

完成欢迎页面的页面效果。(5分)

点击“欢迎进入旅游博客网”跳转到旅游博客页面。(10分)

数据管理

小程序启动时，加载data.js中的数据到缓存中。(data.js文件已经提供)(10分)

旅游博客页面功能(25分)

完成旅游博客页面显示效果。(15分)

读取本地缓存数据，并动态显示到旅游博客页面。(10分)

旅游博客详情页面(20分)

完成旅游博客详情页面显示效果。(10分)

点击“旅游博客”列表中，显示对应详情页面效果(10分)。效果参考下图：