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

火灾事故重预防，无灾避难得健康。明天是“119”消防日，请大家留神用火用气用电平安，独特做好单位、家庭消防安全工作。
接下来，就让我手把手教你搭建消防安全答题小程序吧。
软件架构：微信原生小程序+云开发

首页布局

<image src="/image/bg.jpg" class="mw-bg"></image><view class="mw-btn">  <view class="mw-answer">    <view catchtap="goToTest">      <button class='cu-btn bg-red round block lg'>开始答题</button>    </view>    <view>      <button class="cu-btn line-red round block lg margin-top" open-type="share"> 举荐给好友 </button>    </view>  </view>  <view class="text-center text-red padding-top" style="opacity: .3">    @MENG  </view></view>

首页款式

page{  background-color: #f6eef9;}.mw-bg {  position: absolute;  top: 0;  left: 0;  width: 750rpx;  height: 100vh;}.mw-btn {  position: absolute;  top: 55vh;  left: 0;  width: 750rpx;  z-index: 2;}.mw-answer {  padding: 100rpx 150rpx 30rpx;}.mw-weixin.text-center {  color: #333;  padding: 30rpx 0 0;}

首页效果图

首页的布局款式还是比拟简洁慷慨的，老手容易上手搭建，至于逻辑方面，绝对比拟少。一起来搭建消防安全答题小程序，齐参加火灾平安常识问答，关注消防，进步防火意识。
戳源码地址，获取源码，版本继续迭代中...