微信小程序云开发实战-答题积分赛小程序
界面交互篇：答题问题页布局款式与逻辑交互开发
答题问题页效果图
答题问题布局与款式实现
应用 flex 布局即可疾速实现各区域模块的排版布局：
1、页面布局次要应用flex布局；
2、个人信息展现区域采纳flex-wrap；
3、答题详情展现区域采纳flex-sub；
4、操作按钮组区域采纳flex-direction；
个人信息展现区域
在result.wxml中，编写布局代码：
<view class="page-con"> <view class="page"> <view class="padding"> <view class="flex flex-wrap solids-bottom padding-bottom margin-bottom"> <view class='basis-xs'> <view class="cu-avatar round lg margin-left"> <image class="avatar" src="/images/0.png" mode="widthFix"></image> </view> </view> <view class='basis-xl'> <view class="text-bold text-black padding-left-xs padding-top"> 姑苏洛言 </view> </view> </view> </view> </view></view>在result.wxss中，编写款式代码：
page { background-color: #fff;}.page-con { padding: 20rpx;}.page { border: 2rpx solid #ddd; border-radius: 10rpx;}保留后，能够在模拟器预览成果或者手机微信扫码后预览。
取得积分展现区域
在result.wxml中，编写布局代码：
<view class='page-head'> <view class="page-title padding-bottom-xs text-bold text-lg text-black"> 「网络安全常识」答题积分比赛 </view> <view class="padding-left">您本次取得</view> <view class='page-score'> <text class="score-num text-bold text-yellow">10积分</text> </view></view>在result.wxss中，编写款式代码：
.page-score { display: flex; justify-content: center; align-items: flex-end; padding-top:20rpx;}.score-num { font-size:100rpx;}保留后，能够在模拟器预览成果或者手机微信扫码后预览。
答题详情展现区域
在result.wxml中，编写布局代码：
<view class='flex text-grey text-center margin-bottom padding bg-white radius solids-bottom'> <view class='solid-right flex flex-direction flex-sub'> <view class="text-yellow text-xxl">1题</view> <view class="margin-top-sm"> 答对 </view> </view> <view class='solid-right flex flex-direction flex-sub'> <view class="text-gray text-xxl">9题</view> <view class="margin-top-sm"> 答错 </view> </view> <view class='flex flex-direction flex-sub'> <view class="text-xxl text-green"> 10% </view> <view class="margin-top-sm"> 正确率 </view> </view></view>保留后，能够在模拟器预览成果或者手机微信扫码后预览。
操作按钮组区域
在result.wxml中，编写布局代码：
<view class="padding flex flex-direction"> <button bindtap="toDoTestAgain" class="cu-btn lg round bg-sky"> 持续答题 </button> <button bindtap="toIndex" class="cu-btn lg round line-sky margin-top"> 回到主页 </button> <button class="cu-btn lg round line-sky margin-top" open-type="share"> 去晒问题 </button></view>在result.wxss中，编写款式代码：
.page-footer { margin-top: 0rpx; text-align: center;}保留后，能够在模拟器预览成果或者手机微信扫码后预览。
按钮性能逻辑实现
在result.js中，编写逻辑代码：
// 返回首页toIndex(){ wx.reLaunch({ url: '../index/index' })}, // 再答一次toDoTestAgain(){ wx.reLaunch({ url: '../test/test' })}, /** * 用户点击右上角分享 */onShareAppMessage() { return { title: '@你，快来「护网专题信息安全常识竞答」，答题赢积分吧~' }}答完题后，在查看问题界面，能够点击【去晒问题】-抉择微信好友或者群-而后发送-这样就把问题截图成封面分享进来。对方也能够间接点击卡片进入小程序，参加常识答题流动。