1. 先简单看看项目吧

时间:2024-04-13 16:14:13

前言

就目前的前端生态而言,跨端开发基本算是每一个前端开发者必备的技能点之一了,随便看看各大招聘网站上关于前端岗位的招聘要求,几乎都要小程序开发了....

另外由于Uni-app等这些跨端框架的产生,中小型企业对于Android/Ios等原生开发者的需求是越来越少了,哎....时代啊时代....

(PS:有问题的可以联系博主:Q752746873~)


概述

本文阅读时间:约5~7分钟左右;

本文重点:

  • 通过本文可以了解到这个仿《通义千问》Demo小练习大概是什么样子的,涉及了什么uniapp中的哪些知识点;

另外还有一个重点,请务必注意:

写一篇博文的时候,这个Demo还没有完成,其实我是想把这个通义千问做的尽可能完善的,比如真实对接通义千问的SDK,做一些小的智能应用放在对应的模块里;

考虑到如果真的全部做完再开始写博文那么拉的周期实在太长了,为了督促我自己所以我决定放一个专栏,并通过这种订阅的方式持续对这个Demo进行迭代与升级,有兴趣的小伙伴可以订阅一下~感谢~


仿通义千问

整体项目难度:初中级;

技术栈:uni-app,Vue3,Typescript,pinia,uViewPlus等;

示意图如下:

Demo现已完成的页面其实不多,还需要后续进一步更新,通过现有的功能界面,大致可以完成的目标有两个:

  1. 可以 了解到uniapp在组件、通用组件,路由等上的一些开发知识,这些知识能快速帮助你入门uniapp的开发;
  2. 可以 了解到在uniapp的request部分,以及如何通过uniapp的request的获取到后台的数据,当然为了更好的了解request,博主这边准备了一个不涉及数据的简易node后台,通过这个后台真实还原了请求这个过程;

loading页/导航页

在很多软件中都有loading页面或者导航页这个界面,这个界面通常作用有如下几个:

  1. 隐私协议、用户协议的弹窗提示,很多时候如果用户想要访问app或者小程序都需要遵循用户协议、隐私协议、免责申明等,因此在这个界面上可以给首次使用的用户一个提示,只有同意了才能继续访问;
  2. 一些必要参数的预加载,比如用户的全局设置,一些必要的全局配置信息,本地的历史记录放入全局变量等等,这些参数需要在loading界面进行操作,只有全部处理完才允许跳转;
  3. 广告....很现实的东西,有些app或者小程序在预加载的时候会给用户放广告,毕竟这个界面是小程序的主入口,流量最大的地方,如果想要使用小程序,你还不得不看....^_^|||

在练习项目中大概是长这样:

涉及到的uniapp知识点:

  • 页面注册;
  • easycom的注册与使用;
  • uniapp中页面布局;
  • 自定义titleBar;

主页

主页是整个练习中的核心部分,它有四个模块组成:外部的布局组件对话模块智能模块应用模块

布局组件

布局组件是整个项目的外壳,后续使用到的对话模块,智能模块,应用模块都是被嵌套在该组件里面的,通过这个布局组件实现了基础的布局功能,大致如下图的GIF图效果:

这个组件使用到的uniapp以及Vue相关的功能点大致如下:

  • uniapp中的页面布局;
  • Vue中的插槽;
  • 自定义titleBar,使用tabs组件代替默认的样式;
  • swiper组件;

以及其他一些细节到实际组件开发中时再细说。

对话模块

这个模块是我们重点模块,这个模块基本是我们代码量最多的地方,大致GIF效果图如下:

首次对话消息

二次对话消息

在这个模块中我们大致需要实现的功能点有如下:

  1. 对话的列表渲染,这里包括两部分:我方文字的发送,回复消息的打字效果;
  2. 推荐列表在有内容/无内容时的切换;
  3. 打字效果时禁止我方文字输入及对应UI效果;
  4. 文字输入框在实际手机侧时键盘的高度问题;
  5. Request的封装与请求;

智能模块与应用模块

这两个模块在Demo中完全是简单的示例,在实际的通义千问APP中这两个模块是具体的智能应用,而我们没有这些智能应用,因此也只能是做一个入口的UI,没有啥实际的意义,就当练练布局吧,对接完SDK后再想想能不能利用起来

目前在这两个模块中,最大的功能点应该就是使用了第三方的下拉刷新了...

实现的功能点:

  1. 使用z-paging实现了下拉刷新;
  2. swiper组件;
  3. 页面布局;

小结

本文大致介绍了一下我们这个小Demo的主体功能,期望通过这个大致的演示能看到我们这个Demo后续可能会涉及到哪些知识点;

如有问题或者日常开发中有遇到什么问题,可以私信博主或者加博主的QQ752746873,看看能不能帮你解决一下;