首页 > 编程语言 >答题积分小程序云开发实战-界面交互篇:答题页布局样式与逻辑交互开发

答题积分小程序云开发实战-界面交互篇:答题页布局样式与逻辑交互开发

时间:2023-04-30 14:31:39浏览次数:58  
标签:答题 预览 wxml 布局 开发 test 交互 page

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

界面交互篇:答题页布局样式与逻辑交互开发

答题页原型稿

实现思路分析:

1)答题未选中状态;

2)答题已选中状态,点击确定提交选中结果;

3)显示答案以及题目解析,如回答正确,自动进入下一题;如回答错误,停留在当前答题页面;

4)每次答完10题,答对分数才会计入积分;

5)最后系统自动判分,然后出成绩单。

答题积分小程序云开发实战-界面交互篇:答题页布局样式与逻辑交互开发_微信小程序


答题页效果图

答题积分小程序云开发实战-界面交互篇:答题页布局样式与逻辑交互开发_答题积分小程序_02

答题页布局与样式实现

使用 flex 布局即可快速实现各区域模块的排版布局:

1)页面布局主要使用flex布局;

2)个人信息展示区域采用flex-wrap;

3)答题详情展示区域采用flex-sub;

4)操作按钮组区域采用flex-direction;

个人信息展示区域

在test.wxml中,编写布局代码:

<view class="page-con">
  <view class="page">
    <view class="flex flex-wrap solids-bottom padding-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="padding-top text-bold text-black">
          姑苏洛言
        </view>
      </view>
    </view>
  </view>
</view>

在test.wxss中,编写样式代码:

page {
  background-color: #fff;
}
.page-con {
  padding: 20rpx;
}
.page {
  padding: 20rpx;
  border: 2rpx solid #ddd;
  border-radius: 10rpx;
}

保存后,可以在模拟器预览效果或者手机微信扫码后预览。

答题积分小程序云开发实战-界面交互篇:答题页布局样式与逻辑交互开发_排行榜_03


答题进度展示区域

在test.wxml中,编写布局代码:

<view class="text-center padding-top">
  当前第<text class="text-xl text-bold">1</text>题
  共<text class="text-xl text-bold">10</text>题
</view>

保存后,可以在模拟器预览效果或者手机微信扫码后预览。

答题积分小程序云开发实战-界面交互篇:答题页布局样式与逻辑交互开发_答题积分小程序_04


题目信息展示区域

在test.wxml中,编写布局代码:

<view class='page-hd'>
    <view class="page-title">
        <text class="text-bold">【单选题】</text>
        下列网络系统安全原则,错误的是:()
    </view>
</view>
<view class="page-bd">
  <radio-group class="radio-group">
    <label class="radio my-choosebox">
      <radio value="A" checked="false" />
      <text class="margin-left-xs">A、静态性</text>
    </label>
    <label class="radio my-choosebox">
      <radio value="B" checked="false" />
      <text class="margin-left-xs">B、严密性</text>
    </label>
    <label class="radio my-choosebox">
      <radio value="C" checked="false" />
      <text class="margin-left-xs">C、整体性</text>
    </label>
    <label class="radio my-choosebox">
      <radio value="D" checked="false" />
      <text class="margin-left-xs">D、专业性</text>
    </label>
  </radio-group>
</view>

在test.wxss中,编写样式代码:

.page-hd {
  padding: 30rpx 0;
}
.page-bd {
  padding: 20rpx;
}
.page .radio-group, .page .checkbox-group {
  display: block;
}
.my-choosebox {
  display: block;
  margin-bottom: 20rpx;
  border: 2rpx solid #ddd;
  padding: 20rpx;
  border-radius: 50rpx;
}

保存后,可以在模拟器预览效果或者手机微信扫码后预览。

答题积分小程序云开发实战-界面交互篇:答题页布局样式与逻辑交互开发_微信小程序_05


操作按钮展示区域

在test.wxml中,编写布局代码:

<view class='page-ft flex flex-direction padding padding-bottom-xl'>
  <button class="cu-btn lg round bg-sky">确定</button>
</view>

保存后,可以在模拟器预览效果或者手机微信扫码后预览。

答题积分小程序云开发实战-界面交互篇:答题页布局样式与逻辑交互开发_排行榜_06


选中选项状态

选中选项状态时,只需要把radio的checked属性值设置为true即可。

答题积分小程序云开发实战-界面交互篇:答题页布局样式与逻辑交互开发_安全知识_07


点击确定后状态

点击确定按钮后的界面状态会有所变化:

①【确定】按钮隐藏,显示【下一题】按钮;

②显示【正确答案】栏目;

在test.wxml中,编写布局代码:

<button class="cu-btn lg round line-sky">下一题</button>

在test.wxml中,编写布局代码:

<view class='padding-bottom page-hd padding-top solids-top'>
    <view class="page-title">
      <text class="text-bold">【正确答案】</text>
      A
    </view>
</view>


答题积分小程序云开发实战-界面交互篇:答题页布局样式与逻辑交互开发_排行榜_08


应用场景

不少企事业单位常常会举办一些主题知识竞赛,但是目前缺乏一套可靠、美观、简便的答题小程序。比如适用于网络安全知识答题、交通安全答题、 消防安全知识宣传、 安全生产知识学习等答题活动或有奖竞答。

答题积分小程序云开发实战-界面交互篇:答题页布局样式与逻辑交互开发_云开发_09

答题积分小程序云开发实战-界面交互篇:答题页布局样式与逻辑交互开发_云开发_10

答题积分小程序云开发实战-界面交互篇:答题页布局样式与逻辑交互开发_排行榜_11

小结

因此我搭建了最新版的知识竞答小程序,提炼了典型的业务模型,它可以帮助你快速搭建各种形式的答题软件产品,帮助大家可以定期举办各类知识竞答活动。

标签:答题,预览,wxml,布局,开发,test,交互,page
From: https://blog.51cto.com/u_15335909/6237876

相关文章

  • 四、开发环境统一--谷粒商城
    1)maven查看Windows环境的jdk版本:cmd命令行里输入:java-version查看Windows环境的maven版本:cmd命令行里输入:mvn-version具体如下ApacheMaven3.6.3(cecedd343002696d0abb50b32b541b8a6ba2883f)Mavenhome:D:\Maven\apache-maven-3.6.3\bin\..Javaversion:11.0.16,vend......
  • android开发中使用GZIP压缩传输
    1.class=javaname="code">HTTP压缩可以大大提高浏览网站的速度,它的原理是,在客户端请求网页后,从服务器端将网页文件压缩,再下载到客户端,由客户端的浏览器负责解压缩并浏览。相对于普通的浏览过程HTML,CSS,Javascript,Text,它可以节省40%左右的流量。更为重要的是,它可以对动......
  • 基于SSM开发宿舍管理系统
    访问【WRITE-BUG数字空间】_[内附完整源码和文档]本宿舍管理系统采用B/S架构模式。B/S架构的全称为Browser/Server,即浏览器/服务器结构。Browser指的是Web浏览器,与C/S架构相比,B/S模式极少数事务逻辑在前端实现,它的主要事务逻辑在服务器端实现。B/S架构的系统无须特别安装,只有Web浏......
  • iOS开发 UItableView中的单元…
    iOSiPhone开发UItableView中的单元格背景渐变渐变如果用背景图片,会让你的app臃肿。给APP瘦身,我们可以使用代码来解决渐变的问题。这篇文章是解决表格中的单元格的简便问题,同时解决单元格外边框问题。1:设置好开始颜色与结束颜色。推荐一个小工具,在chrome浏览器上安装一个扩展......
  • iOS开发UITableView基本使用方法总…
    UITableView基本使用方法1.首先,Controller需要实现两个delegate,分别是UITableViewDelegate和UITableViewDataSource2.然后UITableView对象的delegate要设置为self。3.然后就可以实现这些delegate的一些方法拉。(1)-(NSInteger)numberOfSectionsInTableView:(UITableView*......
  • Android 开发 UI 规则
    Android的官方开发者博客发了一份幻灯片,介绍了一些AndroidUI设计的小贴士,在这里以看图说话的形式发出来。Don’t: 1、不要照搬你在其它平台的UI设计,应该让用户感觉是在真正使用一个Android软件,在你的商标显示和平台整体观感之间做好平衡2、不要过度使用模态对话框3、......
  • Android开发中立即停止AsyncTask和…
    程序开发中经常会有立即停止线程运行的需要,而通过api是没有办法实现这个目的的,因此对于这个情况,我们需要采取一些“特殊”的方式来实现:  1,判断标志位的办法:  我们要知道在java的线程中,没有办法停止一个正在运行中的线程。在Android的AsyncTask中也是一样的。如果必须要停......
  • SpringMVC使用注解开发
    1.编写web.xml(模板代码)ViewCode2.导入springmvc的context和mvc两个依赖,通过context标签可以自动扫描识别包"com.lian.controller"下的所有注解,两个mvc标签是默认配置;context和mvc分别替代了之前的处理器映射器HandleMapper和处理器适配器HandlerAdapter;视图解析器拼接要要跳转......
  • OpenCV实现答题卡识别
    目录1.定位并规整答题卡(1)图像预处理(2)轮廓检测(答题卡)(3)透视变换2.答题卡结果检测(1)自适应二值化处理(2)轮廓检测(选项)(3)绘制掩模(4)结果本文基于OpenCV实现了捕获答题卡中的每个填涂选项,并将获取的填涂选项与正确选项做对比计算其答题正确率。所涉及的图像操作有:灰度转......
  • 驱动开发:通过MDL映射实现多次通信
    在前几篇文章中LyShark通过多种方式实现了驱动程序与应用层之间的通信,这其中就包括了通过运用SystemBuf缓冲区通信,运用ReadFile读写通信,运用PIPE管道通信,以及运用ASYNC反向通信,这些通信方式在应对一收一发模式的时候效率极高,但往往我们需要实现一次性吐出多种数据,例如ARK工具中当我......