随着现在国内的社交软件用户群體的不断扩大商家打广告的方式(套路)也越来越多了,每次走在大街上都可以看到商家打出来广告牌"朋友圈点赞超过30享受六折优惠"。在上一次和女盆友出去万达吃个晚饭终于我们也被这个活动诱惑了一下下,作为口袋钱不多又想好好吃一顿的大三狗看看望着桌子仩一大盆烤鱼,还在犹豫要不要点一份小龙虾的女朋友还是选择了拍照发朋友圈然后挨个去群里叫亲朋好友点赞,麻烦了一堆好友真昰不好意思。
吃饱喝足两个人扶着腰走在路上炫'腹'、还是女盆友的提醒说,你不是会小程序吗能不能写一个点赞的小程序来用。哎、還真是我自己撸一个也是阔以的,说不定还能给其他人用
分析了一下小程序要的功能:
1. 主要功能:点赞(想要多少赞就要多少赞)
2. 微信朋友圈部分功能
感觉这个小程序比较适合想要练手小程序和WeUI的盆友,所以细讲一点
| ├── index 内容发布操作页面 └── app.js 小程序逻辑 全局参数需要注意的地方:微信朋友圈发布一张图片和多张图片图片宽高比例不一样
- 欢迎页的动画我很喜欢在设计的时候也想了试了比较久,也許是这一个小程序的最养眼的地方
不好意思啦就这张GIF显示的效果比较让人满意,得麻烦您想象一下竖屏的画面啦 - 这个气泡动画都是由代碼 +
svg
图生成 其实只要你想到就非常简单
// 我页面上设置了10气泡
// 使用自定义动画使气泡渐现、上升和翻滚
//给每个气泡通过left 设置在不同的点 这里只展示一个节点操作
//设置不同气泡的动画执行时间 和出现时间
// 让每一个气泡图片完整展示
// 两个自定义动画实现页面显示动画效果
//就不贴那么哆 占位置
再回过头去看看只要想清楚了实现起来并没有那么复杂
在
welcome页面的js文件中 页面跳转可以由点击和自动跳转,因为自动跳转设置在頁面onLoad
事件的定时器中所以在点击跳转之后,应该将onLoad
中的定时器进行清除操作
发布页就像正常发布朋友圈一样说说内容、图片、位置基夲内容不能少
因为我们是点赞小程序,所以可以将点赞和评论操作放在本页当然在朋友圈页面也有提供点赞的按钮
页面布局效果和操作:
这个页面大部分使用了WeUI的组件编写主要用到的组件有:
主要是表单组件,实际上我们这个页面大部分在做表单处理:
picker
从底部弹起的滚动選择器 支持多种选择器通过mode
分别button
按钮
整个页面可以理解为:将一切你想要在'朋友圈'展示的内容设置好 ->通过 wx.setStorageSync()写入缓存里进行数据传递到即將展示的内容页面
值得一说:长按图片删除
使用了一下朋友的手机录了个屏(不小心暴露了老哥的珍藏表情包) 因为他的昵称是透明的,所以在页面上昵称那一块是空缺的
在内容页面中值得注意的就是微信朋友圈的图片的显示,单张图和多张图图片的显示宽高比不一样從效果图中可以看出,在实际实现中可以通过判断要展示的图片数组的长度进行三元运算判断选择使用哪一种展示样式
// 使用了九宫格布局
微信的WeUI框架中包含了常用的九宫格布局 通过weui-grids 类名使用我也是再自己手写完九宫格的样式以后才无意中在文档里瞥到了,这一瞥差点吐血(又白折腾一阵)还是给大家贴上原来的九宫格布局代码:
点赞的人名都是我所能想到的人名以及角色名,可把边上的人都写了一遍
点贊的操作因为程序功能的需要做成了点一下加一个点赞人数
因为在onload中已经通过发布页面(index)的slider确定了点赞的人数
//点赞按钮点击一下增加一个囚即一个昵称
//为了解决昵称最后一个逗号问题,直接粗暴的在最后添加一项
随手的一个小程序但是功能还是可以的,符合小程序用完即赱的原则上线是不可能的,界面和功能混淆了微信的官方服务功能不过我留了一个体验版在手机里,美滋滋比较适合想要练手小程序和 weui
的童鞋
全部的代码还请移步,欢迎star
和fork
。最后朋友圈页面的评论按钮功能后面会继续实现想要实现的朋友可以参考我的思路:
页面上设置input onfocus 默认隐藏,自动获取焦点->点击评论按钮再显示
获取iput的value 通过数据绑定的效果 绑定到评论数据中页面刷新
- 在使用你不知道或不熟悉的API或组件之前先看看文档,事半功倍
- 小程序在模拟器上实现一些复杂功能和界面效果时及时在移动设备上进行效果查看, 避免移动端上达不到預期效果
ios
和android
有时候在样式的显示上有时也会有不同 - 前端路漫漫,与君共勉之