关于前端:答题积分小程序云开发实战界面交互篇答题成绩页布局样式与逻辑交互开发

微信小程序云开发实战 - 答题积分赛小程序

界面交互篇：答题问题页布局款式与逻辑交互开发

答题问题页效果图

答题问题布局与款式实现

应用 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: '@你，快来「护网专题信息安全常识竞答」，答题赢积分吧~'}
}

答完题后，在查看问题界面，能够点击【去晒问题】- 抉择微信好友或者群 - 而后发送 - 这样就把问题截图成封面分享进来。对方也能够间接点击卡片进入小程序，参加常识答题流动。