【轻松集赞】写了个涉嫌混淆微信官方服务的小程序

2018年06月14日 2.4k 字大概 10 分钟

发生背景：

随着现在国内的社交软件用户群体的不断扩大，商家打广告的方式（套路）也越来越多了，每次走在大街上都可以看到商家打出来广告牌，”朋友圈点赞超过30享受六折优惠”。

在上一次和女盆友出去万达吃个晚饭，终于我们也被这个活动诱惑了一下下，作为口袋钱不多又想好好吃一顿的大三狗，看看望着桌子上一大盆烤鱼，还在犹豫要不要点一份小龙虾的女朋友，还是选择了拍照发朋友圈然后挨个去群里叫亲朋好友点赞，麻烦了一堆好友，真是不好意思。
吃饱喝足，两个人扶着腰走在路上炫’腹’、还是女盆友的提醒说，你不是会小程序吗，能不能写一个点赞的小程序来用。哎、还真是，我自己撸一个也是阔以的，说不定还能给其他人用。

程序分解

分析了一下小程序要的功能：

 1. 主要功能：点赞（想要多少赞就要多少赞）  
 2. 微信朋友圈部分功能

项目结构

感觉这个小程序比较适合想要练手小程序和WeUI的盆友，所以细讲一点

├── assets 小程序所需的images icon                 
├── pages   页面目录          
|   ├── welcome 欢迎页面      
|   ├── index   内容发布操作页面
|   ├── mian   '朋友圈' 
├── style   页面的样式 及weui
└── app.js  小程序逻辑 全局参数
└── app.wxss 小程序公共样式
└── app.json   项目的配置

需要注意的地方：微信朋友圈发布一张图片和多张图片图片宽高比例不一样

欢迎页面Welcome

欢迎页的动画我很喜欢，在设计的时候也想了试了比较久，也许是这一个小程序的最养眼的地方

不好意思啦，就这张GIF显示的效果比较让人满意，得麻烦您想象一下竖屏的画面啦
这个气泡动画都是由代码 + svg图生成其实只要你想到就非常简单

结构部分：

// 我页面上设置了10气泡
<view class="container">
  <view class="zan animation {{rotate?'biubiu':''}}" bindtap="onTap"></view>
  <ul class="bg-bubbles {{rotate?'biubiu':''}}">
    <li></li> <li></li>
    <li></li><li></li>
    <li></li><li></li>
    <li></li><li></li>
    <li></li><li></li>
  </ul>
</view>
```  
**部分样式：**
```css
.animation{
  -webkit-animation: rotate 2s linear;
  animation: rotate 2s linear;
}
.biubiu{
  -webkit-transform:rotate(720deg) scale(2,2);
  transform:rotate(720deg) scale(0,0); 
  -webkit-transition:all 2s ease-in-out;
  transition:all 2s ease-in-out;
}

.bg-bubbles {
//整个背景占满全屏
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.bg-bubbles li {
  position: absolute;
  bottom: -160rpx; // 让气泡从页面底部冒出的效果
  width: 40rpx;
  height: 40rpx;
  /* background-color: rgba(255,255,255,0.15); */
  list-style: none;
  // 使用自定义动画使气泡渐现、上升和翻滚
  animation: square 15s infinite;
  transition-timing-function: linear;
  overflow: hidden;
}
li image{
  width: 100%;
  height: 100%;
}
//给每个气泡通过left 设置在不同的点 这里只展示一个节点操作
.bg-bubbles li:nth-child(2) {
  left: 20%;
  width: 90rpx;
  height: 90rpx;
//设置不同气泡的动画执行时间 和出现时间
  animation-delay: 2s;
  animation-duration: 7s;
  background-image: url('svgPath'); //保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域
  // 让每一个气泡图片完整展示
  background-size: cover;
}

// 两个自定义动画实现页面显示动画效果
@keyframes square {
  0% {
    opacity: 0.5;
    transform: translateY(0rpx) rotate(45deg);
  }
  25% {
    opacity: 0.75;
    transform: translateY(-800rpx) rotate(90deg);
  }
  50% {
    opacity: 1;
    transform: translateY(-1200rpx) rotate(135deg);
  }
  100% {
    opacity: 0;
    transform: translateY(-1000rpx) rotate(180deg);
  }
}

@keyframes rotate{
    //就不贴那么多 占位置
}

再回过头去看看，只要想清楚了实现起来并没有那么复杂

在welcome页面的js文件中页面跳转可以由点击和自动跳转，因为自动跳转设置在页面onLoad事件的定时器中，所以在点击跳转之后，应该将onLoad中的定时器进行清除操作

内容发布页Index

发布页就像正常发布朋友圈一样，说说内容、图片、位置基本内容不能少
因为我们是点赞小程序，所以可以将点赞和评论操作放在本页，当然在朋友圈页面也有提供点赞的按钮

页面布局效果和操作：
![发布页面][3]
这个页面大部分使用了WeUI的组件编写主要用到的组件有：

主要是表单组件，实际上我们这个页面大部分在做表单处理：
weui-cells 表单
uploader 图片上传
slider 滑动按钮
picker 从底部弹起的滚动选择器支持多种选择器，通过mode分别
button 按钮

整个页面可以理解为：将一切你想要在’朋友圈’展示的内容设置好 ->通过 wx.setStorageSync()写入缓存里进行数据传递到即将展示的内容页面
值得一说：
长按图片删除

deleteTap(e) {
  var imgList = this.data.images;
  const index = e.currentTarget.dataset.item;
  // 通过spilce()对数组中的元素删除 通过MVVM模式 再setData 对图片实现长按删除
  imgList.splice(index, 1); 
  wx.showModal({
    title: '温馨提示',
    content: '确定要删除吗',
    showCancel: false,
    confirmText: '确定',
    success:(response)=>{
      this.setData({
        images:imgList
      });
    }
  });
}

朋友圈 Main

使用了一下朋友的手机录了个屏（不小心暴露了老哥的珍藏表情包）因为他的昵称是透明的，所以在页面上昵称那一块是空缺的

在内容页面中，值得注意的就是微信朋友圈的图片的显示，单张图和多张图图片的显示宽高比不一样，从效果图中可以看出，在实际实现中可以通过判断要展示的图片数组的长度进行三元运算判断选择使用哪一种展示样式

content_info.images.length >1?’image_item’:’image_item3_4’

实现：

// 使用了九宫格布局
 <view class="weui-grids images_list">
      <block wx:for="{{content_info.images}}" wx:key="{{index}}">
        <view class="weui-grid {{content_info.images.length >1?'image_item':'image_item3_4'}}" hover-class="weui-grid_active">
          <image data-id="{{index}}" mode="aspectFill" src="{{item.path}}" bindtap="preImgTap" />
       </view>
     </block>
  </view>

微信的WeUI框架中包含了常用的九宫格布局通过weui-grids 类名使用，我也是再自己手写完九宫格的样式以后才无意中在文档里瞥到了，这一瞥差点吐血（又白折腾一阵），还是给大家贴上原来的九宫格布局代码：

.grid {
    padding: 40rpx 0;
    margin-left: auto;
    margin-right: auto;
    max-width: 660rpx;
    overflow: hidden;
    box-sizing: border-box;
}

/* 自建九宫格最方便的写法 width: 33.33333%; */

.grid .item {
    float: left;
    box-sizing: border-box;
    width: 33.33333%;
    padding-left: 4%;
    padding-right: 4%;
    margin-bottom: 40rpx;
    overflow: hidden;
}

点赞按钮：

点赞的人名都是我所能想到的人名以及角色名，可把边上的人都写了一遍

点赞的操作因为程序功能的需要做成了点一下加一个点赞人数
因为在onload中已经通过发布页面(index)的slider确定了点赞的人数，

//点赞按钮点击一下增加一个人即一个昵称
 addThumb(){
    let thumbs = this.data.content_info.thumbs;
    thumbs = thumbs +1;
    this.data.content_info.thumbs = thumbs;
    let nickNames = app.globalData.nickNames;
    const temp = [];
    for (let i = 0; i < thumbs-1; i++) {
      temp.push(nickNames[i]);
    }
    //为了解决昵称最后一个逗号问题，直接粗暴的在最后添加一项
    temp.push('佚名');
    this.setData({
      nickNames: temp
    })
  }
```  
使用到的API：

//图片预览
wx.previewImage({
current: ${path},//当前显示的图片路径
urls: […urls]//要预览的所有图片
})

```
随手的一个小程序，但是功能还是可以的，符合小程序用完即走的原则，上线是不可能的，界面和功能混淆了微信的官方服务功能，不过我留了一个体验版在手机里，美滋滋。比较适合想要练手小程序和weui的童鞋
全部的代码还请移步我的github,欢迎star和fork。最后朋友圈页面的评论按钮功能后面会继续实现，想要实现的朋友可以参考我的思路：

页面上设置input onfocus 默认隐藏，自动获取焦点->点击评论按钮再显示
获取iput的value 通过数据绑定的效果绑定到评论数据中，页面刷新

写在后面

在使用你不知道或不熟悉的API或组件之前先看看文档，事半功倍
小程序在模拟器上实现一些复杂功能和界面效果时，及时在移动设备上进行效果查看，避免移动端上达不到预期效果，ios和android有时候在样式的显示上有时也会有不同
前端路漫漫，与君共勉之。