微信小程序云开发实战-答题积分赛小程序
界面交互篇：答题页布局样式与逻辑交互开发
答题页原型稿
实现思路分析：
1）答题未选中状态；
2）答题已选中状态，点击确定提交选中结果；
3）显示答案以及题目解析，如回答正确，自动进入下一题；如回答错误，停留在当前答题页面；
4）每次答完10题，答对分数才会计入积分；
5）最后系统自动判分，然后出成绩单。
答题页效果图
答题页布局与样式实现
使用 flex 布局即可快速实现各区域模块的排版布局：
1）页面布局主要使用flex布局；
2）个人信息展示区域采用flex-wrap；
3）答题详情展示区域采用flex-sub；
4）操作按钮组区域采用flex-direction；
个人信息展示区域
在test.wxml中，编写布局代码：
<view class=&#34;page-con&#34;>
<view class=&#34;page&#34;>
<view class=&#34;flex flex-wrap solids-bottom padding-bottom&#34;>
<view class=&#39;basis-xs&#39;>
<view class=&#34;cu-avatar round lg margin-left&#34;>
<image class=&#34;avatar&#34; src=&#34;/images/0.png&#34; mode=&#34;widthFix&#34;></image>
</view>
</view>
<view class=&#39;basis-xl&#39;>
<view class=&#34;padding-top text-bold text-black&#34;>
姑苏洛言
</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=&#34;text-center padding-top&#34;>
当前第<text class=&#34;text-xl text-bold&#34;>1</text>题
共<text class=&#34;text-xl text-bold&#34;>10</text>题
</view>保存后，可以在模拟器预览效果或者手机微信扫码后预览。
题目信息展示区域
在test.wxml中，编写布局代码：
<view class=&#39;page-hd&#39;>
<view class=&#34;page-title&#34;>
<text class=&#34;text-bold&#34;>【单选题】</text>
下列网络系统安全原则，错误的是：（）
</view>
</view>
<view class=&#34;page-bd&#34;>
<radio-group class=&#34;radio-group&#34;>
<label class=&#34;radio my-choosebox&#34;>
<radio value=&#34;A&#34; checked=&#34;false&#34; />
<text class=&#34;margin-left-xs&#34;>A、静态性</text>
</label>
<label class=&#34;radio my-choosebox&#34;>
<radio value=&#34;B&#34; checked=&#34;false&#34; />
<text class=&#34;margin-left-xs&#34;>B、严密性</text>
</label>
<label class=&#34;radio my-choosebox&#34;>
<radio value=&#34;C&#34; checked=&#34;false&#34; />
<text class=&#34;margin-left-xs&#34;>C、整体性</text>
</label>
<label class=&#34;radio my-choosebox&#34;>
<radio value=&#34;D&#34; checked=&#34;false&#34; />
<text class=&#34;margin-left-xs&#34;>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=&#39;page-ft flex flex-direction padding padding-bottom-xl&#39;>
<button class=&#34;cu-btn lg round bg-sky&#34;>确定</button>
</view>保存后，可以在模拟器预览效果或者手机微信扫码后预览。
选中选项状态
选中选项状态时，只需要把radio的checked属性值设置为true即可。
点击确定后状态
点击确定按钮后的界面状态会有所变化：
①【确定】按钮隐藏，显示【下一题】按钮；
②显示【正确答案】栏目；
在test.wxml中，编写布局代码：
<button class=&#34;cu-btn lg round line-sky&#34;>下一题</button>在test.wxml中，编写布局代码：
<view class=&#39;padding-bottom page-hd padding-top solids-top&#39;>
<view class=&#34;page-title&#34;>
<text class=&#34;text-bold&#34;>【正确答案】</text>
A
</view>
</view>
应用场景
不少企事业单位常常会举办一些主题知识竞赛，但是目前缺乏一套可靠、美观、简便的答题小程序。比如适用于网络安全知识答题、交通安全答题、 消防安全知识宣传、 安全生产知识学习等答题活动或有奖竞答。
小结
因此我搭建了最新版的知识竞答小程序，提炼了典型的业务模型，它可以帮助你快速搭建各种形式的答题软件产品，帮助大家可以定期举办各类知识竞答活动。 |
