2025年中职移动应用技术与服务（小程序开发）试题及答案.doc

2025年中职移动应用技术与服务（小程序开发）试题及答案

（考试时间：90分钟 满分100分）
班级______ 姓名______

第I卷（选择题 共40分）
答题要求：本大题共20小题，每小题2分，共40分。在每小题给出的四个选项中，只有一项是符合题目要求的，请将正确答案的序号填在括号内。

1. 以下哪种编程语言常用于小程序开发？（ ）
A. Java B. Python C. JavaScript D. C++
2. 小程序的框架结构中，用于实现页面样式和布局的是（ ）
A. 逻辑层 B. 视图层 C. 数据层 D. 控制层
3. 在小程序中，用于绑定事件的属性是（ ）
A. bindtap B. src C. text D. hidden
4. 以下哪个不是小程序的生命周期函数？（ ）
A. onLoad B. onShow C. onReady D. onRun
5. 小程序中，用于获取用户输入的组件是（ ）
A. button B. input C. checkbox D. radio
6. 要在小程序中引入外部样式文件，应使用的标签是（ ）
A. @import B. include C. <link> D. <script>
7. 在小程序里，实现页面跳转的方法是（ ）
A. wx.navigateTo B. wx.redirectTo C. wx.switchTab D. 以上都是
8. 小程序的数据绑定中，使用（ ）符号来绑定数据。
A. = B. : C. {{ D. []
9. 用于在小程序中显示图片的标签是（ ）
A. <image> B. <img> C. <picture> D. <icon>
10. 以下关于小程序性能优化的说法错误的是（ ）
A. 减少不必要的计算 B. 合理使用缓存 C. 尽量多使用动画效果 D.优化图片资源
11. 小程序中，设置组件样式的单位一般是（ ）
A. px B. em C. rem D. rpx
12. 要在小程序中实现数据的存储，可使用的API是（ ）
A. wx.setStorageSync B. wx.getStorageSync C. 以上都是 D. 以上都不是
13. 在小程序中，用于触发下拉刷新的事件是（ ）
A. pullDownRefresh B. bindPullDownRefresh C. onPullDownRefresh D. wx.startPullDownRefresh
14. 以下哪种布局方式常用于小程序页面布局？（ ）
A. 浮动布局 B. 弹性布局 C. 表格布局 D. 框架布局
15. 小程序中，获取当前页面路径的API是（ ）
A. wx.getCurrentPage B. wx.getPageInfo C. wx.getCurrentPages D. wx.pageInfo
16. 用于在小程序中创建自定义组件的文件类型是（ ）
A. wxml B. wxss C. js D. json
17. 在小程序里，设置文本颜色的CSS属性是（ ）
A. color B. text-color C. font-color D. bg-color
18. 小程序中，实现上拉加载更多数据的方法是（ ）
A. onReachBottom B. bindReachBottom C. wx.startReachBottom D. 以上都是
19. 以下关于小程序分包加载的说法正确的是（ ）
A. 可以减少首屏加载时间 B. 分包越多越好 C. 不需要配置 D. 会增加下载体积
20. 小程序中，用于设置组件透明度的属性是（ ）
A. opacity B. alpha C. visibility D. display

第II卷（非选择题 共60分）
21. （10分）简述小程序的运行机制。

22. （10分）请说明在小程序中如何进行数据的传递和接收。

23. （15分）写出一段小程序代码，实现一个简单的登录页面，包含用户名输入框、密码输入框和登录按钮，点击登录按钮后弹出提示框显示“登录成功”。

24. （15分）材料：某小程序项目需要实现一个商品展示功能，要求展示商品的图片、名称、价格等信息，并能实现点击商品图片跳转到商品详情页。
问题如下：
（1）请设计该商品展示页面的wxml结构。
（2）如何在js文件中实现点击商品图片跳转的功能？
（3）若要对商品价格进行格式化显示，应如何处理？

25. （20分）材料：现有一个小程序，其首页包含一个列表，列表项展示用户的头像、昵称和发布的文章标题。当点击列表项时，跳转到文章详情页。
问题如下：
（1）请描述首页列表项的wxml和wxss样式代码结构。
（2）写出点击列表项跳转到文章详情页的js代码逻辑。
（3）若要在文章详情页显示文章的发布时间，应如何获取并展示？

答案：1. C 2. B 3. A 4. D 5. B 6. A 7. D 8. C 9. A 10. C 11. D 12. C 13. C 14. B 15. C 16. D 17. A 18. D 19. A 20. A 21. 小程序的运行机制包括逻辑层和视图层。逻辑层运行在JavaScriptCore中，视图层由WebView渲染。两者通过系统层的JSBridge进行通信。逻辑层处理数据和业务逻辑，视图层负责页面的渲染。小程序启动时，逻辑层先加载js脚本，然后通过接口与视图层交互，视图层根据逻辑层的数据进行渲染。 22. 在小程序中，数据传递可通过页面路由时携带参数，如使用wx.navigateTo({url: '/pages/detail/detail?param1=value1&param2=value2'})。接收参数在目标页面的onLoad生命周期函数中获取，如onLoad: function(options) {var param1 = options.param1; var param2 = options.param2; }。也可通过全局变量、事件传递等方式进行数据传递和接收。 23. wxml代码：<view class="container"><view class="input-group"><label>用户名：</label><input type="text" placeholder="请输入用户名"></input></view><view class="input-group"><label>密码：</label><input type="password" placeholder="请输入密码"></input></view><button bindtap="login">登录</button></view>wxss代码：.container {padding: 20px;}.input-group {margin-bottom: 15px;}.input-group label {display: block; margin-bottom: 5px;}.input-group input {width: 100%; padding: 8px; box-sizing: border-box;}button {width: 100%; padding: 10px; background-color: 1aad19; color: white; border: none; border-radius: 5px;}js代码：Page({login: function() {wx.showToast({title: '登录成功', icon: 'success'})}}) 24. （1）<view class="goods-list"><block wx:for="{{goodsList}}"><view class="goods-item"><image src="{{item.imgUrl}}" bindtap="goToDetail"></image><text>{{item.name}}</text><text>价格：{{item.price}}</text></view></block></view>（2）在js文件中：goToDetail: function(e) {var itemId = e.currentTarget.dataset.itemid; wx.navigateTo({url: '/pages/goods-detail/goods-detail?id=' + itemId});}（3）在wxml中使用{{item.price.toFixed(2)}}进行格式化显示，在js中对获取到的价格数据进行处理，如var price = parseFloat(item.price); price = price.toFixed(２); item.price = price; 2５. （1）wxml：<view class="list-container"><block wx:for="{{userList}}"><view class="list-item" bindtap="goToArticleDetail"><image src="{{item.avatar}}"></image><text>{{item.nickname}}</text><text>{{item.articleTitle}}</text></view></block></view>wxss：.list-container {padding: 10px;}.list-item {display: flex; align-items: center; padding: 10px; border-bottom: 1px solid ccc;}.list-item image {width: 50px; height: 50px; margin-right: 10px;}.list-item text {flex: 1;}（2）js：goToArticleDetail: function(e) {var articleId = e.currentTarget.dataset.articleid; wx.navigateTo({url: '/pages/article-detail/article-detail?id=' + articleId});}（3）在文章详情页的onLoad生命周期函数中，通过页面路由携带的参数获取文章id，然后根据id从数据存储中获取发布时间并显示。如onLoad: function(options) {var articleId = options.id; var article = getArticleById(articleId); var publishTime = article.publishTime; this.setData({publishTime: publishTime});}