MBTI性格测试小程序项目

MBTI 性格测试小程序

Github地址：https://github.com/chuanshanh/jhxdada

零、放在前面

一些介绍：

• 是鱼皮的一个项目的第一阶段，做一个性格测试的小程序，为后面的AI答题应用平台做准备
• 由于算法设计比较简单，可以直接放在前端，所以没有后台
• 通过三个核心页面的开发学习了前端React的基于Taro的基本开发流程：界面—-样式—-逻辑
• 还有小程序开发过程中常见问题的解决：主要是小程序开发者工具的重载
• 体验了CodeGeex这一AI开发工具：偶尔的代码自动补全是管点用的，但是问答能力还是不如GPT，对提示词要求还蛮高的。

一、MBTI 性格测试应用介绍

参考项目：https://www.16personalities.com/ch

大致可以分为主页、答题页面、结果页面三个主要的页面

二、MBTI 实现方案介绍

核心：题目、用户答案、评分规则

1、题目结构：

采用JSON格式，相比于拿选项作为key,每个选项单独存储在options里，方便进行扩展，并且更加灵活，可以进行排序。

[
    {
        "title": "你通常更喜欢",
        "options": [
            {
                "result": "I",
                "value": "独自工作",
                "key": "A"
            },
            {
                "result": "E",
                "value": "与他人合作",
                "key": "B"
            }
        ]
    }
]

2、用户答案结构

用一个数组进行存储，而不是放在刚才的题目结构里，不需要传递完整的题目结构，大大节约了空间

["A","A","A","B","A","A","A","B","B","A"]

3、评分规则

参考：https://zh.wikipedia.org/wiki/邁爾斯-布里格斯性格分類法

MBTI将心理差异分类为4个对立的组合（或称“二分法”），一个人在每个组合中各拥有1个偏好[7]：

• 内向与外向（I/E）
• 实感与直觉（S/N）
• 思考与情感（T/F）
• 判断与感知（J/P）

那么，每道题目会对应一个组合，选项来判断是其中的哪一个，然后根据所有结果的数量，对16种结果进行计数（含有这一字母的加一分），得分最高的就是结果。

例子：

给每个选择的答案对应设置一个 属性。简单举例，比如

• 第一题 A 对应 I，B 对应 E
• 第二题 A 对应 E，B 对应 I
• 第三题 A 对应 S, B 对应 N
• 第四题 A 对应 T, B 对应 F
• 第五题 A 对应 P, B 对应 J

那么如果用户选择了 [A,B,A,A,A]，可以算出用户有两个 I，一个 S ，一个 T 一个 P，很明显他是 ISTP 人格。

评分结果JSON结构：

[
  {
    "resultProp": [
      "I",
      "S",
      "T",
      "J"
    ],
    "resultDesc": "忠诚可靠，被公认为务实，注重细节。",
    "resultPicture": "icon_url_istj",
    "resultName": "ISTJ（物流师）"
  },
  {
    "resultProp": [
      "I",
      "S",
      "F",
      "J"
    ],
    "resultDesc": "善良贴心，以同情心和责任为特点。",
    "resultPicture": "icon_url_isfj",
    "resultName": "ISFJ（守护者）"
  }
]

三、MBTI 小程序 Demo 数据

四、Taro 跨端小程序开发入门

环境准备：node:18.16.0 npm:9.5.1(原先：node:14.21.3, npm:8.1.2)

nodejs:

nvm list查看已安装版本

nvm install 16.13.0安装某个版本

nvm use 18.16.0使用某个版本

npm:

npm install -g npm@9.5.1

Taro下载：

Taro默认下载的是最新版本，最好还是指定版本下载

解决：npm install -g @tarojs/cli@3.6.28

Tato下载好后无法查看版本，报错无法识别taro

解决：在环境变量的Path中增加D:\nodejs\node_global

初始化Taro框架：

前端采用React，组件库采用Taro UI

终端：npm install 配置依赖，运行npm run build:weapp – –watch

微信开发者工具打开项目：主要关注预览效果和编译报错

配置项目开发规范：

eslint:校验JS代码，给语法提示；

typescript:校验语法，给语法提示

prettier:代码美化工具，快速格式化代码

当eslint和prettier发生冲突时，在eslint的配置文件里忽略掉它的对应的检查

测试组件Taro UI引入，来上手开发页面：

在app.ts即入口文件中全局引入：

import ‘taro-ui/dist/style/index.scss’ // 引入组件样式 - 方式一

然后尝试引入一个 taro-ui 组件。

前端经典开发顺序：页面—样式—逻辑（比如JS交互）

开发示例页面：

1）找到应用全局配置文件 app.config.ts，新增页面路由（最上面的是打开默认的页面）

2）复制已有页面文件，创建新页面

3）根据自己的需要，复制组件，拼出完整页面

4）根据自己的需求，定制开发

5）演示页面之间的跳转：页面跳转（查https://taro-docs.jd.com/docs/router#路由跳转**）**

五、MBTI 跨端小程序开发实战

1.全局规范和配置：

遵循函数式组件的写法：

export default () => {
  return (
    <View className="index">
      <Text>Hello world!</Text>
    </View>
  );
};

修改应用标题：

修改app.config.ts全局配置文件里的title

export default defineAppConfig({
  pages: [
    'pages/index/index'
  ],
  window: {
    backgroundTextStyle: 'light',
    navigationBarBackgroundColor: '#fff',
    navigationBarTitleText: 'MBTI 性格测试',
    navigationBarTextStyle: 'black'
  }
})

2.主页:先做内容，再把内容抽象成对象来增加样式

在app.scss里全局修改按钮主题色：

.at-button--primary{
  background: #806497;
  border-color: #806497;
}

主页核心页面代码：

/**
 * 主页
 */
export default () => {
  return (
    <View className="indexPage">
      <View className="at-article__h1 title">MBTI性格测试</View>
      <View className="at-article__h2 subTitle">
        只需2分钟，就能非常准确地描述出你是谁，以及你的性格特点
      </View>
      <AtButton type="primary" circle className="enterBtn">
        开始测试
      </AtButton>
      <Image
        className="HeaderBg"
        style="width: 400px;height: 400px;"
        src={HeaderBg}
      />
      <GlobalFooter />
    </View>
  );
};

主页核心样式代码：

.indexPage{
  background: #A2C7D7;
  height: 93vh;
  .title{
    color:white;
    padding-top: 48px;
    text-align: center;
  }
  .subTitle{
    color:white;
    margin-bottom: 48px;
  }

  .enterBtn{
    width: 60vw;
  }

}

3.答题页面

开发步骤：

1）先写页面：

包括题目（序号+题目内容），选项（key+value）,切题按钮（下一题，查看结果，上一题）

2）再调整样式：

字体大小，按钮样式位置

3）最后再写逻辑（上一题、下一题）

先控制是否展示按钮

控制切换，切换不同的题目和答案（useEffect），设定必须选了才能到下一题

记录答案（JSON输出验证）

4、查看结果页面

1）先写页面：包含两个文字（resultName和resultDesc），一个按钮

2)实现三个页面之间的跳转（通过给按钮增加时间，另外，从结果跳转到主页要使用reLauch,防止页面的无限增加）

<AtButton
        type="primary"
        circle
        className="enterBtn"
        onClick={() => {
          Taro.navigateTo({
            url: '/pages/doQuestion/index',
          });
        }}
      >
        开始测试
      </AtButton>
<AtButton
        type="primary"
        circle
        className="enterBtn"
        onClick={() => {
          Taro.reLaunch({
            url: '/pages/index/index',
          });
        }}
      > 
	      返回主页
      </AtButton>

5、评分模块实现

可以根据AI工具CodeGeex尝试进行生成

有两种算法实现：

1.先把answerList转化为对应的人格列表optionCount（比如I，S，T，J）遍历所有question_result,然后遍历optionCount，有里面的字母就加1，看最终哪个得分最高

2.提前统计optionCount里各个字母的数量，然后遍历所有question_result，直接获得得分，将最高分的结果返回

6、页面间数据传递

方法 1：url params

https://taro-docs.jd.com/docs/apis/route/navigateTo

比如：result?answerList=[A,B,C]1826449162109644801_0.9446173137808922

方法 2：全局状态

https://taro-docs.jd.com/docs/context#contextprovider

方法 3：本地数据存储（推荐，较为简单）1826449162109644801_0.10902648018201178

https://taro-docs.jd.com/docs/apis/storage/setStorageSync

采用方法3，在做完题目点击按钮，跳转前对answerList进行本地数据存储，然后在查看结果页面使用数据，注意特殊判断结果是否为空，是的话使用Toast进行保存

PS：遇事不决 3 件套：清理工具缓存、重启项目、重启开发者工具。

六、小程序开发常用解决方案

1、小程序调试发布

需要正式的 appId（到微信小程序官方申请），开发前多去看看微信小程序官方文档的审核要求。

1）执行 build 命令打包代码

删除 dist 目录，清理开发者工具缓存，执行 build:weapp，再次运行，验证效果。

小程序发包有限制，一定要用 build 去构建，体积更小。

2）有了正式的 AppId（测试号也可以）后，可以真机调试。

3）在微信小程序开发工具上传代码

2、网络请求

请求库

主流的网络请求库是 Axios，但是小程序环境中无法直接使用 Axios。

推荐使用适配器库：https://github.com/bigmeow/taro-platform/tree/master/packages/axios-taro-adapter

请求代码生成

传统开发方式：每一个请求写一个发送请求的代码

更高效的开发方式：根据后端 OpenAPI 规范的接口文档（比如 Swagger）自动生成请求，推荐：https://www.npmjs.com/package/@umijs/openapi

全局请求处理器

可以自己定义请求的全局参数、增加全局请求处理器、响应处理器等，参考 Axios 文档：https://axios-http.com/docs/instance 。

3、状态管理

多个页面（整个应用）共享变量，当变量发生变化时可以触发界面更新等。

创建一个全局 JS 变量、或者利用小程序存储能力（Storage）共享变量即可。

使用 Redux 的工具库实现全局状态管理：https://react-redux.js.org/tutorials/quick-start

4、用户登录

小程序登录原理

理论上用户打开小程序就可以自动登录，不需要自己点按钮，只不过获取不到昵称和头像罢了。

所有 wx 小程序的原生函数在 Taro 几乎都有对应的接口，比如 Taro.login == wx.login。

https://docs.taro.zone/docs/apis/open-api/login/

怎么存储 session 和携带 cookie 信息？

相比于 web 开发，小程序除了可能要维护已登录用户信息外，还要自己额外维护 cookie。

可以通过全局请求响应拦截器，登录响应后自动设置 Cookie 到本地存储、发请求时自动取出 Cookie 并设置到请求头中。

5、开发规范

编写 typescript 数据模型，可以利用编辑器自动提示和校验，提升规范性。

可以利用 CodeGeex 智能编程助手，根据示例数据自动生成 TypeScript 类型。