CUFEECR的博客

文章列表和话题列表可以隐藏滚动条；APP更新打包可以选择整包升级和热更新，文件格式不同；APP打包上线需要进行配置，包括基础、图标、启动页面和模块等配置，打包需要选择证书。编译到小程序时，首页、消息页等需要自定义导航栏；小程序分享通过onShareAppMessage生命周期实现；通过条件编译实现小程序隐藏版本更新。通过button实现微信小程序登录，后端实现小程序登录逻辑；打包上线需要配置appid、安全域名、压缩项目；支付宝小程序在图标等方面存在兼容性问题，发布小程序；登录需要获取公钥私钥和权限。

个人空间页获取用户基本信息，后端提供数据接口；获取个人空间的交互数据和帖子列表；实现判断用户和拉入黑名单。聊天模块封装都在Vuex中完成：聊天时需要先开启websocket；客户端id和用户进行绑定避免恶意连接；接收和发送的消息都会保存到本地缓存，聊天列表和聊天详情分别存储，同时消息需要组织数据格式；发送消息也需要组织数据格式。聊天会话列表需要渲染列表数据、初始化登录状态和更新未读数；聊天历史记录需要获取聊天记录并渲染，同时需要开启和关闭监听；发送消息直接调用全局方法实现即可；消息页实现清除聊天记录。

发帖子需要实现选择话题，跳转到话题页选择；通过接口获取文章分类再选择；多图上传选择先选图、在提交发布文章时再真正上传，减少服务器压力；验证并发布文章。评论列表展示需要实现无限极分类。实现给文章添加以及评论和二级评论。获取关注用户的最新文章列表，实现后端接口和前端交互；我的好友列表包括互关列表、关注列表和粉丝列表；搜索用户需要格式化用户数据。实现APP热更新，在APP加载和点击关于页面时触发；新建浏览历史页面，common-list组件在进入详情页时将文章加入列表，可以从浏览历史访问文章和清空浏览历史。

我的页面通过Vuex修改登录状态和保存用户信息到缓存；实现手机号验证码和用户名密码登录两种方式；启动APP时初始化用户登录状态来保持登录状态；退出登录需要修改登录状态、清除登录信息，并调整显示内容；第三方登录包括微信、QQ和微博登录，使用uni.login接口实现。搭建修改账号与安全页面；新建页面实现绑定手机功能；实现修改密码交互；实现绑定邮箱功能；实现第三方账号的绑定与登录。修改头像需要上传图片；实现修改用户信息功能。在文章列表和详情页面实现关注；获取用户交互数据；在文章列表和详情页面实现顶踩功能。

Vuex是Vue全局变量和方法的管理器，uni-app内置，可以定义state和mutations；点赞评论等操作需要验证权限；将接口请求模块进行封装、简化代码。首页交互需要获取文章分类、所有分类下的文章、上拉加载更多、避免重复加载；封装请求错误处理逻辑；格式化显示文章时间。实现文章详情页交互；分享支持微信、QQ、微博或者微信朋友圈；搜索文章需要实现加载拉刷新和缓存搜索历史。话题页涉及的接口包括话题分类、轮播图和热门话题列表；实现话题分类交互和加载更多；话题详情页包括话题信息和文章列表；实现搜索话题。

APP版本更新对应数据表为update；序列化进行验证，视图判断是否是最新版本，并i定义路由。聊天模块对应数据表为message；序列化验证字段，视图中进行判断并创建消息，并定义路由。服务器部署接口代码时，需要生成依赖库、导出测试数据，通过宝塔面板将代码和.sql文件上传到服务器，使用Python项目管理器创建项目，并在面板安全栏和云服务控制台安全组中放行相应端口，在settings.py中配置静态资源目录并进行域名映射和Nginx配置，为了安全需要安装SSL；DRF可以自动生成文档，配置并设置路由。

编辑图片需要进一步完善图片上传序列化，实现多图上传和单图上传；修改用户信息不保证每个字段都为必填；修改密码有很多验证规则，包括两次新密码是否相同等。黑名单模块数据表为blacklist表；开发加入黑名单接口；移出黑名单和加入黑名单是相反的操作。粉丝模块数据表为follow表，建立自关联的多对多关系；关注用户接口和加入黑名单接口类似；取消关注和移出黑名单实现类似；互关列表是粉丝列表和关注列表的交集；粉丝和关注列表通过差集列表得出。用户反馈模块为feedback表；开发用户反馈接口；开发获取反馈列表接口。

将用户行为独立到operation，搜索模块继承自APIView，以标题为关键字开发搜索话题API，使用模糊查询；以标题为关键字开发搜索文章API；以用户名为关键字开发搜索用户API，并进行封装；附加功能独立到addon，开发广告模块API。绑定手机API开发需要判断登录类型和手机号是否存在；绑定邮箱和绑定手机类似；绑定第三方账号业务逻辑相对简单。用户点赞数据表为support；顶踩接口开发；当前用户每篇文章顶踩情况接口完善。用户评论数据表为comment；评论接口开发；获取当前文章评论列表接口开发。

创建post app来保存文章、话题等，文章与话题为多对多关系；文章分类API开发重写list方法；话题分类API开发重写list方法。话题与话题分类为多对一关系；获取热门话题API重写list方法；指定分类话题列表API开发可以定义方法并进行路由映射，并实现分页。文章模块涉及文章表、图片表和关联表；多图上传API需要验证手机号、配置文件保存路径；发布文章需要关联图片列表、自定义序列化和视图；获取文章详情API使用Retrieve；指定话题和分类文章列表API开发；指定用户的公开和所有文章API开发。

后端测试环境需要选择云服务器、申请域名和配置；API调试工具可以选择Postman；后端采用DRF，IDE为PyCharm；数据库管理使用Navicat；创建项目并运行；MySQL数据库创建和配置。登录主要涉及user、userinfo和user_bind表；同意封装异常类接口；实现用户验证；封装基础列表。手机验证码API开发；对接第三方短信发送平台实现短信发送；手机号验证码登录API开发；账号密码登录API开发；第三方登录API开发；装饰器实现权限验证、手机号绑定和是否禁用判断；退出登录API开发。

开发登录页，并配置顶部返回图标；构建登录页UI；实现验证码登录和账号密码登录切换；对登录表单进行验证，包括未输入禁用按钮、限制验证码点击频率、验证手机号码格式等；第三方登录使用接口。个人空间入口为帖子头像；开发头部组件；个人空间选项卡包括主页、帖子和动态；实现点击选项卡内容动态切换；实现点击右上角菜单按钮弹出操作菜单。通过接口获取缓存信息和清除缓存；新建JS文件用于保存全局配置和工具函数，同时在main.js中挂载；使用接口来获取和监听网络状态；用工具函数实现热更新；给帖子列表和消息列表添加动画效果。

个人中心页面需要配置导航栏标题、菜单按钮等；个人中心需要实现顶部个人信息栏、互动信息栏、广告位、浏览历史、社区认证和审核帖子，使用uni-list-item组件；设置页入口是个人中心页面。修改密码页面入口在设置页；需要验证后两次密码相同；修改邮箱页面入口也是设置页，需要验证邮箱格式。编辑资料页也使用uni-list-item实现；修改头像使用图片上传接口实现；修改昵称使用输入框，修改性别、情感和职业使用接口；修改生日使用picker组件；城市选择使用三级联动城市选择器。开发帮助反馈页面；开发关于页面。

不同页面的搜索类型不同，通过标识加以区别，搜索页完善搜索类型和占位符；根据不同的搜索类型搜索不同的内容，通过页面传递的搜索类型来实现。帖子详情页配置右上角的菜单按钮，入口是公共列表；使公共列表组件兼容到帖子详情页头部，实现复用，给评论和分享按钮添加点击事件；在详情页实现关注和顶踩功能；给帖子数据增加content和images字段，显示在父组件中；评论输入框参考聊天页输入框，将输入框抽离成组件；评论列表组件使用官方模板；分享功能使用uni-popup组件实现，从底部弹出，封装为组件，实现多种分享接口。

消息列表页面开发，配置好友和菜单按钮；实现消息列表项，用uni-badge实现新消息提示，处理文字溢出，用时间处理库和过滤器处理时间，封装为组件；配置下拉刷新和无数据页面；下拉弹出层使用uni-popup，需要添加点击事件。我的好友列表页需要配置动画、取消返回等；导航栏包括互关、关注和粉丝3个选项；好友列表可以复用首页列表；用uni-badge组件显示性别图标；封装好友列表组件并优化。聊天页面配置按钮；实现底部聊天输入框；聊天消息列表用scroll-view组件实现；封装聊天列表组件；完善聊天页功能。

动态页包括顶部导航栏、关注列表和话题列表，顶部导航栏需要自定义，需要完善样式、禁止原生导航栏，并添加点击事件。关注和话题页面也是通过swiper嵌套scroll-view实现；导航栏和列表的联动通过tabIndex关联；实现顶踩、关注和上拉加载功能。热门分类包括标题、跳转按钮和关键词等部分，需要封装为组件；实现搜索框，轮播图用swiper组件实现；话题列表封装为组件；话题分类页从热点分类进入。话题详情页需要传递数据；开发话题介绍组件，进行封装；开发精华帖子列表；列表选项卡包括默认和最新；上拉加载更多。

搜索页可以根据关键字搜索，通过生命周期和接口实现，还包括搜索历史，可以输入和点击关键词；根据关键词显示搜索结果。发布页需要自定义导航栏设置权限，需要使用uni-app官方提供的组件；文本输入框使用textarea；底部操作条包括选择分类、添加话题、选择图片和发布按钮，需要设置尺寸和添加动画效果；图片上传用官方模板提供的上传接口并进行修改即可，通过消息传递实现；删除图片需要添加图标并绑定事件；保存草稿使用生命周期onBackPress实现，通过缓存保存编辑内容，通过消息传递、ref和计算属性等方式实现。

pages.json配置app-plus，定义搜索框和发帖按钮；实现头像、昵称和关注按钮；实现发帖标题、点赞、评论和分享；将CSS样式提取到公共的CSS文件，将列表项封装为组件。添加全局分割线组件，组件中直接使用；实现点击关注和其他按钮的动画特效；组件需要定义接口，通过绑定事件实现，用消息传递实现关注；完善顶踩功能接口。滚动选项卡用scroll-view实现，实现动态滚动和动画显示；使用swiper实现滑动列表；列表放入swiper；开发上拉加载更多数据；封装上拉加载更多组件；无数据默认情况封装组件。

view是视图容器，用于包裹元素内容，有hover-class等属性，text是文本组件，用于包裹文本内容；uni-app支持普通和CSS3选择器；uni-app推荐Flex布局，有多种用法实现灵活布局，可以灵活选择。数据在data中定义，在页面中用{{}}包含，即可渲染数据，可以实现动态修改；可以动态修改class和style属性；条件渲染使用v-if实现；使用v-for实现列表渲染，遍历数组或对象。事件处理器用于处理点击等事件；监听属性在watch属性中定义；计算属性在computed属性中定义。

uni-app项目有标准的目录结构，App.vue是页面入口文件：新建模板项目中的uni.css文件即为官方CSS样式库，复制到本项目中，并在App.vue中导入；图标需要在iconfont中选择并下载，将iconfont.css拷贝到本项目中并进行修改，即可在页面中使用；动画库使用animate.css，下载并复制到目录下。pages.json文件用来对项目进行全局配置，globalStyle属性用于配置全局样式。底部导航栏包括社区、动态、消息和我的4个模块，下载图标并配置pages.json文件。

社区交友项目实战，基于uni-app开发，实现安卓、iOS、微信小程序、支付宝小程序等多端发布，后端数据接口采用Django实现，包含帖子、话题、搜索、会员、聊天、广告位等模块。开发环境最核心的是HBuilderX，为了加速开发，可以安装所需的插件；创建uni-app项目后，即可运行到APP、小程序等多端，也可以运行到真机。安卓手机调试，需要链接数据线并打开USB调试，可以实现动态调试；iOS真机调试需要先点击信任机构，才能运行；微信小程序调试和支付宝小程序调试均可以安装开发者工具，或者进行真机调试。