【开发】MBTI 答题小程序开发笔记-2

下面就正式开始做功能和页面了。

（ps：本系列文章项目来自鱼皮知识星球，感兴趣的同学可以去看看，有视频教程比我这边写得细）

React 更多用函数式组件而不是类组件，所以我们后续多用一些函数式组件。

函数式组件的优势有：

1. 简洁性

• 代码量少：函数式组件只需要编写一个函数即可，相比于类组件，代码量更少，更加简洁。这种简洁性使得代码更易于理解和维护。
• 直观性：使用函数的方式定义组件，语法简单直观，符合现代JavaScript的编程习惯。

2. 性能优化

• 执行效率高：函数式组件没有实例化的过程，执行效率更高。此外，由于其简洁性和朴实性，在渲染性能上通常也优于类组件。
• 减少不必要的渲染：结合React的Hooks（如useMemo、useCallback等），可以进一步优化性能，避免不必要的组件渲染。

3. 易于复用

• 组件复用：函数式组件易于复用，可以在多个地方使用相同的组件函数。此外，由于函数式组件的简洁性，它们也更容易被封装成可复用的模块。
• 逻辑复用：通过自定义Hooks，可以将常用的业务逻辑封装起来，在多个组件之间共享，提高了代码的可重用性。

4. 易于测试

• 纯函数特性：函数式组件是纯函数，只依赖于输入的props，不依赖于组件的实例状态或生命周期方法，因此更容易编写测试用例。
• 隔离性：由于函数式组件的简洁性和无状态性，它们通常具有更好的隔离性，有助于进行单元测试或集成测试。

5. Hooks支持

• 功能强大：React Hooks是React 16.8版本中引入的新特性，使得函数式组件也能够轻松地使用状态（如useState）和其他React特性（如useEffect、useContext等），极大地增强了函数式组件的功能。
• 灵活性：Hooks的引入使得函数式组件在功能上更加灵活和强大，能够处理以前只能在类组件中处理的任务。

6. 可组合性

• 函数式特性：函数式组件作为朴实的函数，能够像其他函数一样被组合和复用。这种可组合性使得组件更加模块化，提高了代码的可维护性和可扩展性。

1 开始

1.1 创建函数式组件

右键文件夹，New 创建一个 React 函数式组件

出来一个文件，是函数式组件的模板，把它粘贴到我们主页的代码里，这里使用 default 改成了匿名的。

 1.2 小程序全局调整

这个json文件用于调整微信小程序右上角的功能

  ==> 

这个config.ts文件是调整小程序诸如标题等项目的，是全局的。

  ==> 

而每个页面的文件夹里又有自己局部的 config.ts 文件，如果在里面设置了标题，可以覆盖全局标题，但如果局部不设置或为空，则自动显示为全局的标题。

2 前端

2.1 HTML

我们在写前端的时候先写 HTML，再写样式，框架比美观重要。

大部分的架构都能用现成的组件完成，比如标题、文段、按钮等，可以直接到文档里找。

下面是引入图片的操作：（注意是图片路径应该是 jpg）

效果如下

2.1.1 全局底部栏

有时候，我们可能需要在整个程序的底部持续显示一些提示文字，起到像水印一样的作用。这时候就可以自己写一些组件，可以很方便地调用到任何页面。

主页引入GlobalFooter组件之后就可以看到这行文字显示在主页下方。

这里调整.scss文件，调样式，让这段文字在底部居中。

微信小程序开发可以像网页一样调试，调试成自己想要的效果后，再复制到我们的代码中，很方便：

2.2 样式调整

给组件起一些类名，方便调样式。

样式及效果图：

2.2.1全局样式调整

到这里，主页的展示就很完美了。