【輕松集贊】寫了個(gè)涉嫌混淆微信官方服務(wù)的小程序

此處輸入圖片的描述
此處輸入圖片的描述

發(fā)生背景：

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

程序分解

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

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

項(xiàng)目結(jié)構(gòu)

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

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

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

歡迎頁(yè)面Welcome

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

    就這張gif效果顯示最好 麻煩大家想象一下豎屏的畫面
  • 這個(gè)氣泡動(dòng)畫都是由代碼 + svg圖生成 其實(shí)只要你想到就非常簡(jiǎn)單
    結(jié)構(gòu)部分： 
// 我頁(yè)面上設(shè)置了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 {
//整個(gè)背景占滿全屏
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.bg-bubbles li {
  position: absolute;
  bottom: -160rpx; // 讓氣泡從頁(yè)面底部冒出的效果
  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è)氣泡通過(guò)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)頁(yè)面顯示動(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{
    //就不貼那么多 占位置
}

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

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

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

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

頁(yè)面布局效果和操作：

發(fā)布頁(yè)面
發(fā)布頁(yè)面

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

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

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

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

朋友圈 Main

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

多張
多張

一張圖片時(shí)
一張圖片時(shí)

完整頁(yè)面展示
完整頁(yè)面展示

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

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

實(shí)現(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框架中包含了常用的九宮格布局 通過(guò)weui-grids 類名使用，我也是再自己手寫完九宮格的樣式以后才無(wú)意中在文檔里瞥到了，這一瞥差點(diǎn)吐血（又白折騰一陣），還是給大家貼上原來(lái)的九宮格布局代碼：

        .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)通過(guò)發(fā)布頁(yè)面(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)問(wèn)題，直接粗暴的在最后添加一項(xiàng)
    temp.push('佚名');
    this.setData({
      nickNames: temp
    })
  }

使用到的API：

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

隨手的一個(gè)小程序，但是功能還是可以的，符合小程序用完即走的原則，上線是不可能的，界面和功能混淆了微信的官方服務(wù)功能

此處輸入圖片的描述
此處輸入圖片的描述
，不過(guò)我留了一個(gè)體驗(yàn)版在手機(jī)里，美滋滋。比較適合想要練手小程序和weui的童鞋
全部的代碼還請(qǐng)移步我的github,歡迎star和fork。最后朋友圈頁(yè)面的評(píng)論按鈕功能后面會(huì)繼續(xù)實(shí)現(xiàn)，想要實(shí)現(xiàn)的朋友可以參考我的思路：

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

寫在后面

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

  3. 前端路漫漫，與君共勉之。
    舔屏
    舔屏
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 轉(zhuǎn)載鏈接 注：本文轉(zhuǎn)載知乎上的回答 作者：初雪 鏈接：https://www.zhihu.com/question...
    pengshuangta閱讀 29,313評(píng)論 9贊 295
  • 人總是在期冀自己缺失的事物。從一開(kāi)始你的想法就是就注定了后面的悲劇。你想陪他變直，不就是你想陪他到你們讓他和你分開(kāi)...
    茯虎閱讀 252評(píng)論 1贊 0
  • 有句成語(yǔ)——【物以類聚，人以群分】說(shuō)的是人與人之間因?yàn)闅馕断嗤奂?。舉個(gè)小例子，我們宿舍畢業(yè)之后，...
    朝三閱讀 172評(píng)論 1贊 6
  • 渴了， 一杯茶， 餓了， 一碗飯。 不用問(wèn)， 茶是什么茶， 飯是什么飯。 生命的需要， 其實(shí)就這么簡(jiǎn)單。 老了， ...
    曹煥甫閱讀 170評(píng)論 0贊 1
  • 外婆在我出生之前 便去世了 我的外婆際遇僅僅停留在 外婆這個(gè)稱謂上 和一堆黃土之間 別人回外婆家，而我 沒(méi)有外婆家...
    吻章閱讀 197評(píng)論 4贊 2

友情鏈接更多精彩內(nèi)容