优质广告供应商

广告是为了更好地支持作者创作

Uni App小白学习笔记——刷题App(二)

QQ图片20190925124238.png

上篇文章我们已经初步搭建好了刷题App的第一个页面,这篇文章继续来开发后续一些功能。

image

首先,准备的题目类型有单选题、多选题、判断题、案例题四种类型。所以,需要一个供选择哪种类型的页面。先简单实现个:点击pages->右键->新建页面
image

页面命名为question,选择使用scss
image

新建的页面内容如下:
image

接下来开始撸代码,之前撸代码的遇到很多H5支持而App不支持的情况。所以建议先阅读文档uni-app 跨端开发注意事项
注意:uni-app的tag同小程序的tag,和HTML的tag不一样,比如div要改成view,span要改成text、a要改成navigator。
所以代码要这么写:

<view class="uni-padding-wrap uni-common-mt">
  <view class="uni-flex uni-row">
    <navigator url="/pages/question/single_choice/single_choice" hover-class="navigator-hover">
      <view class="uni-flex-item">
        <uni-icon type="compose"></uni-icon>
        <text class="text">单选题</text>
      </view>
    </navigator>
  </view>
</view>

这里就使用了navigator代替a标签,view代替div,text代替span。然后使用了uni-ui的Icon图标组件。需要在网页上下载

image

并在script中引用组件:

<script>
    import uniIcon from "@/components/uni-icon/uni-icon.vue"  
    export default {
        data() {
            return {
                
            };
        },
        components: {uniIcon}
    }
</script>

scss如下: 需要安装编译插件。flex布局这里就不解释了,不会的自行学习。


image
.uni-flex {
    display: flex;
    flex-direction: row;
    height: 250rpx;
    .uni-flex-item {
      flex: 1;
      .text {
          text-align: center;
          font-size: 40rpx;
      }
      .uni-icon-compose {
          font-size: 160rpx;
      }
    }
}

页面写好了,接下来可是看下效果。不过之前还要在首页index.vue中加代码跳转到这页面中来。

<template>
  <view class="content">
    <image class="logo" src="/static/logo.png"></image>
    <view>
      <text class="title">{{title}}</text>
      <navigator url="/pages/question/question" hover-class="navigator-hover">
        <button class="item" type="primary">题库1</button>
      </navigator>
    </view>
  </view>
</template>

运行到浏览器效果如下:


image

接下来准备开发答题页面。参考其它答题类App的页面。不过开发前先要引入两个比较重要的css,在App.vue中引入:

<style>
  /*每个页面公共css */
  @import "./common/uni.css";
  @import "./common/normalize.css";
</style>

common需要自己要目录下新建,uni.css是官方组件css样式,normalize.css是css resets(重置)。在question文件夹下新建页面one_choice(注意这里把single改one了,因为好像one才是单选题的意思。所以question.vue中也要改),代码如下:

<template>
  <view class="content">
    <view class="type">
      <text class="span">第1题-单选题</text>
      <text class="span">1/5</text>
    </view>
    <p><text>[单选]</text>将( )年作为脱贫攻坚作风建设年,集中力量解决突出作风问题。科学确定脱贫摘帽时间,对弄虚作假、搞数字脱贫的严肃查处。实施乡村振兴战略。</p>
    <ul>
      <li class="option">
        <i>A</i>
        <view class="option-text">2022</view>
      </li>
      <li class="option">
        <i>A</i>
        <view class="option-text">2020</view>
      </li>
      <li class="option">
        <i>A</i>
        <view class="option-text">2019</view>
      </li>
      <li class="option">
        <i>A</i>
        <view class="option-text">2018</view>
      </li>
    </ul>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        
      };
    }
  }
</script>

<style lang="scss">
.content {
  position: absolute;
  height: 100%;
  margin: 0 35upx;
  font-size: 32upx;
  .type {
    margin: 20upx 0;
    font-size: 28upx;
    .span{
      &:last-child {
        float: right;
        right: 0upx;
      }
    }
  }
  .option {
    list-style: none;
    min-height: 100upx;
    &:first-child {
      margin-top: 10px;
    }
    i {
      font-style: normal;
      line-height: 32px;
      color: #4680fe;
      text-align: center;
      display: inline-block;
      border: 1px solid #4680fe;
      height: 32px;
      width: 32px;
      margin: 0 10px 0 10px;
      float: left;
      border-radius: 25px;
    }
    .option-text {
      display: inline-block;
      width: 80%;
      height: 100%;
    }
  }
}
</style>

效果如下:


image

接下来考虑导入excel数据,推荐一个在线转换excel成json的网站www。


image

然后把excel表头改成自己想要的字段。题目改question,选项A改optionA,答案改answer。还要使用ctrlH替换掉Excel中的空格。然后ctrlA全选,复制到网页上。点击转换。生成json。(注意:若excel中存在空格,则会出现不能准确分割每个元素,使用ctrl+H把空格全部替换成无空格,再去转换)
image

接下来就是获取JSON来读取题目数据了。第一想法是使用ajax引入json数据。在uni-app中是使用uni.request来加载json,然后在将需要的数据渲染出来,在chrome浏览器中运行,发现可以得到数据,但是运行到Android端发现不行。查看文档知道app端不支持本地获取,需要服务端。于是只能将json直接写在js中使用。这里使用es6语法的export和import导入js。因为放在static下一直获取不到,将其放在question目录下,然后引入。(求知道原因的大佬告知)


image
import question_data from '../single_choice.js'

To Be Continued......

优质广告供应商

广告是为了更好地支持作者创作

推荐阅读更多精彩内容

  • uni-app跨平台框架官方教程 链接:https://ke.qq.com/course/343370 一、框架简...
    Neyo_凉阅读 33,956评论 0 42
  • 上一篇我们讲了uni-app的各种优缺点,接下来我们要讲一下uni-app的开发流程和一些常用组件。此篇文章为un...
    任建堃阅读 18,145评论 0 27
  • 优质广告供应商

    广告是为了更好地支持作者创作

  • 背景 uni-app发布以来,已经服务了几十万开发者。让我们意外,或者说惊喜的是,有大量开发者用uni-app只编...
    邵张散人阅读 1,707评论 1 2
  • 吃过晚饭带女儿下楼“打灯笼”,还想着楼下能碰到别的小朋友也“打灯笼”,结果转了一圈就我们一个打灯笼,今年没有给女儿...
    小渡赵丽辉阅读 305评论 0 1
  • “雅,你家好近哦,早上睡到预备铃响再来学校,课间十分钟,可以回家喝水吃饭。” 这就是我家了,让老师和同学们无数次羕...
    一叶紫阅读 121评论 0 0
  • 协和医院。 整个医院压抑的异常,手术室的红灯持续闪了几个小时,门外等候的男人们或站或坐,亦或是来回镀步,心中的情绪...
    夜微语z阅读 96评论 0 0
  • 优质广告供应商

    广告是为了更好地支持作者创作

  • 没有滂沱的气势 从天而降,润化干涸的黄土 田间的高粱,伸展枝叶 允吸着甘露 远处的麻雀,叽叽喳喳 附和你的声音 让...
    浩宇_90阅读 170评论 0 0