十一在家期间，我看了九型人格这本书，觉得很不错，想要做一下测试，测试的时候就是去网上搜了一下相关的测试，就开始了。但是转念一想，能不能做一个专门测试的小程序，里面可以增加各种各样的测试题目？于是，“国庆没去旅游的我”就开始了基于SCF的测试小程序的编写。

当然，不适太会写小程序，所以代码也未必好看。前端就是微信小程序，用了WEUI，后端就是Python，数据库用了腾讯云的CDB。

废话不多说，直接上干货。

前端页面设计

由于我只是个人开发一个小工具，所以也没有设置原型图，就是根据看的WEUI进行了一些简单的拼装。先发一下效果图：

整体来说，勉勉强强，还可以看，这个前端，基本上就是使用了WEUI的那些组件，基本上和拼图类似，例如首页：

wxml：

<!--pages/index/index.wxml-->
<view>
  <view class="page__bd">
    <view>
      <swiper class="swiper" autoplay="true" interval="2000">
        <swiper-item wx:for="{{hot_test}}" wx:key="item">
          <image src="{{item.src}}" data-Tid='{{item.tid}}' bindtap='hotClick' mode="aspectFill" class="img"></image>
          <view class="child">{{item.title}}</view>
        </swiper-item>
      </swiper>
    </view>
  </view>
  <view class="page__bd">
    <view class="weui-cells  weui-grids">
      <block wx:for="{{category}}" wx:key="item">
        <navigator url="{{item.url}}" class="weui-grid" hover-class="weui-grid_active">
          <image class="weui-grid__icon" src="{{item.src}}" />
          <view class="weui-grid__label">{{item.title}}</view>
        </navigator>
      </block>
    </view>
  </view>
  
  <view class="weui-cells weui-cells_after-title">
  <view class="page__hd">
        <view class="page__title">热门测试</view>
  </view>
        <block wx:for="{{content}}" wx:key="item">
          <navigator url="/pages/content/index?tid={{item.tid}}" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
            <block wx:if="{{item.type}}">
              <view class="weui-cell__hd">
                <image src="/image/content/{{item.icon}}.png" style="margin-right: 16px;vertical-align: middle;width:20px; height: 20px;"></image>
              </view>
              <view class="weui-cell__bd">{{item.title}}</view>
            </block>
            <block wx:else>
              <view class="weui-cell__hd">
                <image src="/image/content/{{item.icon}}.png" style="margin-right: 16px;vertical-align: middle;width:20px; height: 20px;" />
              </view>
              <view class="weui-cell__bd">
                <view>{{item.title}}</view>
                <view style="font-size: 13px;color: #888888;">{{item.desc}}</view>
              </view>
            </block>
          </navigator>
        </block>
      </view>
      <text>\n</text>
  <view class="weui-footer">
    <view class="weui-footer__text">爱测试 Copyright © 2019</view>
  </view>
  <text>\n\n\n</text>
  <view class="page__bd">
    <view class="weui-tabbar">
      <view class="weui-tabbar__item weui-bar__item_on">
        <view style="position: relative;display:inline-block;">
          <image src="/image/tabbar/test_1.png" class="weui-tabbar__icon"></image>
        </view>
        <view class="weui-tabbar__label">测试首页</view>
      </view>
      <view class="weui-tabbar__item" bindtap='toRandom'>
        <view style="position: relative;display:inline-block;">
          <image src="/image/tabbar/random.png" class="weui-tabbar__icon"></image>
        </view>
        <view class="weui-tabbar__label">随机一测</view>
      </view>
      <view class="weui-tabbar__item" bindtap='toUser'>
        <view style="position: relative;display:inline-block;">
          <image src="/image/tabbar/user_1.png" class="weui-tabbar__icon"></image>
        </view>
        <view class="weui-tabbar__label">我的测试</view>
      </view>
    </view>
  </view>
</view>

wxss：

/* pages/index/index.wxss */
.weui-tabbar{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
}
.child {
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  text-align: left;
  background: white;
  opacity: 0.8
}  
.img {
  width: 100%;
}

当然，这一部分更多还是学习的过程。我只是在WEUI中找到几个木块，例如九宫格、例如列表以及尾部（Footer）。

整个前端包括：

用户打开小程序，进入到首页，在首页选择好测试内容或者通过分类选择测试内容，并且进入到测试页面，测试将以选择题形式出现，每个选项都有分数，用户选择好之后，提交到结果页面，在结果页面可以查看到测试结果。用户也可以在用户管理页面，看到自己的测试历史信息。如果没有登录可以在登录页面进行登录。

当然以首页为例，在做这一部分的时候，我其实就已经定义好了，大概的接口内容，以及部分结构。

例如分类列表部分，这一部分的结构是：

category: [
      {
        'title': "热门",
        'src': "/image/category/fire.png",
        'url': "/pages/list/index?type=fire"
      },
      {
        'title': "情感",
        'src': "/image/category/heart.png",
        'url': "/pages/list/index?type=heart"
      },
      {
        'title': "性格",
        'src': "/image/category/cross.png",
        'url': "/pages/list/index?type=cross"
      },
      {
        'title': "健康",
        'src': "/image/category/health.png",
        'url': "/pages/list/index?type=health"
      },
      {
        'title': "职场",
        'src': "/image/category/work.png",
        'url': "/pages/list/index?type=work"
      },
      {
        'title': "人际",
        'src': "/image/category/group.png",
        'url': "/pages/list/index?type=group"
      },
      {
        'title': "能力",
        'src': "/image/category/do.png",
        'url': "/pages/list/index?type=do"
      },
      {
        'title': "亲子",
        'src': "/image/category/family.png",
        'url': "/pages/list/index?type=family"
      },
      {
        'title': "其他",
        'src': "/image/category/detail.png",
        'url': "/pages/list/index?type=others"
      }
    ]

整个项目，使用最多的函数/方法应该就是后端的数据交互了，就是request，以获取首页热门测试为例：

wx.request({
      url: '',
      data: {
        category: "fire",
      },
      method: "POST",
      header: {
        "Content-Type": "application/x-www-form-json"
      },
      success: function (res) {
        that.setData({ content: res.data.result });
        console.log("result len: ", res.data.result.length)
        console.log("result: ", res.data.result)
        if (res.data.result.length == 0) {
          that.setData({ has_data: false });
        }
      },
    })

这其中，入参实际已经被定义为：category:"fire"

出参则是：

tid: int 测试索引

title: str 测试题目

icon: str 测试图标