# cbjtest_small_app

**Repository Path**: wojiaocbj/cbjtest_small_app

## Basic Information

- **Project Name**: cbjtest_small_app
- **Description**: 多功能小程序
- **Primary Language**: C#
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 1
- **Created**: 2020-05-11
- **Last Updated**: 2021-12-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 北航基物实验小程序

## 功能

- 使用微信登录认证
- 提供实验操作步骤，操作提示（最好辅以真实照片）
- 实验评价、评论。
- 实验中可能用到的工具，数据记录和导出，计算工具。
- 小程序反馈。

## 开发前准备材料

- 实验操作步骤流程图、操作提示汇总。
- 实验需要的计算工具，数据统计形式。
- 要对什么做出评价。

## 目录结构

```
|-- miniprogram
    |-- images          (静态图片资源)
    |-- pages           (页面, 用index举例创建Page)
        |-- index
            |-- index.js
            |-- index.json
            |-- index.wxml
            |-- index.wxss
        |-- tools
            |-- average
                |-- average.js
                |-- average.json
                |-- average.wxml
                |-- average.wxss
    |-- utils           (放一些通用的js实现模块化)
    |-- app.js          (全局app的js)
    |-- app.json        (app的全局配置文件)
    |-- app.wxss        (全局样式文件)
    |-- common.wxml     (模板文件, 可以没有, 也可以做成Components)
    |-- common.wxs      (wxml渲染辅助文件, 例如wxml中不能使用indexOf函数作为条件, 可以用wxs辅助)
    |-- sitemap.json    (允许微信搜索爬虫配置文件)
    |-- theme.json      (darkMode的变量文件)
```

`wxml`模板：[**微信官方文档**](https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/template.html)

小程序js模块化：[**微信官方文档**](https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/module.html)

关于小程序的路由：[**微信官方文档**](https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/route.html)

`sitemap.json` 的解释：[**微信官方文档**](https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html)

`theme.json` DarkMode适配指南：[**微信官方文档**](https://developers.weixin.qq.com/miniprogram/dev/framework/ability/darkmode.html)


### 1. 实验列表页 `/pages/index`
【程序入口页】【TabBar页面】
-  功能
   - 登录功能（点击任何一个实验后调用）
   - 搜索（筛选）实验列表
   - 显示实验列表（根据搜索进行条件渲染）
   - 导航到实验详情页 `/pages/detail/detail?exp={实验编号（如1051）}`
   - 底部添加反馈按钮（跳转到反馈页面）
- 说明
  - 列表向后端请求数据获取
  - 搜索使用JS条件渲染

### 2. 工具列表页 `/pages/toolList/toolList`
【TabBar页面】
-  功能
   - 导航到反馈页 `/pages/feedback/feedback`
   - 搜索（筛选）工具列表
   - 显示工具列表
   - 导航到工具页 `/pages/tools/{Tool Name}/{Tool Name}`
- 说明
  - 列表由实际准备的工具决定

### 3. 实验详情页 `/pages/detail/detail`

- 页面接受参数
  - `exp` **(必需的)** 实验序号
- 功能
  - 显示操作演示、实验流程、操作提示  
  这一过程中向服务器发送请求，返回一个json如下：
```json
{
  operate:[
    {
      type:"text",
      data:"取少量氯酸钾"
    },
    {
      type:"text",
      data:"取少量红磷"
    }
  ],
  show:"url 展示视频的url",
  tips:["同operate"]
}
```

  - 导航到已录入实验数据管理页 `/pages/expData/expData?exp={exp}`
  <!-- - 导航到可能用到的工具页 `/pages/tools/{Tool Name}/{Tool Name}` -->
  - 显示评论（在底部）
  - 导航到添加实验评价页 `/pages/commentPub/commentPub?exp={实验编号}`
- 说明
  - 操作演示、实验流程、操作提示最好为可折叠。（嫌麻烦可以使用`vant-weapp`的[**`Collapse`**](https://youzan.github.io/vant-weapp/#/collapse)组件）
  - 操作演示、实验流程、操作提示分别从后端获取。
  - 可能用到的工具名称从后端获取。
  - 实验数据录入的格式暂定为表格，字段（表头）数据从后端获取，数据组数可`±`。
  - 实验数据暂存使用微信的storage, 最好每完成一个字段就暂存以下, 或者定时暂存。
  - 实验数据提交是指向后端提交数据。
  - 评论数据从后端获取（**记得排序！**）
  - 如有可能，实现评论点赞的功能。
  - 可删除自己的评论。

### 4. 已录入实验数据管理页 `/pages/expDatas/{实验编号}`

- 功能
  - 实验数据录入，暂存，提交
  - 显示已提交的实验数据（即数据库中选出一个前人提交的数据，返回给客户端）
  - 以上两个功能可以一键切换
- 说明
  - 由于不同实验的数据差异较大，所以每个页面需要单独制作（以实验号命名）
  - 用户录完数据后，前端将其打包成一个字符串给后端（建议用JSON）
  - 用户请求数据时，服务器把上一条上传的字符串（从服务器里随机找一个）给前端，前端解析后展示屏幕上

### 5. 添加实验评价 `/pages/commentPub/commentPub`

- 页面接受参数
  - `exp` **(必需的)** 实验序号
- 功能
  - 让用户选择评分一类的东西
  - 实验评论

- 说明
  - 这个页面是一个表单
  - 要评价的内容暂未确定
  - 评分维度：指导老师姓名(input)、指导老师讲解详细(1~5)、老师是不是会回答问题(1~5)、老师给分的满意度(1~5)、你得到多少积分(input,number)

### 6. 工具页 `/pages/tools/{Tool Name}/{Tool Name}`

- 功能
  - 工具的功能
- 说明
  - 这个页面不需要登录
  - 涉及数据计算的，如复杂，给出公式。
  - 涉及数据计算的，可使用的已录入的实验数据直接计算。

### 7. 反馈页 `/pages/feedback/feedback`

- 功能
  - 基物实验程序反馈
- 说明
  - 这个页面是一个表单

*后续可能添加评论管理、后台管理页*

## UI设计规范

UI设计要所有前端统一一个基本样式（如卡片、输入框一类），并且把这个通用的页面样式写到`app.wxss`中。

强烈建议使用`vant-weapp`组件库，避免重复造轮子。虽然有的时候这组件有坑。[**文档传送门**](https://youzan.github.io/vant-weapp)

使用微信官方的`WeUI`也不错。

图标可以到`iconfont`上找，[**传送门**](https://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.4&type=1)

DarkMode可以考虑不做，但也很简单不是吗。仅需使用`theme.json`，添加一个全局字段，再使用几个三元表达式、`css`媒体查询就可以做出高大上的深色模式啦。（赶时间的话以后再做也无妨）


## 后端API

详见 [`Readme_backendAPI.md`](./utils/Readme_backendAPI.md)