Read without pleasure, let me teach you hand in hand to build knowledge contest small program. Why does your UI feel messy? Good-looking answer exam small procedure, it is too scarce.

Software architecture: wechat native small program + cloud development

Poke source code address, get source code, version continuous iteration…

Answer page layout

<! --pages/test/test. WXML --> <view class="page"> <view class="padding-top text-center"> <text class="text-bold Text class="text-bold text-xl">20</text>题 </view> <view class='page__hd padding'> <view Class ="page__title"> <text class="text-bold"> </text> When fire extinguishing personnel can get close to the fire source, they should quickly use the fire-extinguishing equipment around them to put out the fire and control the fire in the early stage of low temperature and less smoke. The fire-fighting method used is (). </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"> quick break </text> </label> <label class="radio my-choosebox"> <radio Value ="C" checked="false" /> <text class="margin-left-xs"> Isolation </text> </label> <label class="radio my-Choosebox "> <radio Value ="D" checked="false" /> <text class="margin-left-xs"> Smoke </text> </label> </radio-group> </view> <view class='page_ft Flex padding flex-direction'> <button bindtap='nextSubmit' class="cu-btn bg-red round LG" class="mw-weixin text-center text-gray padding-top"> <text class="icon-weixin"></text> meng674782630 </view> </view>Copy the code

Answer sheet style

/* 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; The line - height: 2.3; font-size:13px; Padding: 1.34 em 0; color: red; float: right; } .page .radio-group, .page .checkbox-group { display: block; }Copy the code

Answer page effect drawing

All right, that’s it for today. The current version teaches you layout and style first. The next iteration will be connected to cloud development, to achieve a complete answer applets function, stay tuned.