背景：随着中国社交软件用户群的不断扩大，商家投放广告的方式（套路）也越来越多。每次走在大街上，都能看到商家张贴的广告牌，“朋友圈点赞30+享40折”。上次跟闺蜜出去万达吃饭，终于被这个活动动心了。作为没钱又想大快朵颐的小辈，看看桌上那一大锅烤物。还在犹豫要不要点小龙虾的闺蜜宇，还是选择拍张照片发朋友圈，然后一个个去群里问亲戚朋友点赞。很抱歉打扰了一群朋友。吃饱喝足后，两人撑着腰走在路上，大秀“肚腩”。女朋友提醒我，你不是会用小程序吗，能不能写个小程序点赞用一下。嘿嘿，还真是，自己玩一个也值了，说不定还能给别人用呢。程序分解分析小程序需要的功能：1.主要功能：点赞（想点多少就点多少）2.朋友圈项目结构的一些功能感觉这个小程序比较适合想要的人练习小程序和WeUI├──资产小程序所需的图片图标├──pages页面目录|├──欢迎欢迎页|├──索引内容发布操作页面|├──mian'朋友圈'├──style页面样式和weui└──app.js小程序逻辑全局参数└──app.wxss小程序公共样式└──app.json项目配置需要注意：微信朋友圈发布一张图片，多张图片宽高比例不同。欢迎页面我非常喜欢欢迎页面的动画效果。我在设计的时候也想了很久。它可能是这个小程序中最引人注目的部分。不好意思，刚才这个GIF展示的效果还算中规中矩，请想象一下竖屏的画面。这个泡泡动画是代码+svg图片生成的。其实只要想到就很简单。气泡/li>一些样式：.animation{-webkit-anima运动：旋转2s线性；动画：旋转2s线性；}.biubiu{-webkit-transform:rotate(720deg)scale(2,2);变换：旋转（720度）比例（0,0）；-webkit-transition:all2sease-in-out;transition:all2sease-in-out;}.bg-bubbles{//整个背景占据全屏位置：absolute;顶部：0；左：0；宽度：100%；高度：100%；溢出：隐藏；}.bg-bubblesli{位置：绝对；底部：-160rpx；//让气泡从页面底部冒出来的效果width:40rpx;高度：40rpx；/*背景色：rgba(255,255,255,0.15);*/列表样式：无；//使用自定义动画制作气泡消退、上升和滚动动画：square15sinfinite;转换时间函数：线性；溢出：隐藏；}li图像{宽度：100%；height:100%;}//将每个气泡设置在左边不同的点。此处仅显示一个节点操作。bg-bubblesli:nth-child(2){左：20%；宽度：90rpx；height:90rpx;//设置不同气泡的动画执行时间和出现时间animation-delay:2s;动画持续时间：7s；背景图片：url('svgPath');//保持图片的纵横比，使图片Scale，完全覆盖背景定位区域//让每个气泡图片完全显示background-size:cover;}//两个自定义动画，实现页面显示动画效果@keyframessquare{0%{不透明度：0.5；变换：translateY(0rpx)rotate(45deg);}25%{不透明度：0.75；变换：translateY(-800rpx)rotate(90deg);}50%{不透明度：1；:平移Y(-1200rpx)旋转(135deg);}100%{不透明度：0;变换：translateY(-1000rpx)rotate(180deg);}}@keyframesrotate{//不要发那么多位置}回过头去看看，只要想清楚，实现起来也没有那么复杂。在欢迎页面的js文件中，页面跳转可以点击自动跳转，因为自动跳转是在页面onLoad事件的定时器中设置的，所以当你点击跳转后，onLoad中的定时器应该是清除。内容发布页Index发布页就像朋友圈的正常发布一样。谈谈内容、图片和位置。点赞和评论操作都放在这个页面。当然朋友圈页面也有点赞按钮。页面布局效果及操作：本页面大部分使用WeUI组件。写作中使用的主要组件有：主要是表单组件。我们页面大部分是在做表单处理：weui-cellsformuploaderimageupload`slider`slidingbuttonpicker从底部弹出的scrollselector支持多种选择器，button按钮按模式划分。整个页面可以理解为：把所有你想在“朋友圈”显示的内容设置->通过wx.setStorageSync()写入缓存，将数据传输到要显示的内容页面。值得一提的是：长按图片删除deleteTap(e){varimgList=this.data.images;constindex=e.currentTarget.dataset.item;//通过spilce()删除数组中的元素，然后通过MVVM方式setData实现长按删除图片imgList.splice(index,1);wx.showModal({title:'提醒',content:'你确定要删除吗',showCancel:false,confirmText:'OK',success:(response)=>{this.setData({images:imgList});}});}朋友圈主要是用朋友手机录屏的（不小心暴露了弟弟的收藏表情包）因为他的昵称是透明的，所以在页面内容页中，值得注意的是微信朋友圈中图片的显示，显示单张图片和多张图片的宽高比是不一样的，从效果图可以看出，在实际实现中，可以通过判断要展示的图片数组的长度，进行三元来判断采用哪种展示风格手术。="weui-gridsimages_list">1?'image_item':'image_item3_4'}}"hover-class="weui-grid_active">微信的WeUI框架通过weui-grids类名包含了常用的九宫格布局，我也手写了九宫格样式无意中瞥了一眼atitinthedocument，这一眼差点吐血（又浪费了很多时间）Array），或者给大家贴上九宫格原版布局代码：.grid{padding:40rpx0;左边距：自动；右边距：自动；最大宽度：660rpx；溢出：隐藏；box-sizing:border-box;}/*最方便的写一个自建九宫格width:33.33333%;*/.grid.item{浮动：左；框大小：边框框；宽度：33.33333%；左填充：4%；填充-右：4%；保证金底部：40rpx；溢出：隐藏；}点赞按钮：点赞的人名都是我能想到的人名和人物的名字，我可以把旁边的人都写上点赞操作因为程序功能的需要，点击即可加几个赞。因为在onload中已经通过发布页（index）的滑块确定了点赞数，//点击点赞按钮添加一个人，即昵称addThumb(){letthumbs=this.data.content_info.大拇指；大拇指=大拇指+1；this.data.content_info.thumbs=大拇指；让nickNames=app.globalData.nickNames;常数温度=[];for(leti=0;i点击评论按钮，然后通过数据绑定显示iput的值绑定到评论的效果数据，页面刷新是后面写的。使用不了解或不熟悉的API或组件前，先阅读文档，事半功倍。检查在移动设备上的效果，避免在移动端出现预期的效果。有时候ios和android在风格显示上会有差异。
