我的项目技术栈
微信原生小程序+云开发。为什么抉择微信原生小程序进行开发呢？因为可能间接利用它的云开发能力吖。
我这里次要应用了云开发能力中的小程序端SDK，说白了就是在javascript中就能间接操作数据库。
本篇前言
基于云开发的答题流动小程序v2.0的源码地址，以及手把手教你搭建答题流动小程序v1.0系列文章目录，均在【基于云开发的答题流动小程序v2.0，终于赶在11月最初一天实现了】这篇文章的底部。
这里对首页的代码进行简略的解读一下，v2.0的首页是在v1.0的首页的根底上进行改良的。首页，即小程序的首屏展现。
而它这里所承载的作用是，答题小程序的主题背景图展现、按钮排版、页面路由跳转等性能。说白了，就是让用户一进入小程序便晓得这是什么主题内容的小程序，可能干什么事件或者是哪些事件的。
这里的首页还是比较简单的，所以就间接上源码了。有趣味的能够去翻阅v1.0首页的文章，比照一下异同。
首页布局
<image src="/image/bg.jpg" class="mw-bg"></image><view class="mw-btn"> <view class="mw-answer"> <view wx:if="{{!hasUserInfo}}" bindtap="login"> <button class='cu-btn bg-red round block lg margin-top'> 获取头像昵称 </button> </view> <view wx:else bindtap="goToTest"> <button class='cu-btn bg-red round block lg margin-top'>开始答题</button> </view> <view bindtap="goToHistory"> <button class='cu-btn bg-red round block lg margin-top'>答题记录</button> </view> <view bindtap="goToRank"> <button class='cu-btn bg-red round block lg margin-top'>排行榜</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-xs" bindtap="goToDetails"> 流动规定 </view></view>首页款式
page{ background-color: #f6eef9;}.mw-bg { position: absolute; top: 0; left: 0; width: 750rpx; height: 100vh;}.mw-btn { position: absolute; top: 53vh; left: 0; width: 750rpx; z-index: 2;}.mw-answer { padding: 100rpx 150rpx 30rpx;}.mw-weixin.text-center { color: #333; padding: 30rpx 0 0;}首页效果图
好，所见即所得，看看运行后的页面展现成果吧。
本篇小结
这一篇次要是聊聊首页的作用，以及看看首页的排版布局与款式实现，轻松地学学简洁慷慨的页面设计，进步审美能力。还有就是，相较于v1.0首页的改良的中央。