阳光沙滩-让学习编程变得更加简单

然而，与原生应用相比，Flutter在热修复方面缺乏官方支持，这给线上Bug修复带来了挑战。

2025-07-23 22:31 · flutter / 热修复 / app开发

1.说明(似乎36被吞了，这里补发)体验地址：http://sob.webapp.52android.cn:8001（域名来自alonelycat）本节，就是将话题以及摸鱼的数据获取，填充到页面中渲染2.话题数据话题总共有两个接口，一个是热门话题接口，一个是全部话题接口。两者返回的数据格式是不一致的，但是都是不需要登录就可以获取的。热门话题GET/ct/moyu/topic/index响应如下：{"success":true,"code":10000,"message":"获取话题成功.","data":[{"id":"1384189862646657025","topicName":"代码之美","followCount":0,"contentCount":0,"cover":null,"order":0,"description":null,"createTime":null,"updateTime":null}]}全部话题GET/ct/moyu/topic响应如下：{"success":true,"code":10000,"message":"获取话题列表成功.","data":[{"id":"1384518752720130050","topicName":"划水摸鱼","cover":"https://images.sunofbeaches.com/web/2021_04_30/837809810287099904.png","followCount":0,"contentCount":440,"hasFollowed":false,"description":"上班时间的额外骚操作"}]}我们选哪个呢？小孩子才做选择，我们全都要。这个为什么全都要呢，主要是热门话题是需要展示在前面的，剩下的才是普通话题。这里就涉及到一个去重操作，全部话题中必定包含热门话题，但是我们需要的是全部话题的格式，而不要热门话题的格式，所以热门话题接口返回的数据我们取出id之后，就可以抛弃了，接下来对全部话题数据做个不优雅的排序。排序的目的：根据热门话题的id找出热门话题,然后把这些热门话题移动到前面。有多种实现方式哈，只要能达成这个目的的都可以，我提供两种思路（两种思路都需要先拿到热门话题的id）：思路1：遍历全部话题，加上一个orderNo属性，只要id是热门话题的id中的一个，就让orderNo大于0。其他普通话题orderNo全是0.遍历第一次之后，再进行一次排序，根据orderNo降序排序，这样得到结果必定是热门话题在前。思路2：过滤全部话题，找到其中的热门话题，添加到hotTopic，其他普通话题，添加到commonTopic。（到这里经历完一次循环）然后把hotTopic和commomTopic链接起来，让hotTopic在前，可以使用hotTopic.concat(commonTopic)。这样hotTopic必定在前面，就实现了热门话题在前的效果。其他思路：话题中有个followCount以及contentCount，如果说热门话题就是根据这两个来来排序的，那么大可只获取全部话题，然后根据这个排序。当然，一般是后端查询时就根据这个排序查好再返回，这里不提具体代码如下：/***获取动态话题列表*/asyncgetMomentTopicList(){letallTopicResult=awaitapi.getMoyuAllTopic()lethotTopicResult=awaitapi.getMoyuHotTopic()letallTopicList=allTopicResult.dataconsole.log(hotTopicResult)console.log(allTopicResult)//从allTopicList中找到hotTopicList的数据//为什么要这么做呢，是因为hotTopicList中数据格式和allTopicList中数据格式不一致lethotTopicIds=hotTopicResult.data.map(currentValue=>currentValue.id)//在allTopicList中的hotTopiclethotInAll=[]//去除了hotTopic的剩余topiclethotNotInAll=[]//分类allTopicList.forEach(item=>{if(hotTopicIds.includes(item.id)){hotInAll.push(item)}else{hotNotInAll.push(item)}})//将hotInAll插入到hotNotInAll前面this.categoryList=hotInAll.concat(hotNotInAll)},我们最后拿到的数据都塞进了categoryList，html只需要拿着这个categoryList去遍历，然后取出里面的每个item的数据即可。这个函数需要在mounted中被调用。在遍历的时候注意，有两个话题是不在全部话题里面的，一个叫做'推荐'一个叫做关注，关注必须登录后才会显示。这两个东西我们就写死成一个html标签即可，后面做切换标签时会说到。3.摸鱼动态数据接口:GET/ct/moyu/list/${topicId}/${page}参数：topicId，就是我们前面获取的话题id。推荐对应的id是recommend，关注对应的id是followpage页码，从1开始，用于分页查询。后面的无缝加载就会用到响应：{"success":true,"code":10000,"message":"获取摸鱼列表成功.","data":{"list":[{"id":"1517697955233009665","userId":"1347474750661849088","nickname":"Romantic","avatar":"https://imgs.sunofbeaches.com/group1/M00/00/40/rBsADWAYITCAJpK1AABZPRa3kCo649.png","company":"正在构思中","position":"Bug-ProGrammer","content":"昨天服务器mysql镜像崩溃了，还好我数据备份了，要不然人就完蛋了。","linkCover":null,"linkTitle":null,"linkUrl":null,"commentCount":1,"thumbUpCount":0,"images":[],"topicName":"一语惊人","topicId":"1384518439661473794","createTime":"yyyy-MM-ddHH:mm:ss","hasThumbUp":false,"thumbUpList":["1139423796017500160"],"vip":true,}],"total":3179,"pageSize":30,"currentPage":1,"hasNext":true,"hasPre":false,"totalPage":106}}对响应中部分数据做一个说明:company和position，就是大家常见的什么岗位，公司数据topicNametopicId就是该动态所属的话题的数据，不一定会有linkUrllinkCoverlinkTitle就是分享的链接数据，不一定会有。其中，linkUrl是完整的https://xxx.xxx.xx/xxx格式，但是我们要展示的数据中，包含一个链接域名，所以我们到时候需要取出domain域名，也就是去掉http等以及参数等。thumbUpList谁给这条动态点赞了，这里面的就是点赞的人的userid，我们需要通过用户的id和这里面的id对比，如果有，说明当前用户给这条动态点赞了commentCountthumbUpCount就是点赞评论数images就是动态的图片，不一定会有。里面存储的就是图片的地址createTime就是发布时间，我们需要对他进行处理，换成xxx小时前这种格式那么具体请求函数如下，代码中进行了详细的注释：/***获取动态列表*@paramtopicId话题Id，其中推荐为recommend，获取关注的为follow*@parampage为页码，从1开始*@paramisMerge合并还是更像数据，用于无缝加载以及下拉刷新*/asyncgetMoYuList(topicId='recommend',page=1,isMerge=false){//调用接口获取数据letresult=awaitapi.getMoyuList(topicId,page)letsourceList=result.data.listconsole.log(result)//对集合进行处理，比如时间，是否点赞，域名等for(leti=0;i<sourceList.length;i++){letitem=sourceList[i]//添加本人是否点赞字段，就是判断thumbUpList中是否包含当前用户的id，如果包含，就给此对象添加thumbUpActive属性，根据此属性来决定是否高亮点赞按钮item.thumbUpActive=this.idIsContainMe(item.thumbUpList)//修改时间，把createTime的时间格式化一下item.createTime=this.calcTime(item.createTime)//对分享的链接解析出域名if(item.linkUrl){//添加了一个属性linkHostitem.linkHost=this.getDomain(item.linkUrl)}}//是否合并数据if(isMerge){this.momentList=this.mergeTargetFromSource(this.momentList,sourceList,'id')}else{this.momentList=sourceList}},是否包含当前用户的userid/***判断用户id列表中是否包含我的id*@paramuserIdList*/idIsContainMe(userIdList){if(!this.$store.state.userInfo){returnfalse}if(userIdList.includes(this.$store.state.userInfo.id)){returntrue}returnfalse},获取url中的domain使用这个，需要先安装一个库npminstallparse-domain--save然后在页面中导入import{parseDomain,fromUrl}from"parse-domain";/***解析url，获取域名*@paramurl*/getDomain(url){letparseResult=parseDomain(fromUrl(url));returnparseResult.hostname},calcTime以及mergeTargetFromSource，这两个函数使用地方比较多，因此我们把他们加入到全局函数中，也就是插件moreFunction.js/***把sourceArr中包含的targetArr中的数据除去,然后合并*前提条件：数组中对象必须是同一个格式*@paramtargetArr旧数组*@paramsourceArr新获得的数组，里面包含旧数组的部分值*@paramuniqueKey唯一键*/Vue.prototype.mergeTargetFromSource=function(targetArr,sourceArr,uniqueKey){//数组不能为空，唯一键也不能为空if(!targetArr||targetArr.length===0||!sourceArr||sourceArr.length===0||!uniqueKey){return[]}letobj={}for(leti=0;i<targetArr.length;i++){obj[targetArr[i][uniqueKey]]=targetArr[i]}for(leti=0;i<sourceArr.length;i++){//如果拿着你的id去obj里找，找不到，说明原本的this.recommendArticleList没有这个对象if(!obj[sourceArr[i][uniqueKey]]){targetArr.push(sourceArr[i])}}returntargetArr}/***将YYYY-MM-DDHH:mm格式的时间格式化，并计算距离现在有多久*@paramtimeStr*@returns{string|*}*/Vue.prototype.calcTime=function(timeStr){letformatResult=moment(timeStr,"YYYY-MM-DDHH:mm").fromNow()if(formatResult=='Invaliddate'){returntimeStr}else{returnformatResult}}到这里，动态的数据就全部存储到momentList中了。到页面上把数据取出来，渲染到其中即可，没什么复杂的地方，我就不细说了。4.切换话题并更新摸鱼动态切换话题，本质上是把currentTagId换成你点击的话题的id，刷新数据就是拿着这个currentTagId去重新调用摸鱼动态接口。逻辑理清之后开始实现，怎么知道点击哪个话题？在话题的html标签上加上点击事件，点击之后就能拿到这个话题的id以及index，index决定了是否高亮，所以也是需要的。<divslot="list"class="tagItemnut-hor-list-item"......:class="{tagCurrent:currentTag==index}"v-for="(item,index)incategoryList":key="item.id"@click="changeTag(index,item)">......</div>上面展示的是正常的话题，对于关注、推荐这两个不存在于接口中的话题，我们需要写死。把他们的tagIndex写死，tagId也写死，然后点击去调用changeTag函数传递参数即可。<divslot="list"class="tagItemnut-hor-list-item":class="{tagCurrent:currentTag==-1}"@click="changeTag(-1,'recommend')"><spanclass="tagTitle">推荐</span></div><divslot="list"class="tagItemnut-hor-list-item"v-if="$store.state.userInfo":class="{tagCurrent:currentTag==-2}"@click="changeTag(-2,'follow')"><spanclass="tagTitle">关注</span></div>然后就是对应的加载数据的函数。点击之后，触发changeTag函数，把id和index更新，然后调用摸鱼动态数据更新接口/***切换标签页的回调*@paramtagIndex*/changeTag(tagIndex,tagId){this.currentTag=tagIndexthis.currentTagId=tagId//页码肯定是第一页，因为你是切换到新话题。数据当然也是不需要合并的this.getMoYuList(this.currentTagId,1,false)},这样就完成了话题的切换。5.下拉刷新以及上拉加载和首页一样，nut-scroller有两个回调@loadMore="loadMoreVert"@pulldown="pulldown"只需要在这两个函数中发起请求，并重新获取数据即可。这里需要注意，我们下拉刷新，或者上拉加载时，有两个要求：展示加载提示禁止用户快速多次的下拉这两个要求可以结合到一起做。nut-scroller组件自带了两个属性:is-un-more="isUnMore":is-loading="isLoading"是用来控制是否正在加载的，当isLoading是true时，组件会弹出提示，此时即使多次下拉也不会触发pulldown函数。这就达成了上面的两个要求。所以，当下拉时，我们先把isLoading设置为true，然后发起数据，当数据加载完成，再把isLoading设置为false。上拉时同理，把isUnMore给设置为true，等加载完毕再关闭。咱们之前在这里设置了个函数节流（首页），实际没有必要，组件自带了。咱们直接去掉就行。把isLoading设置为false这个操作，需要在加载完毕摸鱼数据后才做，所以放到getMoYuList函数中。另外呢，因为摸鱼动态接口获取第二页的数据花费的时间是6秒，比较长，所以在上拉无缝加载时，我们自己再额外弹出一个提示，等加载完毕再关闭，//开启使用的是：（注意，存储了返回的toast对象）this.toast=this.$toast.loading('加载中...',{duration:0,id:'momentLoading'});//关闭使用的是this.toast.hide();那么总体下拉刷新，上拉加载，以及摸鱼数据获取的函数就是这样：/***获取动态列表*@paramtopicId话题Id，其中推荐为recommend，获取关注的为follow*@parampage为页码，从1开始*@paramisMerge合并还是更像数据，用于无缝加载以及下拉刷新*/asyncgetMoYuList(topicId='recommend',page=1,isMerge=false){letresult=awaitapi.getMoyuList(topicId,page)letsourceList=result.data.list//对集合进行处理，比如时间，是否点赞，域名等for(leti=0;i<sourceList.length;i++){letitem=sourceList[i]//屏蔽部分用户if(item.userId==='1256120724666454016'){sourceList.splice(i,1)continue}//添加本人是否点赞字段item.thumbUpActive=this.idIsContainMe(item.thumbUpList)//修改时间item.createTime=this.calcTime(item.createTime)//对分享的链接解析出域名if(item.linkUrl){item.linkHost=this.getDomain(item.linkUrl)}}if(isMerge){this.momentList=this.mergeTargetFromSource(this.momentList,sourceList,'id')}else{this.momentList=sourceList}this.isUnMore=falsethis.isLoading=false//需要判断，因为getMoYuList被切换话题调用时，是没有这个loading提示的if(this.toast.hide){this.$nextTick(()=>{this.toast.hide();})}},/***上拉加载更多*/loadMoreVert(){this.isUnMore=truethis.getMoYuList(this.currentTagId,++this.currentPage,true)this.toast=this.$toast.loading('加载中...',{duration:0,id:'momentLoading'});},/***下拉刷新*/pulldown(){this.isLoading=truethis.getMoYuList(this.currentTagId,1,false)},getMoYuList最显著的变化就是在加载完毕后修改了几个flag来关闭提示。6.骨架屏以及对应的动画骨架屏还是和首页差不多，就几个矩形，用一个flag来控制是否显示，当摸鱼数据获取完毕之后就把isSkeletonLoading设置为false关闭骨架屏。但是这次的区别是，加上了动画。之前的骨架屏就是静态的，这次我们加上动画，会有一闪一闪的效果这个怎么实现呢？在骨架屏旁边，同级加上一个div，加个class，样式如下：/*---------------骨架屏---------------*/.vue-skeleton-loading{position:fixed;top:5px;/*这部分可以微调*/right:0;bottom:0;left:-10px;z-index:9998;font-size:12px;background:#fff;}.vue-skeleton-loading.skeleton-bac-animation{position:absolute;z-index:auto;width:100%;height:100%;background:-webkit-gradient(linear,lefttop,righttop,from(hsla(0,0%,100%,0)),color-stop(50%,hsla(0,0%,100%,.5)),color-stop(80%,hsla(0,0%,100%,0)));background:-o-linear-gradient(left,hsla(0,0%,100%,0),hsla(0,0%,100%,.5)50%,hsla(0,0%,100%,0)80%);background:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.5)50%,hsla(0,0%,100%,0)80%);background-size:30%100%;background-repeat:no-repeat;-webkit-animation:backpos.9sease-in-out0sinfinite;animation:backpos.9sease-in-out0sinfinite;}结构如下：<divv-if="isSkeletonLoading"class="vue-skeleton-loading"><divclass="skeleton-bac-animation"></div><div><rowpadding="2px20px2px"><skeleton-squarewidth="355px"height="20px"></skeleton-square></row><rowslot="list"padding="15px20px0"><skeleton-squarewidth="50px"height="50px"></skeleton-square><column><skeleton-squarewidth="100px":count="1"margin="5px10px5px"height="20px"></skeleton-square><skeleton-squarewidth="140px":count="1"margin="5px10px5px"height="20px"></skeleton-square></column></row><rowslot="list"padding="15px10px0"><skeleton-squarewidth="350px":count="1"margin="5px10px5px"height="100px"></skeleton-square></row><rowslot="list"padding="2px10px0"><skeleton-squarewidth="165px":count="1"margin="5px10px5px"height="20px"></skeleton-square><skeleton-squarewidth="160px":count="1"margin="5px10px5px"height="20px"></skeleton-square></row><rowslot="list"padding="15px20px0"><skeleton-squarewidth="50px"height="50px"></skeleton-square><column><skeleton-squarewidth="100px":count="1"margin="5px10px5px"height="20px"></skeleton-square><skeleton-squarewidth="140px":count="1"margin="5px10px5px"height="20px"></skeleton-square></column></row><rowslot="list"padding="15px10px0"><skeleton-squarewidth="350px":count="1"margin="5px10px5px"height="100px"></skeleton-square></row><rowslot="list"padding="2px10px0"><skeleton-squarewidth="165px":count="1"margin="5px10px5px"height="20px"></skeleton-square><skeleton-squarewidth="160px":count="1"margin="5px10px5px"height="20px"></skeleton-square></row><rowslot="list"padding="15px20px0"><skeleton-squarewidth="50px"height="50px"></skeleton-square><column><skeleton-squarewidth="100px":count="1"margin="5px10px5px"height="20px"></skeleton-square><skeleton-squarewidth="140px":count="1"margin="5px10px5px"height="20px"></skeleton-square></column></row><rowslot="list"padding="15px10px0"><skeleton-squarewidth="350px":count="1"margin="5px10px5px"height="100px"></skeleton-square></row><rowslot="list"padding="2px10px0"><skeleton-squarewidth="165px":count="1"margin="5px10px5px"height="20px"></skeleton-square><skeleton-squarewidth="160px":count="1"margin="5px10px5px"height="20px"></skeleton-square></row></div></div>因为骨架屏在首页，文章详情页面也用到了，这个动画就一起多个页面给更新掉。7.源码https://github.com/cctyl/sunofbeach_mobile

2022-07-04 17:00 · Vue