1 调查问卷

题干

【本题10分】在小程序项目中利用index.js中给出的数据，补充完整index.wxml中的代码，渲染出如下图所示的效果。

注意：标清填空编号，按照编号顺序将自己填写的代码写到答题框中。
index.js中Page()函数代码如下：

Page({data:{name:'王五',gender:[
{name:'男',value:'0',checked:false},
{name:'女',value:'1',checked:true}
],
sports:[
{zm:'跑步',value:'pb',checked:false},
{zm:'打篮球',value:'dlq',checked:true},
{zm:'踢足球',value:'tzq',checked:false},
{zm:'跳绳',value:'ts',checked:true}
]
}
})

index.wxss页面样式代码如下：

view{margin:30rpx;}
input{border: 1px solid #ccc;margin-top: 10px;height: 80rpx;}
button{background-color: blue;}

index.wxml页面结构代码如下：

<view class="container">
<form>
<view class="nn">
<text>姓名:</text>
<input type="text" name="name" ____(1)_______ />
</view>
<view class="ss">
<text>性别:</text>
<______(2)_______name="gender">
<label _____(3)______    wx:key="value">
<radio value="{{item.value}}" _____(4)_______ />______(5)______
</label>
</_____(6)_______>
</view>
<view class="zz">
<text>喜欢的运动:</text>
<checkbox-group name="sports">
<label _____(7)_______ _____(8)______="*this">
<checkbox value="{{item.value}}" ______(9)_________ />_____(10)______
</label>
</checkbox-group>
</view>
</form>
</view>

答案

（1）value = "{{name}}"
（2）radio-group
（3）wx:for="{{gender}}"
（4）checked = "{{item.checked}}"
（5）{{item.name}}
（6）redio-group
（7）wx:for="{{sports}}
（8）wx:key
（9）checked="{{item.checked}}"
（10）{{item.zm}}

2、数字比较 （P36-40 5种方法实现比较功能）

题干

【本题12分】在小程序项目的的index页面中实现两个数的比较如下图1所示，在不改变index.wxml页面结构的前提下，完成对应 的index.js实现如下功能：
在页面本文框中输入两个数，单击“比较”按钮，在下方显示如图2所示信息(比较结果可以是：第1个数大、第2个数大、两个 数相等)。

注意：将index.js文件的Page()函数中自己编写的代码粘贴到答题框中。

index.wxml页面结构代码如下：

<view>
<text>请输入第1个数值：</text>
<input id="num1"   type="number" bindinput="numValue" />
</view>
<view>
<text>请输入第2个数值：</text>
<input id="num2"  type="number"  bindinput="numValue" />
</view>
<button bindtap="compare">比较</button>
<view >
<text>比较结果：{{result}}</text>
</view>

index.wxss页面样式代码如下：

view,button{margin:30rpx;}
view.title{text-align: center;color:red;font-size: 50rpx;}
input{border: 1px solid #ccc;margin-top: 10px;height: 80rpx;}
button{background-color: blue;}

答案

//index.js
const app = getApp()
// 获取应用实例
Page({/*** 页面初始数据*/data:{num1:0,num2:0,result:""},/*** 事件处理函数*/numValue:function(e){this[e.currentTarget.id] = Number(e.detail.value)},compare:function(e){var str = '两数相等'if(this.num1 > this.num2){str = '第一个数大'}else if(this.num1 < this.num2){str = '第二个数大'}this.setData({result:str})}
})

3、音乐播放器中的标签页的切换

题干

【本题8分】小程序项目的的index页面运行后效果如下图所示，补充完整index.wxml和index.js中的代码，完成实现如下功能：
(1)单击页面上面标签上的文字，文字颜色变为黄色，线条变为红的，同时下面的显示相应的颜色块；
(2)在页面颜色块上滑动时，标签上相应文字变为黄色，线条变为红的。

注意：标清填空编号，按照编号顺序将自己填写的代码写到答题框中。

index.wxml页面结构代码如下：

<view class="tab">
<view class="tab-item {{item==0?'active':''}}" bindtap="changeItem" id="0">粉色</view>
<view class="tab-item _____(1)________ bindtap="changeItem" ____(2)______>绿色</view>
<view class="tab-item ______(3)_______ bindtap="changeItem" _____(4)________>蓝色</view>
</view>
<swiper current="___(5)____"  _____(6)_______="changeTab" circular="true">
<swiper-item>
<view style="background:pink;"></view>
</swiper-item>
<swiper-item>
<view style="background:green;"></view>
</swiper-item>
<swiper-item>
<view style="background:blue;"></view>
</swiper-item>
</swiper>

index.wxss页面样式代码如下：

.tab {display: flex;background-color:#000;color:#fff;}
.tab-item {flex: 1;font-size: 10pt;text-align: center;line-height: 72rpx;border-bottom: 6rpx solid #eee;}
.active{color: yellow;border-bottom-color:red;}
swiper{height:400rpx;}
swiper view{height:100%;}

index.js代码如下：

Page({data:{item:0},changeItem(e){this.setData({item:_____(7)________})},changeTab(e){this.setData({item:____(8)______})}
})

答案

（1）{{item==1?'active':''}}
（2）id="1"
（3）{{item==2?'active':''}}
（4）id="2"
（5）{{item}}
（6）bindchange
（7）e.currentTarget.id
（8）e.detail.current

4、婚礼邀请函中的宾客信息页面

题干

【本题10分】小程序项目的的index页面运行后效果如下图1所示，补充完整index.wxml和index.js中的代码，完成实现如下功
能：
(1)页面中参加婚礼人数利用picker组件可以进行人数的选择如图2；
(2)单击“提交”按钮，当姓名不为空且手机号长度为13位是显示提交成功，否则显示信息错误提示如图3。

注意：标清填空编号，按照编号顺序将自己填写的代码写到答题框中。
index.wxml页面结构代码如下：

<form _______(1)_____="formSubmit">
<view class="content">
<view>
<input name="xm" type="text"  placeholder="输入您的姓名:" placeholder-class="phcolor" />
</view>
<view>
<input name="phone" type="text"  placeholder="输入您的手机号:" placeholder-class="phcolor" />
</view>
<view>
<picker name="num"  _____(2)_______="pickerChange"   range="_____(3)_______">
参加婚礼人数：_______(4)__________
</picker>
</view>
<button form-type="____(5)_____" >提交</button>
</view>
</form>

index.wxss页面样式代码如下：

page{background-color: #eee;}
.content{width: 80vw;margin:10vw;}
.content>view{font-size:2.8vh;border:1px solid #ff4c91;border-radius:10rpx;padding:1.5vh 40rpx;margin-bottom:1.5vh;color: #ff4c91;}
.content button{font-size:3vh;line-height: 5.5vh;background-color: #ff4c91;color:#fff;}
.content picker{padding: 0.7vh 0;}
.content .phcolor{color: #ff4c91;}

index.js代码如下：

Page({data: {picker: {arr: ['1', '2', '3', '4', '5', '6'],index: 0}},
pickerChange: function(e) {this.setData({'_____(6)_______': e.detail.value})
},
formSubmit: function(e) {var name = ______(7)_________var phone = ______(8)___________if(name&&phone.length==13){______(9)________({title: '提交成功',icon: 'success',duration: 1500})}else{______(10)_______({title: '信息错误',icon: 'error',duration: 1500})}
}
})

答案

（1）bindsubmit
（2）bindchange
（3）{{picker.arr}}
（4）{{picker.arr[picker.index]}}
（5）submit
（6）picker.index
（7）e.detail.value.xm
（8）e.detail.value.phone
（9）wx.showToast
（10）wx.showToast

5、婚礼地点页面（map组件 书上P100）

题干

完成下列页面

navi.png（直接剪切存下用）

代码

在page/map/map.wxml 中编写页面结构

<map latitude="{{latitude}}"longitude="{{longitude}}"markers="{{markers}}"bindmarkertap="markertap" />

在map.wxss中编写页面样式

map{width:100vw;height:100vh;
}

map.js中编写data数据和markertap()函数

//index.js
const app = getApp()
// 获取应用实例
Page({data: {latitude:40.06021, longitude: 116.3433,markers: [{iconPath:'/images/navi.png', id:0,latitude:40.06021, longitude: 116.3433,width:50,height:50}]},markertap: function() {wx.openLocation({latitude:this.data.latitude,longitude:this.data.longitude,name:'xx大酒店',address:'北京市 海淀区'})}
})

6、轮播图

在page/index/info.wxml 文件中编写

<swiper class="lunbotu" indicator-color="#fff"
indicator-active-color="yellow" indicator-dots circular autoplay><swiper-item><image src="../../images/haizei1.gif"></image></swiper-item><swiper-item><image src="../../images/huoying1.png"></image></swiper-item><swiper-item><image src="../../images/guimie1.jpg"></image></swiper-item>
</swiper>

在 index.wxss 中编写样式

.lunbotu{height:302rpx;margin-bottom:20px;
}
.lunbotu image{width:100%;height:100%;
}

7、婚礼邀请函的底部标签栏

app.json

"tabBar": {"color": "#FF000000","selectedColor": "#ff4c91","borderStyle": "white","backgroundColor": "#ffffff","list": [{"pagePath": "pages/index/index","iconPath": "images/invite.png","selectedIconPath": "images/invite.png","text": "邀请函"},{"pagePath": "pages/picture/picture","iconPath": "images/marry.png","selectedIconPath": "images/marry.png","text": "照片"},{"pagePath": "pagesideoideo","iconPath": "imagesideo.png","selectedIconPath": "imagesideo.png","text": "美好时光"},{"pagePath": "pages/map/map","iconPath": "images/map.png","selectedIconPath": "images/map.png","text": "婚礼地点"},{"pagePath": "pages/guest/guest","iconPath": "images/guest.png","selectedIconPath": "images/guest.png","text": "宾客信息"}]},

微信小程序 之 程序题相关推荐

1. 微信小游戏计算机算题,微信小程序学习：简易计算器

   昨天刚刚接触的微信小程序,写了个计算器demo,因为自身有一点前端的基础,所以看微信小程序的api时没有这么云里雾里,几乎跟前端没差太多,所以上手挺快,先上效果图 仿制iphone的计算器实现了+-* ...

2. 答题微信小程序实现（7）：python3将题库处理成json格式的。

   通常来说,我们写答题程序的时候,拿到手的题库不会是json格式的,而是word或txt.pdf就像考试卷子那样的. 这里写一下用python3将普通题库处理成json格式,选择python3的原因是, ...

3. 掌中题库刷题神奇微信小程序介绍

   微信小程序无需安装.便于传播,安卓与ios平台都可以使用. "掌中题库"微信小程序,针对个人或单位用户进行复习备考.业务学习.党建活动.继续教育而设计. 程序功能实用,界面简约,尤 ...

4. uniapp开发微信小程序-软考刷题小程序

   记录一次基于uniapp的微信小程序开发 前言 计算机科学与技术辅修学士的课程设计 最终决定做微信小程序(比较简单) 刷题小程序方向 题库是软考内容 开发语言 前端uniapp开发 后端django开 ...

5. 小程序源码：网课查题微信小程序源码下载,题库资源丰富自动采集，支持语音拍照识别

   这是一款网课查题微信小程序源码 题库资源丰富自动采集, 支持语音拍照识别 该款采用接口方式,所以题库自动全网采集 而且该款小程序无需服务器和域名即可搭建 大家解压源码然后使用微信开发者工具打开源码 然 ...

6. 使用Taro小程序框架开发一个学习、刷题、论坛、聊天交流的微信小程序

   本项目小程序端采用Taro技术框架,可将React代码编译为微信小程序.安卓APP.IOS程序.H5页面等,管理端采用React Hook + TypeScript来进行开发 项目介绍 当代大学生上课 ...

7. 土著刷题微信小程序迭代新增更多的实用功能，试题查重、导出、笔记～～～

   土著刷题微信小程序v1.5迭代了几个较为实用的功能,算是一个小版本中的大版本,安排的工作量还算合理,刚好赶上国庆节假期,趁此集中精力全力开发,接下来就逐一介绍v1.5主要的迭代新增功能. 试题查重 平 ...

8. 小程序源码：最新掌上题库微信小程序源码下载，修复登录接口，支持在线考试，自定义导入考题-多玩法安装简单

   这是一款题库微信小程序源码 支持积分商城.自定义试题及导入.知识点分类.模式试题考试.流量主等 首页模块:专项刷题 .题型刷题.乱序刷题.我的收藏.我的错题.未作习题.刷知识点.考前必背 另外还有更多 ...

9. 《微信小程序开发实战》课后题

   黑马程序员版<微信小程序开发实战> 第一章 填空题 1.微信小程序可以通过________方式打开. 答案:扫描二维码 2.微信开发者工具中的上传是指将代码上传到________. 答案: ...

10. 在线刷题题库微信小程序开发制作功能介绍

    在线刷题题库微信小程序开发制作功能介绍 1.题库大全:支持搜索查询各类课程试题答案. 2.多试题类型:支持单选题.多选题.判断题.问答题等多种类型. 3.批量导入:支持批量导入课程试题. 4.试题纠错 ...

最新文章

1. 80m的mysql文件要导入多久_mysql导入导出数据库的问题
2. 开发：异常收集之 ibatis+Oracle 查询时： ORA-00911错误
3. ACM-ICPC 2018 徐州赛区网络预赛 Morgana Net
4. 独家直播！阿里移动前端开源框架Weex揭秘
5. UNICODE字符集
6. 前端学习（2634）：修改webstrom颜色
7. IE、Chrome、Firefox 三大浏览器对比
8. 这两年计算机高职考试坎坷路
9. java 程序打包成jar_把Java程序打包成jar文件包并执行的方法
10. shell 之while两种写法
11. 查看python的模块和函数帮助文档方法
12. I2C 总线协议详解
13. android listview删除刷新,如何刷新Android ListView？
14. excel下拉公式保持一些参数不变
15. c++ int转char*
16. uniapp图片加载不出来的解决方案
17. airtest获取设备号和获取设备宽度、高度、绝对坐标 相对坐标、滑动屏幕
18. 秒懂FPGA、单片机、DSP、ASIC的区别
19. 支付宝：批量付款到支付宝账户有密接口
20. 开源python-向tensorflow-addons学习

热门文章

1. BeanCounter for Mac(财务记账软件)
2. 毕业两年，洋洋洒洒千字文
3. 高鲁棒！高实时！慕尼黑工业大学开源RGB-L SLAM！
4. 郑州轻工业oj平台（1000题-1010题）
5. netdev_features_t和ip_summed说明
6. 【源码】应用于各类工业控制的通用PID调谐器仿真设计
7. ubuntu的应用商店打不开，闪退
8. 海龟交易法则12_脚踏实地地测试
9. 基于Ubuntu的esp32编程学习（https://www.bilibili.com/video/BV1wV4y1G7Vk?p=22vd_source=c89885f80e65caacb539e）
10. 大学生生涯职业规划计算机专业,大学生职业生涯规划书计算机专业范文