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。
所以代码要这么写：

  
    
      
        
        单选题
      
    
  

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

image

并在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中加代码跳转到这页面中来。

运行到浏览器效果如下：

image

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

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

效果如下：

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......