写在前面 Preface
项目背景：在几个G厂老师的指导下完成的一个小小的非工作项目，体量小，但团队前前后后折腾了几个月。内容涉及小程序开发、LangChain、语言模型、AI交互等，我在团队里承担的角色主要是前端的用户界面交互设计以及写两个界面的代码，算是整个组里最简单的部分了，后端是真的难。出于保密，这里不会分享相关开发成果的信息，只记录项目技术部分。
涉及软件：Figma、Gerrit、Jira、VScode、微信小程序开发者工具
微信小程序开发【科普】
我们的项目整体代码并不复杂，所以参考了这个视频【2024最新版微信小程序项目实战，微信小程序开发教程！】 简单了解了一些基础知识就可以直接上手操作了。
-
- 什么是微信小程序：在微信内部运行的轻量级应用
- 后端（接口）
- Python-Django、flask、fastapi框架
- Java-SSH、ssm、SpringBoot框架
- Go-Gin、Beego框架
- （大）前端
- Web端：html、css、js
- App：Java、object C
- 微信小程序：wxml、wmss、JavaScript
- 桌面端：qt平台（python、C++）
界面设计 Interface Design
设计前须知及原则
作为微信热门功能，小程序几乎每天都会用到，但作为开发者从0到1开始设计，还是有些基本原则和特殊点需要去注意。以下这些原则是设计任何类型的小程序都需要遵循的：
-
-
- 界面布局要简单清晰,避免过于复杂的设计。
- 页面跳转和交互动作要流畅自然，减少用户的操作步骤。
- 遵循微信小程序的设计规范和交互习惯，与微信生态保持一致性。
- 优化小程序在移动端的浏览体验，考虑不同尺寸屏幕的适配。
- 利用文字、图标、图片等视觉元素合理表达信息。
- 优化页面加载速度，提高响应性能。
- 合理使用动画效果，增强交互体验。
-
小程序比较好的一点是，它会根据运行的操作系统自动适配界面样式，如字体、按钮、导航栏等。开发者无需针对不同系统单独设计界面，可以保持整体设计的一致性。小程序里的尺寸单位是 rpx，也可以根据屏幕的宽度进行自适应。
设计阶段
只需要搞明白几个概念即可。
- 交互设计：设计小程序的界面布局、操作流程和交互方式，确保用户能够轻松上手并享受良好的使用体验。
- 视觉设计：根据交互设计稿，进行视觉设计，包括颜色、字体、图标等元素的选择和搭配，打造具有品牌特色的视觉风格。
- 原型制作：使用原型设计工具（如Axure、Mockplus等）制作小程序原型，方便团队成员理解和沟通。
小程序基础架构
如果要打造一个完整的小程序，则会包括导航栏、标签栏、启动加载页、弹框、字体、按钮、图标等等，基本上按需取用即可。
实战阶段
由于我们的功能也页面实在过于简单，所以我把交互设计、视觉设计和原型设计都在Figma上打包一起做了，涉及到的只有字体、按钮、图标、加载页等非常简单的框架。所以，在确认好颜色、尺寸、找好开源免费的图标和字体后就进入了下一步。
界面代码编写 Fronted-Coding
准备工作
一开始需要在Jira上领取属于自己的Tickets，好让团队其他人知道自己的任务以及开发进度。在设计小程序页面之前，需要下载稳定版本微信小程序开发者工具。安装好后首页是这样的。
我因为有现成的项目框架包，就直接导入了。成功导入后一开始需要熟悉整个页面的配置以及程序目录结构。
熟悉基础概念
1、WXML（WeiXin Markup Language）是微信小程序中使用的一种标记语言。它类似于 HTML，用于描述小程序的结构和布局。wxml主要用于定义小程序的界面元素，包括文本、图片、按钮等。
WXML 的主要特点：
-
- 简洁易用：WXML 语法简单，容易上手，适合开发者快速构建小程序界面。
- 数据绑定：支持数据绑定，可以动态展示数据，提升用户体验。
- 组件化：支持自定义组件，便于复用和维护代码。
- 与 JS 结合：通常与 JavaScript 结合使用，通过 JS 控制逻辑和交互。
2、WXSS（WeiXin Style Sheets）是微信小程序中使用的样式表语言，类似于 CSS（Cascading Style Sheets）。它用于描述小程序的视觉样式和布局。
WXSS 的主要特点：
-
- 样式扩展：WXSS 支持 CSS 的大部分功能，并在此基础上增加了一些扩展特性，例如尺寸单位的支持。
- 响应式设计：支持视窗单位（如 rpx），可以根据屏幕宽度自适应布局，适合不同设备。
- 模块化：样式可以在不同的文件中定义，便于组织和维护。
- 支持变量：可以使用全局样式变量，方便统一管理和修改样式。
3、JS是主要用来处理逻辑和功能。
4、JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。JSON 是基于文本的格式，常用于在客户端和服务器之间传递数据。主要功能就是配置。
JSON 的主要特点
-
- 易读性：JSON 结构简单，格式清晰，便于人类理解。
- 语言独立：虽然 JSON 源于 JavaScript，但它是语言无关的，许多编程语言都支持 JSON 格式的解析和生成。
- 数据结构：支持基本的数据类型，如字符串、数字、布尔值、数组和对象。
- 广泛使用：由于其简单性，JSON 被广泛用于 Web 应用程序的数据交换。
JSON 的基本语法
-
- 对象：由 {} 包裹，包含键值对，例如：{“name”: “Alice”, “age”: 25}
- 数组：由 [] 包裹，包含值的有序集合，例如：[1, 2, 3, “apple”, false]
- 键值对：键是字符串，值可以是任意数据类型。
具体开发
1、加载页
在微信小程序中，加载页的实现主要依靠配置文件和wxml代码。加载页通常包含一张 PNG 图片和小程序的名称，需要调整logo的大小以及字体的大小颜色等。
2、首页
我的首页只包括一张图片以及跳转至下一页的Button，所以代码也并不复杂。
遇到的问题及解决方式
如果在编译的时候，终端提示调试器加载错误。那么从任务栏打开工具可能导致该问题，请不要从任务栏启动工具，将工具栏的微信小程序开发者工具取消固定，并重新开启后，重新设置就可以连接了。
调试与协作 Debug&Teamwork
最后代码写完，我们需要在Geritt里面把整体框架拉下来放在VScode里，然后再把自己写的代码转移到VScode上。所有的工作完成之后就需要把代push到Geritt上，让大家review。做到这一步的时候我这边出了很多问题。我总是没有办法将代码库push成功，所以就在每周的会议上向大家求助了。
那天早上大家花费了一个多小时宝贵的时间帮助我，也是在那次会议上我真切感受到了teamwork的力量。最后解决问题的方式我也觉得非常有意思。通常我在写代码遇到bug的时候，经常会怀疑自己这个bug真的能这样修复吗？都没有尝试，心里就先动摇了，最后甚至会放弃。但是那天靠着团队成员的帮助，我们真的一步一步地把我认为不可能的事情解决了。我不仅受到了被帮助的感觉，也感受到了计算机是一个如此理性的东西，只要去学、理解、认真跟着步骤去完成，那么问题真的能解决。我想这种解决问题的态度我会受用终身。