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

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

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

感覺這個(gè)小程序比較適合想要練手小程序和WeUI的盆友，所以細(xì)講一點(diǎn)

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

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

歡迎頁的動(dòng)畫我很喜歡，在設(shè)計(jì)的時(shí)候也想了試了比較久，也許是這一個(gè)小程序的最養(yǎng)眼的地方

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

這個(gè)氣泡動(dòng)畫都是由代碼 + svg圖生成 其實(shí)只要你想到就非常簡單

結(jié)構(gòu)部分：

// 我頁面上設(shè)置了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 {
//整個(gè)背景占滿全屏
  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;
  // 使用自定義動(dòng)畫使氣泡漸現(xiàn)、上升和翻滾
  animation: square 15s infinite;
  transition-timing-function: linear;
  overflow: hidden;
}
li image{
  width: 100%;
  height: 100%;
}
//給每個(gè)氣泡通過left 設(shè)置在不同的點(diǎn) 這里只展示一個(gè)節(jié)點(diǎn)操作
.bg-bubbles li:nth-child(2) {
  left: 20%;
  width: 90rpx;
  height: 90rpx;
//設(shè)置不同氣泡的動(dòng)畫執(zhí)行時(shí)間 和出現(xiàn)時(shí)間
  animation-delay: 2s;
  animation-duration: 7s;
  background-image: url("svgPath"); //保持圖像的縱橫比并將圖像縮放成將完全覆蓋背景定位區(qū)域
  // 讓每一個(gè)氣泡圖片完整展示
  background-size: cover;
}

// 兩個(gè)自定義動(dòng)畫實(shí)現(xiàn)頁面顯示動(dòng)畫效果
@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{
    //就不貼那么多 占位置
}

再回過頭去看看，只要想清楚了實(shí)現(xiàn)起來并沒有那么復(fù)雜

在welcome頁面的js文件中 頁面跳轉(zhuǎn)可以由點(diǎn)擊和自動(dòng)跳轉(zhuǎn)，因?yàn)樽詣?dòng)跳轉(zhuǎn)設(shè)置在頁面onLoad事件的定時(shí)器中，所以在點(diǎn)擊跳轉(zhuǎn)之后，應(yīng)該將onLoad中的定時(shí)器進(jìn)行清除操作

發(fā)布頁就像正常發(fā)布朋友圈一樣，說說內(nèi)容、圖片、位置基本內(nèi)容不能少
因?yàn)槲覀兪屈c(diǎn)贊小程序，所以可以將點(diǎn)贊和評(píng)論操作放在本頁，當(dāng)然在朋友圈頁面也有提供點(diǎn)贊的按鈕

頁面布局效果和操作：

這個(gè)頁面大部分使用了WeUI的組件編寫主要用到的組件有：

主要是表單組件，實(shí)際上我們這個(gè)頁面大部分在做表單處理：
 weui-cells 表單
 uploader 圖片上傳

`slider` 滑動(dòng)按鈕  

picker 從底部彈起的滾動(dòng)選擇器 支持多種選擇器，通過mode分別
button 按鈕

整個(gè)頁面可以理解為：將一切你想要在"朋友圈"展示的內(nèi)容設(shè)置好 ->通過 wx.setStorageSync()寫入緩存里進(jìn)行數(shù)據(jù)傳遞到即將展示的內(nèi)容頁面
值得一說：
長按圖片刪除

  deleteTap(e) {
    var imgList = this.data.images;
    const index = e.currentTarget.dataset.item;
    // 通過spilce()對(duì)數(shù)組中的元素刪除 通過MVVM模式 再setData 對(duì)圖片實(shí)現(xiàn)長按刪除
    imgList.splice(index, 1); 
    wx.showModal({
      title: "溫馨提示",
      content: "確定要?jiǎng)h除嗎",
      showCancel: false,
      confirmText: "確定",
      success:(response)=>{
        this.setData({
          images:imgList
        });
      }
    });
  }

使用了一下朋友的手機(jī)錄了個(gè)屏（不小心暴露了老哥的珍藏表情包） 因?yàn)樗年欠Q是透明的，所以在頁面上昵稱那一塊是空缺的



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

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

實(shí)現(xiàn)：

// 使用了九宮格布局
 
      
        
          
       
     
  

微信的WeUI框架中包含了常用的九宮格布局 通過weui-grids 類名使用，我也是再自己手寫完九宮格的樣式以后才無意中在文檔里瞥到了，這一瞥差點(diǎn)吐血（又白折騰一陣），還是給大家貼上原來的九宮格布局代碼：

        .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;
        }

點(diǎn)贊按鈕：

點(diǎn)贊的人名都是我所能想到的人名以及角色名，可把邊上的人都寫了一遍

點(diǎn)贊的操作因?yàn)槌绦蚬δ艿男枰龀闪它c(diǎn)一下加一個(gè)點(diǎn)贊人數(shù)  
因?yàn)樵趏nload中已經(jīng)通過發(fā)布頁面(index)的slider確定了點(diǎn)贊的人數(shù)，

//點(diǎn)贊按鈕點(diǎn)擊一下增加一個(gè)人即一個(gè)昵稱
 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]);
    }
    //為了解決昵稱最后一個(gè)逗號(hào)問題，直接粗暴的在最后添加一項(xiàng)
    temp.push("佚名");
    this.setData({
      nickNames: temp
    })
  }

使用到的API：

//圖片預(yù)覽
wx.previewImage({
      current: `${path}`,//當(dāng)前顯示的圖片路徑
      urls: [...urls]//要預(yù)覽的所有圖片
    })

隨手的一個(gè)小程序，但是功能還是可以的，符合小程序用完即走的原則，上線是不可能的，界面和功能混淆了微信的官方服務(wù)功能，不過我留了一個(gè)體驗(yàn)版在手機(jī)里，美滋滋。比較適合想要練手小程序和 weui 的童鞋
全部的代碼還請(qǐng)移步我的github,歡迎star和fork。最后朋友圈頁面的評(píng)論按鈕功能后面會(huì)繼續(xù)實(shí)現(xiàn)，想要實(shí)現(xiàn)的朋友可以參考我的思路：

頁面上設(shè)置input onfocus 默認(rèn)隱藏，自動(dòng)獲取焦點(diǎn)->點(diǎn)擊評(píng)論按鈕再顯示  
獲取iput的value 通過數(shù)據(jù)綁定的效果 綁定到評(píng)論數(shù)據(jù)中，頁面刷新

在使用你不知道或不熟悉的API或組件之前先看看文檔，事半功倍

小程序在模擬器上實(shí)現(xiàn)一些復(fù)雜功能和界面效果時(shí)，及時(shí)在移動(dòng)設(shè)備上進(jìn)行效果查看， 避免移動(dòng)端上達(dá)不到預(yù)期效果，ios和android有時(shí)候在樣式的顯示上有時(shí)也會(huì)有不同

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