共计 2567 个字符,预计需要花费 7 分钟才能阅读完成。
微信小程序云开发实战 - 答题积分赛小程序
界面交互篇:答题页布局款式与逻辑交互开发
答题页原型稿
实现思路剖析:
1)答题未选中状态;
2)答题已选中状态,点击确定提交选中后果;
3)显示答案以及题目解析,如答复正确,主动进入下一题;如答复谬误,停留在以后答题页面;
4)每次答完 10 题,答对分数才会计入积分;
5)最初零碎主动判分,而后出成绩单。
答题页效果图
答题页布局与款式实现
应用 flex 布局即可疾速实现各区域模块的排版布局:
1)页面布局次要应用 flex 布局;
2)个人信息展现区域采纳 flex-wrap;
3)答题详情展现区域采纳 flex-sub;
4)操作按钮组区域采纳 flex-direction;
个人信息展现区域
在 test.wxml 中,编写布局代码:
<view class="page-con">
<view class="page">
<view class="flex flex-wrap solids-bottom padding-bottom">
<view class='basis-xs'>
<view class="cu-avatar round lg margin-left">
<image class="avatar" src="/images/0.png" mode="widthFix"></image>
</view>
</view>
<view class='basis-xl'>
<view class="padding-top text-bold text-black">
姑苏洛言
</view>
</view>
</view>
</view>
</view>
在 test.wxss 中,编写款式代码:
page {background-color: #fff;}
.page-con {padding: 20rpx;}
.page {
padding: 20rpx;
border: 2rpx solid #ddd;
border-radius: 10rpx;
}
保留后,能够在模拟器预览成果或者手机微信扫码后预览。
答题进度展现区域
在 test.wxml 中,编写布局代码:
<view class="text-center padding-top">
以后第 <text class="text-xl text-bold">1</text> 题
共 <text class="text-xl text-bold">10</text> 题
</view>
保留后,能够在模拟器预览成果或者手机微信扫码后预览。
题目信息展现区域
在 test.wxml 中,编写布局代码:
<view class='page-hd'>
<view class="page-title">
<text class="text-bold">【单选题】</text>
下列网络系统平安准则,谬误的是:()</view>
</view>
<view class="page-bd">
<radio-group class="radio-group">
<label class="radio my-choosebox">
<radio value="A" checked="false" />
<text class="margin-left-xs">A、动态性 </text>
</label>
<label class="radio my-choosebox">
<radio value="B" checked="false" />
<text class="margin-left-xs">B、严密性 </text>
</label>
<label class="radio my-choosebox">
<radio value="C" checked="false" />
<text class="margin-left-xs">C、整体性 </text>
</label>
<label class="radio my-choosebox">
<radio value="D" checked="false" />
<text class="margin-left-xs">D、专业性 </text>
</label>
</radio-group>
</view>
在 test.wxss 中,编写款式代码:
.page-hd {padding: 30rpx 0;}
.page-bd {padding: 20rpx;}
.page .radio-group, .page .checkbox-group {display: block;}
.my-choosebox {
display: block;
margin-bottom: 20rpx;
border: 2rpx solid #ddd;
padding: 20rpx;
border-radius: 50rpx;
}
保留后,能够在模拟器预览成果或者手机微信扫码后预览。
操作按钮展现区域
在 test.wxml 中,编写布局代码:
<view class='page-ft flex flex-direction padding padding-bottom-xl'>
<button class="cu-btn lg round bg-sky"> 确定 </button>
</view>
保留后,能够在模拟器预览成果或者手机微信扫码后预览。
选中选项状态
选中选项状态时,只须要把 radio 的 checked 属性值设置为 true 即可。
点击确定后状态
点击确定按钮后的界面状态会有所变动:
①【确定】按钮暗藏,显示【下一题】按钮;
②显示【正确答案】栏目;
在 test.wxml 中,编写布局代码:
<button class="cu-btn lg round line-sky"> 下一题 </button>
在 test.wxml 中,编写布局代码:
<view class='padding-bottom page-hd padding-top solids-top'>
<view class="page-title">
<text class="text-bold">【正确答案】</text>
A
</view>
</view>
利用场景
不少企事业单位经常会举办一些主题常识比赛,然而目前不足一套牢靠、好看、简便的答题小程序。比方实用于网络安全常识答题、交通安全答题、消防安全常识宣传、平安生产常识学习等答题流动或有奖竞答。
小结
因而我搭建了最新版的常识竞答小程序,提炼了典型的业务模型,它能够帮忙你疾速搭建各种模式的答题软件产品,帮忙大家能够定期举办各类常识竞答流动。