Fire accident prevention, no disaster refuge in ankang. Today is “119” fire protection day, please pay attention to the use of fire, gas and electricity safety, work together to do a good job in the unit, family fire safety work.

Next, let me teach you hand in hand to build fire safety answer mini program.

Software architecture: wechat native small program + cloud development

Home page layout

<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 class="text-center text-red  padding-top" style="opacity: .3"> @MENG </view> </view>Copy the code

Home page style

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;
}
Copy the code

Home page effect picture

The layout style of the home page is relatively simple and generous, easy for beginners to build, as for logic, relatively less. Let’s build fire safety quiz program, participate in fire safety knowledge q&A, pay attention to fire, improve fire awareness.

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