【輕鬆集贊】寫了個涉嫌混淆微信官方服務的小程序

發生背景：

    隨着如今國內的社交軟件用戶羣體的不斷擴大，商家打廣告的方式（套路）也愈來愈多了，每次走在大街上均可以看到商家打出來廣告牌，"朋友圈點贊超過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>

部分樣式：

.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

發佈頁就像正常發佈朋友圈同樣，說說內容、圖片、位置基本內容不能少
由於咱們是點贊小程序，因此能夠將點贊和評論操做放在本頁，固然在朋友圈頁面也有提供點讚的按鈕

頁面佈局效果和操做：

這個頁面大部分使用了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 經過數據綁定的效果 綁定到評論數據中，頁面刷新

寫在後面

1. 在使用你不知道或不熟悉的API或組件以前先看看文檔，事半功倍
2. 小程序在模擬器上實現一些複雜功能和界面效果時，及時在移動設備上進行效果查看， 避免移動端上達不到預期效果，ios和android有時候在樣式的顯示上有時也會有不一樣
3. 前端路漫漫，與君共勉之。