前言
就目前的前端生态而言,跨端开发基本算是每一个前端开发者必备的技能点之一了,随便看看各大招聘网站上关于前端岗位的招聘要求,几乎都要小程序开发了....
另外由于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,看看能不能帮你解决一下;