摘要：吃飽喝足，兩個人扶著腰走在路上炫腹還是女盆友的提醒說，你不是會小程序嗎，能不能寫一個點贊的小程序來用。哎還真是，我自己擼一個也是闊以的，說不定還能給其他人用。比較適合想要練手小程序和的童鞋全部的代碼還請移步我的歡迎和。

????隨著現在國內的社交軟件用戶群體的不斷擴大，商家打廣告的方式（套路）也越來越多了，每次走在大街上都可以看到商家打出來廣告牌，"朋友圈點贊超過30享受六折優惠"。在上一次和女盆友出去萬達吃個晚飯，終于我們也被這個活動誘惑了一下下，作為口袋錢不多又想好好吃一頓的大三狗，看看望著桌子上一大盆烤魚，還在猶豫要不要點一份小龍蝦的女朋友，還是選擇了拍照發朋友圈然后挨個去群里叫親朋好友點贊，麻煩了一堆好友，真是不好意思。
????吃飽喝足，兩個人扶著腰走在路上炫"腹"、還是女盆友的提醒說，你不是會小程序嗎，能不能寫一個點贊的小程序來用。哎、還真是，我自己擼一個也是闊以的，說不定還能給其他人用。

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

感覺這個小程序比較適合想要練手小程序和WeUI的盆友，所以細講一點

├── assets 小程序所需的images icon                 
├── pages   頁面目錄          
|   ├── welcome 歡迎頁面      
|   ├── index   內容發布操作頁面
|   ├── mian   "朋友圈" 
├── style   頁面的樣式 及weui
└── app.js  小程序邏輯 全局參數
└── app.wxss 小程序公共樣式
└── app.json   項目的配置

需要注意的地方：微信朋友圈發布一張圖片和多張圖片圖片寬高比例不一樣

歡迎頁的動畫我很喜歡，在設計的時候也想了試了比較久，也許是這一個小程序的最養眼的地方

不好意思啦，就這張GIF顯示的效果比較讓人滿意，得麻煩您想象一下豎屏的畫面啦

這個氣泡動畫都是由代碼 + svg圖生成 其實只要你想到就非常簡單

結構部分：

// 我頁面上設置了10氣泡

  
  

    
 

    

    

    

    

  

部分樣式：

.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中的定時器進行清除操作

發布頁就像正常發布朋友圈一樣，說說內容、圖片、位置基本內容不能少
因為我們是點贊小程序，所以可以將點贊和評論操作放在本頁，當然在朋友圈頁面也有提供點贊的按鈕

頁面布局效果和操作：

這個頁面大部分使用了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
        });
      }
    });
  }

使用了一下朋友的手機錄了個屏（不小心暴露了老哥的珍藏表情包） 因為他的昵稱是透明的，所以在頁面上昵稱那一塊是空缺的



在內容頁面中，值得注意的就是微信朋友圈的圖片的顯示，單張圖和多張圖圖片的顯示寬高比不一樣，從效果圖中可以看出，在實際實現中可以通過判斷要展示的圖片數組的長度進行三元運算判斷選擇使用哪一種展示樣式

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

實現：

// 使用了九宮格布局
 
      
        
          
       
     
  

微信的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有時候在樣式的顯示上有時也會有不同

前端路漫漫，與君共勉之。