念无与为乐者，就让我手把手教你搭建知识竞答小程序吧。为啥你的UI界面感觉乱？好看的答题考试小程序，实在是太稀缺了。<br>软件架构：微信原生小程序+云开发<br>戳<a href="https://gitee.com/uemeng/fire-safety-knowledge" target="_blank" class="link"><i class="iconfont icon-iconfontlink"> </i>源码地址</a>，获取源码，版本持续迭代中...<br><div>答题页布局<br><br><br><view class="page"><br> <view class="padding-top text-center"><br> 第<text class="text-bold text-xl">1</text>题<br> 共<text class="text-bold text-xl">20</text>题<br> </view><br> <view class="page__hd padding"><br> <view class="page__title"><br> <text class="text-bold">【单选题】</text><br> 当灭火人员能够接近火源时，应迅速利用身边的灭火器材灭火，将火势控制在初期低温少烟阶段，使用的火灾扑救方法是（）。<br> </view><br> </view><br> <view class="page__bd"><br> <radio-group class="radio-group"><br> <label class="radio my-choosebox"><br> <radio value="A" checked="false"><br> <text class="margin-left-xs">堵截</text><br> </radio></label><br> <label class="radio my-choosebox"><br> <radio value="B" checked="false"><br> <text class="margin-left-xs">快攻</text><br> </radio></label><br> <label class="radio my-choosebox"><br> <radio value="C" checked="false"><br> <text class="margin-left-xs">隔离</text><br> </radio></label><br> <label class="radio my-choosebox"><br> <radio value="D" checked="false"><br> <text class="margin-left-xs">排烟</text><br> </radio></label><br> </radio-group><br> </view><br> <view class="page_ft flex padding flex-direction"><br> < bindtap="nextSubmit" class="cu-btn bg-red round lg">下一题</><br> </view><br> <view class="mw-weixin text-center text-gray padding-top"><br> <text class="icon-weixin"></text> meng674782630<br> </view><br></view><br><br><br><br><br>答题页样式<br><br>/* pages/test/test.wxss */<br>page {<br> background-color: #fff;<br>}<br>.page {<br> padding: 20rpx;<br>}<br>.page__bd {<br> padding: 20rpx;<br>}<br>.my-choosebox {<br> display: block;<br> margin-bottom: 20rpx;<br>}<br>.toindex-btn {<br> margin-top: 20rpx;<br> display:inline-block;<br> line-height:2.3;<br> font-size:13px;<br> padding:0 1.34em;<br> color: red;<br> float: right;<br>}<br>.page .radio-group, .page .checkbox-group {<br> display: block;<br>}<br><br><br>答题页效果图<br></div> <div><br></div><div>好了，今天就写到这里。当前版本，先教大家页面布局与样式。下一个迭代会接入云开发，实现完整的答题小程序功能，敬请期待吧。<br></div>