关于前端:手把手教你搭建消防安全答题小程序答题页

念无与为乐者，就让我手把手教你搭建常识竞答小程序吧。为啥你的UI界面感觉乱？难看的答题考试小程序，切实是太稀缺了。

软件架构：微信原生小程序+云开发
戳源码地址，获取源码，版本继续迭代中...

答题页布局

<!--pages/test/test.wxml--><view class="page">  <view class="padding-top text-center">    第<text class="text-bold text-xl">1</text>题    共<text class="text-bold text-xl">20</text>题  </view>  <view class='page__hd padding'>    <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">堵截</text>      </label>      <label class="radio my-choosebox">        <radio value="B" checked="false" />        <text class="margin-left-xs">快攻</text>      </label>      <label class="radio my-choosebox">        <radio value="C" checked="false" />        <text class="margin-left-xs">隔离</text>      </label>      <label class="radio my-choosebox">        <radio value="D" checked="false" />        <text class="margin-left-xs">排烟</text>      </label>    </radio-group>  </view>  <view class='page_ft flex padding flex-direction'>    <button bindtap='nextSubmit' class="cu-btn bg-red round lg">下一题</button>  </view>  <view class="mw-weixin text-center text-gray padding-top">    <text class="icon-weixin"></text> meng674782630  </view></view>

答题页款式

/* pages/test/test.wxss */page {  background-color: #fff;}.page {  padding: 20rpx;}.page__bd {  padding: 20rpx;}.my-choosebox {  display: block;  margin-bottom: 20rpx;}.toindex-btn {  margin-top: 20rpx;  display:inline-block;  line-height:2.3;  font-size:13px;  padding:0 1.34em;  color: red;  float: right;}.page .radio-group, .page .checkbox-group {  display: block;}

答题页效果图

好了，明天就写到这里。以后版本，先教大家页面布局与款式。下一个迭代会接入云开发，实现残缺的答题小程序性能，敬请期待吧。