前言
就目前的前端生态而言，跨端开发基本算是每一个前端开发者必备的技能点之一了，随便看看各大招聘网站上关于前端岗位的招聘要求，几乎都要小程序开发了....
另外由于Uni-app等这些跨端框架的产生，中小型企业对于Android/Ios等原生开发者的需求是越来越少了，哎....时代啊时代....
（PS:有问题的可以联系博主：Q752746873~）
概述
本文阅读时间：约5~7分钟左右；
本文重点：
- 通过本文可以了解到这个仿《通义千问》Demo小练习大概是什么样子的，涉及了什么uniapp中的哪些知识点；
另外还有一个重点，请务必注意：
写一篇博文的时候，这个Demo还没有完成，其实我是想把这个通义千问做的尽可能完善的，比如真实对接通义千问的SDK，做一些小的智能应用放在对应的模块里；
考虑到如果真的全部做完再开始写博文那么拉的周期实在太长了，为了督促我自己所以我决定放一个专栏，并通过这种订阅的方式持续对这个Demo进行迭代与升级，有兴趣的小伙伴可以订阅一下~感谢~
仿通义千问
整体项目难度：初中级；
技术栈：uni-app，Vue3，Typescript，pinia，uViewPlus等；
示意图如下：
Demo现已完成的页面其实不多，还需要后续进一步更新，通过现有的功能界面，大致可以完成的目标有两个：
- 可以 了解到uniapp在组件、通用组件，路由等上的一些开发知识，这些知识能快速帮助你入门uniapp的开发；
- 可以 了解到在uniapp的request部分，以及如何通过uniapp的request的获取到后台的数据，当然为了更好的了解request，博主这边准备了一个不涉及数据的简易node后台，通过这个后台真实还原了请求这个过程；
loading页/导航页
在很多软件中都有loading页面或者导航页这个界面，这个界面通常作用有如下几个：
- 隐私协议、用户协议的弹窗提示，很多时候如果用户想要访问app或者小程序都需要遵循用户协议、隐私协议、免责申明等，因此在这个界面上可以给首次使用的用户一个提示，只有同意了才能继续访问；
- 一些必要参数的预加载，比如用户的全局设置，一些必要的全局配置信息，本地的历史记录放入全局变量等等，这些参数需要在loading界面进行操作，只有全部处理完才允许跳转；
- 广告....很现实的东西，有些app或者小程序在预加载的时候会给用户放广告，毕竟这个界面是小程序的主入口，流量最大的地方，如果想要使用小程序，你还不得不看....^_^|||
在练习项目中大概是长这样：
涉及到的uniapp知识点：
- 页面注册；
- easycom的注册与使用；
- uniapp中页面布局；
- 自定义titleBar;
主页
主页是整个练习中的核心部分，它有四个模块组成：外部的布局组件，对话模块，智能模块，应用模块；
布局组件
布局组件是整个项目的外壳，后续使用到的对话模块，智能模块，应用模块都是被嵌套在该组件里面的，通过这个布局组件实现了基础的布局功能，大致如下图的GIF图效果：
这个组件使用到的uniapp以及Vue相关的功能点大致如下：
- uniapp中的页面布局；
- Vue中的插槽；
- 自定义titleBar，使用tabs组件代替默认的样式；
- swiper组件；
以及其他一些细节到实际组件开发中时再细说。
对话模块
这个模块是我们重点模块，这个模块基本是我们代码量最多的地方，大致GIF效果图如下：
首次对话消息
二次对话消息
在这个模块中我们大致需要实现的功能点有如下：
- 对话的列表渲染，这里包括两部分：我方文字的发送，回复消息的打字效果；
- 推荐列表在有内容/无内容时的切换；
- 打字效果时禁止我方文字输入及对应UI效果；
- 文字输入框在实际手机侧时键盘的高度问题；
- Request的封装与请求；
智能模块与应用模块
这两个模块在Demo中完全是简单的示例，在实际的通义千问APP中这两个模块是具体的智能应用，而我们没有这些智能应用，因此也只能是做一个入口的UI，没有啥实际的意义，就当练练布局吧，对接完SDK后再想想能不能利用起来；
目前在这两个模块中，最大的功能点应该就是使用了第三方的下拉刷新了...
实现的功能点：
- 使用z-paging实现了下拉刷新；
- swiper组件；
- 页面布局；
小结
本文大致介绍了一下我们这个小Demo的主体功能，期望通过这个大致的演示能看到我们这个Demo后续可能会涉及到哪些知识点；
如有问题或者日常开发中有遇到什么问题，可以私信博主或者加博主的QQ752746873，看看能不能帮你解决一下；