此處輸入圖片的描述

發(fā)生背景：

????隨著現(xiàn)在國內(nèi)的社交軟件用戶群體的不斷擴大闷串，商家打廣告的方式（套路）也越來越多了刨裆，每次走在大街上都可以看到商家打出來廣告牌奥邮，"朋友圈點贊超過30享受六折優(yōu)惠"闻丑。在上一次和女盆友出去萬達吃個晚飯懒构，終于我們也被這個活動誘惑了一下下十兢，作為口袋錢不多又想好好吃一頓的大三狗趣竣，看看望著桌子上一大盆烤魚，還在猶豫要不要點一份小龍蝦的女朋友旱物，還是選擇了拍照發(fā)朋友圈然后挨個去群里叫親朋好友點贊遥缕，麻煩了一堆好友，真是不好意思宵呛。
????吃飽喝足单匣，兩個人扶著腰走在路上炫'腹'、還是女盆友的提醒說宝穗，你不是會小程序嗎封孙，能不能寫一個點贊的小程序來用。哎讽营、還真是虎忌，我自己擼一個也是闊以的，說不定還能給其他人用橱鹏。

程序分解

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

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

項目結(jié)構(gòu)

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

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

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

歡迎頁面Welcome

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

  此處輸入圖片的描述
  
  就這張gif效果顯示最好 麻煩大家想象一下豎屏的畫面
• 這個氣泡動畫都是由代碼 + svg圖生成 其實只要你想到就非常簡單
  結(jié)構(gòu)部分：

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

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

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

在welcome頁面的js文件中 頁面跳轉(zhuǎn)可以由點擊和自動跳轉(zhuǎn)糖荒，因為自動跳轉(zhuǎn)設置在頁面onLoad事件的定時器中杉辙，所以在點擊跳轉(zhuǎn)之后，應該將onLoad中的定時器進行清除操作

內(nèi)容發(fā)布頁Index

發(fā)布頁就像正常發(fā)布朋友圈一樣捶朵，說說內(nèi)容蜘矢、圖片狂男、位置基本內(nèi)容不能少
因為我們是點贊小程序，所以可以將點贊和評論操作放在本頁品腹，當然在朋友圈頁面也有提供點贊的按鈕

頁面布局效果和操作：

發(fā)布頁面

主要是表單組件岖食，實際上我們這個頁面大部分在做表單處理：
weui-cells 表單
uploader 圖片上傳
slider 滑動按鈕
picker 從底部彈起的滾動選擇器 支持多種選擇器，通過mode分別
button 按鈕

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

  deleteTap(e) {
    var imgList = this.data.images;
    const index = e.currentTarget.dataset.item;
    // 通過spilce()對數(shù)組中的元素刪除 通過MVVM模式 再setData 對圖片實現(xiàn)長按刪除
    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'

實現(xiàn)：

// 使用了九宮格布局
 <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;
        }

點贊按鈕：

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

點贊的操作因為程序功能的需要做成了點一下加一個點贊人數(shù)
因為在onload中已經(jīng)通過發(fā)布頁面(index)的slider確定了點贊的人數(shù)赶舆，

//點贊按鈕點擊一下增加一個人即一個昵稱
 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]//要預覽的所有圖片
    })

隨手的一個小程序祭饭，但是功能還是可以的芜茵，符合小程序用完即走的原則，上線是不可能的倡蝙，界面和功能混淆了微信的官方服務功能

此處輸入圖片的描述

頁面上設置input onfocus 默認隱藏胆建，自動獲取焦點->點擊評論按鈕再顯示
獲取iput的value 通過數(shù)據(jù)綁定的效果 綁定到評論數(shù)據(jù)中烤低，頁面刷新

寫在后面

1. 在使用你不知道或不熟悉的API或組件之前先看看文檔，事半功倍
2. 小程序在模擬器上實現(xiàn)一些復雜功能和界面效果時笆载，及時在移動設備上進行效果查看扑馁， 避免移動端上達不到預期效果，ios和android有時候在樣式的顯示上有時也會有不同

3. 前端路漫漫凉驻，與君共勉之腻要。
   

   舔屏