![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
uni-app社区交友APP开发实战
文章平均质量分 97
详细讲解了使用uni-app开发社区交友APP的全过程,前端使用uni-app,后端以DRF作为数据接口,实现前后端分离,覆盖所有核心知识点,可以作为入门和深入学习的重要学习资料。
AI码东道主
双一流电子信息硕士毕业,现央企搬砖人,爱折腾的数据安全+AI探索者,主业研究NLP、深度学习应用到数据安全,业余探索多种副业,包括RPA、AI文章写作、AI公众号爆文、爬虫、CSDN知识付费等副业项目,有志同道合、一起努力的伙伴可以戳我交流。
展开
-
uni-app实战之社区交友APP(20)兼容处理和打包上线
文章列表和话题列表可以隐藏滚动条;APP更新打包可以选择整包升级和热更新,文件格式不同;APP打包上线需要进行配置,包括基础、图标、启动页面和模块等配置,打包需要选择证书。编译到小程序时,首页、消息页等需要自定义导航栏;小程序分享通过onShareAppMessage生命周期实现;通过条件编译实现小程序隐藏版本更新。通过button实现微信小程序登录,后端实现小程序登录逻辑;打包上线需要配置appid、安全域名、压缩项目;支付宝小程序在图标等方面存在兼容性问题,发布小程序;登录需要获取公钥私钥和权限。原创 2021-04-03 21:44:23 · 788 阅读 · 2 评论 -
uni-app实战之社区交友APP(19)个人空间和聊天交互实现
个人空间页获取用户基本信息,后端提供数据接口;获取个人空间的交互数据和帖子列表;实现判断用户和拉入黑名单。聊天模块封装都在Vuex中完成:聊天时需要先开启websocket;客户端id和用户进行绑定避免恶意连接;接收和发送的消息都会保存到本地缓存,聊天列表和聊天详情分别存储,同时消息需要组织数据格式;发送消息也需要组织数据格式。聊天会话列表需要渲染列表数据、初始化登录状态和更新未读数;聊天历史记录需要获取聊天记录并渲染,同时需要开启和关闭监听;发送消息直接调用全局方法实现即可;消息页实现清除聊天记录。原创 2021-03-30 16:43:51 · 899 阅读 · 0 评论 -
uni-app实战之社区交友APP(18)文章发布和朋友列表交互实现
发帖子需要实现选择话题,跳转到话题页选择;通过接口获取文章分类再选择;多图上传选择先选图、在提交发布文章时再真正上传,减少服务器压力;验证并发布文章。评论列表展示需要实现无限极分类。实现给文章添加以及评论和二级评论。获取关注用户的最新文章列表,实现后端接口和前端交互;我的好友列表包括互关列表、关注列表和粉丝列表;搜索用户需要格式化用户数据。实现APP热更新,在APP加载和点击关于页面时触发;新建浏览历史页面,common-list组件在进入详情页时将文章加入列表,可以从浏览历史访问文章和清空浏览历史。原创 2021-03-24 19:15:08 · 758 阅读 · 0 评论 -
uni-app实战之社区交友APP(17)账号模块和文章列表实现
我的页面通过Vuex修改登录状态和保存用户信息到缓存;实现手机号验证码和用户名密码登录两种方式;启动APP时初始化用户登录状态来保持登录状态;退出登录需要修改登录状态、清除登录信息,并调整显示内容;第三方登录包括微信、QQ和微博登录,使用uni.login接口实现。搭建修改账号与安全页面;新建页面实现绑定手机功能;实现修改密码交互;实现绑定邮箱功能;实现第三方账号的绑定与登录。修改头像需要上传图片;实现修改用户信息功能。在文章列表和详情页面实现关注;获取用户交互数据;在文章列表和详情页面实现顶踩功能。原创 2021-03-20 17:29:12 · 668 阅读 · 0 评论 -
uni-app实战之社区交友APP(16)模块封装、文章和话题功能实现
Vuex是Vue全局变量和方法的管理器,uni-app内置,可以定义state和mutations;点赞评论等操作需要验证权限;将接口请求模块进行封装、简化代码。首页交互需要获取文章分类、所有分类下的文章、上拉加载更多、避免重复加载;封装请求错误处理逻辑;格式化显示文章时间。实现文章详情页交互;分享支持微信、QQ、微博或者微信朋友圈;搜索文章需要实现加载拉刷新和缓存搜索历史。话题页涉及的接口包括话题分类、轮播图和热门话题列表;实现话题分类交互和加载更多;话题详情页包括话题信息和文章列表;实现搜索话题。原创 2021-03-13 17:13:55 · 1400 阅读 · 0 评论 -
uni-app实战之社区交友APP(15)聊天功能开发和后端API部署
APP版本更新对应数据表为update;序列化进行验证,视图判断是否是最新版本,并i定义路由。聊天模块对应数据表为message;序列化验证字段,视图中进行判断并创建消息,并定义路由。服务器部署接口代码时,需要生成依赖库、导出测试数据,通过宝塔面板将代码和.sql文件上传到服务器,使用Python项目管理器创建项目,并在面板安全栏和云服务控制台安全组中放行相应端口,在settings.py中配置静态资源目录并进行域名映射和Nginx配置,为了安全需要安装SSL;DRF可以自动生成文档,配置并设置路由。原创 2021-03-07 18:42:06 · 1728 阅读 · 2 评论 -
uni-app实战之社区交友APP(14)用户交互模块开发
编辑图片需要进一步完善图片上传序列化,实现多图上传和单图上传;修改用户信息不保证每个字段都为必填;修改密码有很多验证规则,包括两次新密码是否相同等。黑名单模块数据表为blacklist表;开发加入黑名单接口;移出黑名单和加入黑名单是相反的操作。粉丝模块数据表为follow表,建立自关联的多对多关系;关注用户接口和加入黑名单接口类似;取消关注和移出黑名单实现类似;互关列表是粉丝列表和关注列表的交集;粉丝和关注列表通过差集列表得出。用户反馈模块为feedback表;开发用户反馈接口;开发获取反馈列表接口。原创 2021-02-25 16:57:27 · 674 阅读 · 1 评论 -
uni-app实战之社区交友APP(13)搜索和用户交互功能开发
将用户行为独立到operation,搜索模块继承自APIView,以标题为关键字开发搜索话题API,使用模糊查询;以标题为关键字开发搜索文章API;以用户名为关键字开发搜索用户API,并进行封装;附加功能独立到addon,开发广告模块API。绑定手机API开发需要判断登录类型和手机号是否存在;绑定邮箱和绑定手机类似;绑定第三方账号业务逻辑相对简单。用户点赞数据表为support;顶踩接口开发;当前用户每篇文章顶踩情况接口完善。用户评论数据表为comment;评论接口开发;获取当前文章评论列表接口开发。原创 2021-02-23 21:10:41 · 779 阅读 · 1 评论 -
uni-app实战之社区交友APP(12)文章和话题API开发
创建post app来保存文章、话题等,文章与话题为多对多关系;文章分类API开发重写list方法;话题分类API开发重写list方法。话题与话题分类为多对一关系;获取热门话题API重写list方法;指定分类话题列表API开发可以定义方法并进行路由映射,并实现分页。文章模块涉及文章表、图片表和关联表;多图上传API需要验证手机号、配置文件保存路径;发布文章需要关联图片列表、自定义序列化和视图;获取文章详情API使用Retrieve;指定话题和分类文章列表API开发;指定用户的公开和所有文章API开发。原创 2021-02-21 13:26:52 · 1077 阅读 · 0 评论 -
uni-app实战之社区交友APP(11)API环境搭建和登录API开发
后端测试环境需要选择云服务器、申请域名和配置;API调试工具可以选择Postman;后端采用DRF,IDE为PyCharm;数据库管理使用Navicat;创建项目并运行;MySQL数据库创建和配置。登录主要涉及user、userinfo和user_bind表;同意封装异常类接口;实现用户验证;封装基础列表。手机验证码API开发;对接第三方短信发送平台实现短信发送;手机号验证码登录API开发;账号密码登录API开发;第三方登录API开发;装饰器实现权限验证、手机号绑定和是否禁用判断;退出登录API开发。原创 2021-02-16 18:12:38 · 3718 阅读 · 4 评论 -
uni-app实战之社区交友APP(10)登录、个人空间开发和动画优化
开发登录页,并配置顶部返回图标;构建登录页UI;实现验证码登录和账号密码登录切换;对登录表单进行验证,包括未输入禁用按钮、限制验证码点击频率、验证手机号码格式等;第三方登录使用接口。个人空间入口为帖子头像;开发头部组件;个人空间选项卡包括主页、帖子和动态;实现点击选项卡内容动态切换;实现点击右上角菜单按钮弹出操作菜单。通过接口获取缓存信息和清除缓存;新建JS文件用于保存全局配置和工具函数,同时在main.js中挂载;使用接口来获取和监听网络状态;用工具函数实现热更新;给帖子列表和消息列表添加动画效果。原创 2021-02-06 17:58:04 · 1145 阅读 · 2 评论 -
uni-app实战之社区交友APP(9)我的页面开发
个人中心页面需要配置导航栏标题、菜单按钮等;个人中心需要实现顶部个人信息栏、互动信息栏、广告位、浏览历史、社区认证和审核帖子,使用uni-list-item组件;设置页入口是个人中心页面。修改密码页面入口在设置页;需要验证后两次密码相同;修改邮箱页面入口也是设置页,需要验证邮箱格式。编辑资料页也使用uni-list-item实现;修改头像使用图片上传接口实现;修改昵称使用输入框,修改性别、情感和职业使用接口;修改生日使用picker组件;城市选择使用三级联动城市选择器。开发帮助反馈页面;开发关于页面。原创 2021-02-04 19:53:44 · 3771 阅读 · 7 评论 -
uni-app实战之社区交友APP(8)搜索列表页和文章详情页开发
不同页面的搜索类型不同,通过标识加以区别,搜索页完善搜索类型和占位符;根据不同的搜索类型搜索不同的内容,通过页面传递的搜索类型来实现。帖子详情页配置右上角的菜单按钮,入口是公共列表;使公共列表组件兼容到帖子详情页头部,实现复用,给评论和分享按钮添加点击事件;在详情页实现关注和顶踩功能;给帖子数据增加content和images字段,显示在父组件中;评论输入框参考聊天页输入框,将输入框抽离成组件;评论列表组件使用官方模板;分享功能使用uni-popup组件实现,从底部弹出,封装为组件,实现多种分享接口。原创 2021-02-02 20:39:08 · 1122 阅读 · 0 评论 -
uni-app实战之社区交友APP(7)消息页开发
消息列表页面开发,配置好友和菜单按钮;实现消息列表项,用uni-badge实现新消息提示,处理文字溢出,用时间处理库和过滤器处理时间,封装为组件;配置下拉刷新和无数据页面;下拉弹出层使用uni-popup,需要添加点击事件。我的好友列表页需要配置动画、取消返回等;导航栏包括互关、关注和粉丝3个选项;好友列表可以复用首页列表;用uni-badge组件显示性别图标;封装好友列表组件并优化。聊天页面配置按钮;实现底部聊天输入框;聊天消息列表用scroll-view组件实现;封装聊天列表组件;完善聊天页功能。原创 2021-02-01 18:27:21 · 773 阅读 · 2 评论 -
uni-app实战之社区交友APP(6)动态页开发
动态页包括顶部导航栏、关注列表和话题列表,顶部导航栏需要自定义,需要完善样式、禁止原生导航栏,并添加点击事件。关注和话题页面也是通过swiper嵌套scroll-view实现;导航栏和列表的联动通过tabIndex关联;实现顶踩、关注和上拉加载功能。热门分类包括标题、跳转按钮和关键词等部分,需要封装为组件;实现搜索框,轮播图用swiper组件实现;话题列表封装为组件;话题分类页从热点分类进入。话题详情页需要传递数据;开发话题介绍组件,进行封装;开发精华帖子列表;列表选项卡包括默认和最新;上拉加载更多。原创 2021-01-30 19:44:56 · 871 阅读 · 2 评论 -
uni-app实战之社区交友APP(5)搜索和发布页开发
搜索页可以根据关键字搜索,通过生命周期和接口实现,还包括搜索历史,可以输入和点击关键词;根据关键词显示搜索结果。发布页需要自定义导航栏设置权限,需要使用uni-app官方提供的组件;文本输入框使用textarea;底部操作条包括选择分类、添加话题、选择图片和发布按钮,需要设置尺寸和添加动画效果;图片上传用官方模板提供的上传接口并进行修改即可,通过消息传递实现;删除图片需要添加图标并绑定事件;保存草稿使用生命周期onBackPress实现,通过缓存保存编辑内容,通过消息传递、ref和计算属性等方式实现。原创 2021-01-28 18:12:56 · 2974 阅读 · 1 评论 -
uni-app实战之社区交友APP(4)首页开发
pages.json配置app-plus,定义搜索框和发帖按钮;实现头像、昵称和关注按钮;实现发帖标题、点赞、评论和分享;将CSS样式提取到公共的CSS文件,将列表项封装为组件。添加全局分割线组件,组件中直接使用;实现点击关注和其他按钮的动画特效;组件需要定义接口,通过绑定事件实现,用消息传递实现关注;完善顶踩功能接口。滚动选项卡用scroll-view实现,实现动态滚动和动画显示;使用swiper实现滑动列表;列表放入swiper;开发上拉加载更多数据;封装上拉加载更多组件;无数据默认情况封装组件。原创 2021-01-25 20:24:03 · 3764 阅读 · 11 评论 -
uni-app实战之社区交友APP(3)Vue.js和uni-app基础
view是视图容器,用于包裹元素内容,有hover-class等属性,text是文本组件,用于包裹文本内容;uni-app支持普通和CSS3选择器;uni-app推荐Flex布局,有多种用法实现灵活布局,可以灵活选择。数据在data中定义,在页面中用{{}}包含,即可渲染数据,可以实现动态修改;可以动态修改class和style属性;条件渲染使用v-if实现;使用v-for实现列表渲染,遍历数组或对象。事件处理器用于处理点击等事件;监听属性在watch属性中定义;计算属性在computed属性中定义。原创 2021-01-23 13:31:09 · 1345 阅读 · 1 评论 -
uni-app实战之社区交友APP(2)全局样式引入和底部导航栏开发
uni-app项目有标准的目录结构,App.vue是页面入口文件:新建模板项目中的uni.css文件即为官方CSS样式库,复制到本项目中,并在App.vue中导入;图标需要在iconfont中选择并下载,将iconfont.css拷贝到本项目中并进行修改,即可在页面中使用;动画库使用animate.css,下载并复制到目录下。pages.json文件用来对项目进行全局配置,globalStyle属性用于配置全局样式。底部导航栏包括社区、动态、消息和我的4个模块,下载图标并配置pages.json文件。原创 2021-01-21 19:30:48 · 1390 阅读 · 3 评论 -
uni-app实战之社区交友APP(1)项目介绍和环境搭建
社区交友项目实战,基于uni-app开发,实现安卓、iOS、微信小程序、支付宝小程序等多端发布,后端数据接口采用Django实现,包含帖子、话题、搜索、会员、聊天、广告位等模块。开发环境最核心的是HBuilderX,为了加速开发,可以安装所需的插件;创建uni-app项目后,即可运行到APP、小程序等多端,也可以运行到真机。安卓手机调试,需要链接数据线并打开USB调试,可以实现动态调试;iOS真机调试需要先点击信任机构,才能运行;微信小程序调试和支付宝小程序调试均可以安装开发者工具,或者进行真机调试。原创 2021-01-18 19:54:21 · 6709 阅读 · 9 评论