2. 程式人生 > >【總結】微信小程式

【總結】微信小程式

阿新 • • 發佈：2019-01-02

最近小程式有個需求要做一個類似輪播的自定義樣式，搜了一下外掛們，一般都用到了jQuery，但是小程式又不支援操作DOM，所以直接自己捲起袖子幹吧。
如果有任何有問題的地方，歡迎各位看官指出，大家一起討論才能進步地更快XD

文章基本流程：
1.效果圖
2.實現程式碼
3.被放棄的提案及理由(TAT)
4.總結

1.首先放實現的效果圖

因為需求裡只有中間的三張圖，所以之後會把旁邊兩張的opacity調成0，這裡為了方便看就留著啦。

這裡寫圖片描述

2. 程式碼

a. wxml

這裡之前考慮過要使用template，畢竟比較方便。但是每個圖片又會再繫結不同的動畫效果，所以就直接這樣攤大餅展開寫了，如果誰有更好的方法，答應我，一定要告訴我，好嘛 :)

<view style="white-space: nowrap;" class="box" bindtouchstart="touchstart" bindtouchmove="touchmove" bindtouchend="touchend">
    <view class="club" animation="{{animation1}}" bindtap="scrollLeft">
      <image src="{{clubs[0].image}}"/>
      <text>{{clubs[0].name}}</text
 
>
    </view>
    <view class="club" animation="{{animation2}}" bindtap="scrollLeft">
      <image src="{{clubs[1].image}}"/>
      <text>{{clubs[1].name}}</text>
    </view>
    <view class="club" animation="{{animation3}}">
      <image src="{{clubs[2].image
 
}}"/>
      <text>{{clubs[2].name}}</text>
    </view>
    <view class="club" animation="{{animation4}}" bindtap="scrollRight">
      <image src="{{clubs[3].image}}"/>
      <text>{{clubs[3].name}}</text>
    </view>
    <view class="club" animation="{{animation5}}" bindtap="scrollRight">
      <image src="{{clubs[4].image}}"/>
      <text>{{clubs[4].name}}</text>
    </view>
  </view>

b. wxss

這裡因為沒有涉及到圖片互相遮蓋的問題，所以大膽地使用了opacity，但是如果做成了疊加效果的話，我的方法是使用偽類:after或者:before在圖片上加一個白色背景色帶透明度的一層。

有關css的transform3d可以參考【這篇簡單易懂的文章】
transform2d可以參考【這篇附帶演示的文章】

.box {
  height: 340rpx;
  z-index: 0;
  margin: 50rpx 0;
}
.box .club {
  height: 140rpx;
  width: 140rpx;
  position: relative;
  display: inline-block;
}
.club image {
  height: 140rpx;
  width: 140rpx;
}
.club text {
  display: block;
  width: 100%;
  font-size: 24rpx;
  line-height: 40rpx;
  text-align: center;
}
.box .club:nth-child(1) {
  transform: scale(0.8, 0.8) translateX(-120rpx);
  opacity: 0.2;
  z-index: 10;
}
.box .club:nth-child(2) {
  transform: scale(1,1) translateX(-80rpx);
  opacity: 0.5;
  z-index: 100;
}
.box .club:nth-child(3) {
  transform: scale(1.4,1.4);
  z-index: 1000;
}
.box .club:nth-child(4) {
  transform: scale(1,1) translateX(80rpx);
  opacity: 0.5;
  z-index: 100;
}
.box .club:nth-child(5) {
  transform: scale(0.8, 0.8) translateX(120rpx);
  opacity: 0.2;
  z-index: 10;
}
.box .club:nth-child(1) text,
.box .club:nth-child(2) text,
.box .club:nth-child(4) text,
.box .club:nth-child(5) text{
  visibility: hidden;
}

c. js

①首先，要通過js的touchstart,touchmove和touchend事件判斷手指的左右滑動。

//觸控開始事件
  touchstart: function(e) {
    console.log(e.touches[0].pageX);
    this.data.touchDot = e.touches[0].pageX;
    var that = this;
    this.data.interval = setInterval(function(){
      that.data.time+=1;
    },100);
  },
  //觸控移動事件
  touchmove: function(e) {
    let touchMove = e.touches[0].pageX;
    let touchDot = this.data.touchDot;
    let time = this.data.time;
    console.log("touchMove: " + touchMove + ", touchDot: " + touchDot + ", diff: " + (touchMove - touchDot));
    //向左滑動
    if(touchMove - touchDot <= -40 && time<10 &&!this.data.done) {
      console.log("向左滑動");
      this.data.done = true;
      this.scrollLeft();
    }
    //向右滑動
    if (touchMove - touchDot >= 40 && time < 10 && !this.data.done) {
      console.log("向右滑動");
      this.data.done = true;
      this.scrollRight();
    }
  },
  //觸控結束事件
  touchend: function(e) {
    clearInterval(this.data.interval);
    this.data.time = 0;
    this.data.done = false;
  }

②然後寫scrollLeft和scrollRight事件

這裡參考了【這篇文章】中設定動畫的方式。

主要思想：在一定的時間(duration)之內，讓圖片向左(/右)移動，並伴以適當的scale以及opacity變換。然後再在0s之內完成兩件事：一個是瞬間使剛才移動的圖片迴歸原位（scale和opacity自然也不必說），還有一個是在圖片的佇列中shift(/pop)出一個來再push(/unshift)進去，並且在0s內setData。這樣從視覺上看起來就是圖片向左(/右)滑動了。

此處需要注意的是：影象動畫的duration最好大於瞬間還原以及set陣列的定時時間。如果他們的時間都設定為同樣的話（如300），在滑動中肉眼能夠看到明顯的閃動（由於前後的圖片切換）。

//向左滑動事件
  scrollLeft(){
    var animation1 = wx.createAnimation({
      duration: 300,
      timingFunction: "linear",
      delay: 0
    })
    var animation2 = wx.createAnimation({
      duration: 300,
      timingFunction: "linear",
      delay: 0
    })
    var animation3 = wx.createAnimation({
      duration: 300,
      timingFunction: "linear",
      delay: 0
    })
    var animation4 = wx.createAnimation({
      duration: 300,
      timingFunction: "linear",
      delay: 0
    })
    var animation5 = wx.createAnimation({
      duration: 300,
      timingFunction: "linear",
      delay: 0
    })

    this.animation1 = animation1;
    this.animation2 = animation2;
    this.animation3 = animation3;
    this.animation4 = animation4;
    this.animation5 = animation5;

    this.animation1.translateX(-60).opacity(0).step();
    this.animation2.translateX(-140).opacity(0.5).scale(0.8,0.8).step();
    this.animation3.translateX(-110).opacity(0.5).scale(1,1).step();
    this.animation4.translateX(-70).opacity(1).scale(1.4,1.4).step();
    this.animation5.translateX(-30).opacity(0.5).scale(1,1).step();


    this.setData({
      animation1: animation1.export(),
      animation2: animation2.export(),
      animation3: animation3.export(),
      animation4: animation4.export(),
      animation5: animation5.export()
    })

    var that = this;
    setTimeout(function () {
      that.animation1.translateX(-50).opacity(0.2).scale(0.8, 0.8).step({ duration: 0, timingFunction: 'linear'});
      that.animation2.translateX(-40).opacity(0.5).scale(1, 1).step({ duration: 0, timingFunction: 'linear' });
      that.animation3.translateX(0).opacity(1).scale(1.4, 1.4).step({ duration: 0, timingFunction: 'linear' });
      that.animation4.translateX(40).opacity(0.5).scale(1, 1).step({ duration: 0, timingFunction: 'linear' });
      that.animation5.translateX(50).opacity(0.2).scale(0.8, 0.8).step({ duration: 0, timingFunction: 'linear' });
      that.setData({
        animation1: animation1.export(),
        animation2: animation2.export(),
        animation3: animation3.export(),
        animation4: animation4.export(),
        animation5: animation5.export()
      })
    }.bind(this), 195)

    let array = this.data.clubs;
    let shift = array.shift();
    array.push(shift);

    setTimeout(function () {
      this.setData({
        clubs: array
      })
    }.bind(this), 195)
  },

  //向右滑動事件
  scrollRight() {
    var animation1 = wx.createAnimation({
      duration: 300,
      timingFunction: "linear",
      delay: 0
    })
    var animation2 = wx.createAnimation({
      duration: 300,
      timingFunction: "linear",
      delay: 0
    })
    var animation3 = wx.createAnimation({
      duration: 300,
      timingFunction: "linear",
      delay: 0
    })
    var animation4 = wx.createAnimation({
      duration: 300,
      timingFunction: "linear",
      delay: 0
    })
    var animation5 = wx.createAnimation({
      duration: 300,
      timingFunction: "linear",
      delay: 0
    })

    this.animation1 = animation1;
    this.animation2 = animation2;
    this.animation3 = animation3;
    this.animation4 = animation4;
    this.animation5 = animation5;

    this.animation1.translateX(30).opacity(0.5).scale(1,1).step();
    this.animation2.translateX(70).opacity(1).scale(1.4, 1.4).step();
    this.animation3.translateX(110).opacity(0.5).scale(1, 1).step();
    this.animation4.translateX(120).opacity(0.2).scale(0.8, 0.8).step();
    this.animation5.translateX(130).opacity(0).step();


    this.setData({
      animation1: animation1.export(),
      animation2: animation2.export(),
      animation3: animation3.export(),
      animation4: animation4.export(),
      animation5: animation5.export()
    })

    var that = this;
    setTimeout(function () {
      that.animation1.translateX(-50).opacity(0.2).scale(0.8, 0.8).step({ duration: 0, timingFunction: 'linear' });
      that.animation2.translateX(-40).opacity(0.5).scale(1, 1).step({ duration: 0, timingFunction: 'linear' });
      that.animation3.translateX(0).opacity(1).scale(1.4, 1.4).step({ duration: 0, timingFunction: 'linear' });
      that.animation4.translateX(40).opacity(0.5).scale(1, 1).step({ duration: 0, timingFunction: 'linear' });
      that.animation5.translateX(50).opacity(0.2).scale(0.8, 0.8).step({ duration: 0, timingFunction: 'linear' });
      that.setData({
        animation1: animation1.export(),
        animation2: animation2.export(),
        animation3: animation3.export(),
        animation4: animation4.export(),
        animation5: animation5.export()
      })
    }.bind(this), 195)

    let array = this.data.clubs;
    let pop = array.pop();
    array.unshift(pop);

    setTimeout(function () {
      this.setData({
        clubs: array
      })
    }.bind(this), 195)
  }

3. 被放棄的提案

原本的需求是實現一個類似這樣的效果（不要笑我用了opacity，解決辦法我已經寫在了上邊的css部分裡）：
這裡寫圖片描述
但是當我滿心歡喜，實現了靜態效果，準備做動畫的時候，發現小程式竟然不支援perspective!!!!!!!
啥？你問什麼是perspective?來看【這篇】或者【上邊wxss中提到的3d的這篇】吧

簡單說perspective就是透視，如果沒有透視，那麼無論你怎麼翻轉怎麼rotate，他都是一個矩形，或者一個平行四邊形(skew)，而不會變成一個梯形，就是沒有近大遠小的效果。perspective就相當於z軸的大小，越大透視效果越強。

如圖（左邊的就是小程式的rotateY）：
這裡寫圖片描述

//實現透視狀的css程式碼
.box .club:nth-child(1){
  transform-origin: 100% 50%;
  transform: perspective(600rpx) rotateY(45deg) translateX(420rpx) scale(1.5, 1.3);
  z-index: 0;
  opacity: 0.5;
}
.box .club:nth-child(2){
  transform-origin: 100% 50%;
  transform: perspective(600rpx) rotateY(45deg) translateX(200rpx) scale(1.3, 1);
  opacity: 0.5;
  z-index: 10;
}
.box .club:nth-child(3) {
  transform-origin: 100% 50%;
  transform: perspective(600rpx) rotateY(45deg) translateX(60rpx) scale(1.1, 0.9);
  opacity: 0.5;
  z-index: 100;
}
.box .club:nth-child(4) {
  transform: perspective(600rpx) rotateY(0deg);
  z-index: 1000;
}
.box .club:nth-child(5){
  transform-origin: 0 50%;
  transform: perspective(600rpx) rotateY(-45deg) translateX(-60rpx) scale(1.1, 0.9);
  opacity: 0.5;
  z-index: 100;
}
.box .club:nth-child(6){
  transform-origin: 0 50%;
  transform: perspective(600rpx) rotateY(-45deg) translateX(-200rpx) scale(1.3, 1);
  opacity: 0.5;
  z-index: 10;
}
.box .club:nth-child(7) {
  transform-origin: 0 50%;
  transform: perspective(600rpx) rotateY(-45deg) translateX(-420rpx) scale(1.5, 1.3);
  opacity: 0.5;
  z-index: 0;
}

無動畫實現效果：
這裡寫圖片描述

4. 總結

通過這次補了一下css的transform的知識，還接觸了下小程式的動畫感覺還蠻不錯的。雖然折騰了好幾天，但是感覺很有意義！
感謝閱讀
祝各位都有美好的一天 have a nice day~~~

相關推薦

【總結】微信小程式

最近小程式有個需求要做一個類似輪播的自定義樣式，搜了一下外掛們，一般都用到了jQuery，但是小程式又不支援操作DOM，所以直接自己捲起袖子幹吧。 如果有任何有問題的地方，歡迎各位看官指出，大家一起討論才能進步地更快XD 文章基本流程：

【總結】微信小程式JAVA伺服器統一下單請求BODY欄位中文簽名錯誤總結

之前網上找了好久此問題都沒有解決，總結一下基本有一下幾種： 1.更改Tomcat配置 編碼改為UTF-8 2.String body  = new String("body中文欄位值".toString().getBytes("ISO8859-1"),"UTF-8")；更改欄位編碼 簽

【轉】微信小程式模板訊息無限制群發

模版訊息推送是微信小程式採用的通知形式， 使用者本人在小程式頁面有互動行為後，可觸發下發通知 ，通過微信聊天列表中的服務通知可快捷進入檢視訊息。此外，點選檢視詳情還能跳轉到下發訊息的小程式的指定頁面。但是為了避免這種通知被濫用，帶來不好的使用者體驗，小程式也對模板訊息推送做了相應的限制。為了

【轉載】微信小程式-開發入門（一）

微信小程式已經火了一段時間了，之前一直也在關注，就這半年的發展來看，相對原生APP大部分公司還是不願意將主營業務放到微信平臺上，以免受制於騰訊，不過就小程式的應用場景（用完即走和二維碼分發等）還是很值得我們學習的，技術上面如果瞭解React的話，會發現他們在元件化上面有很多雷同之處。說白了，小程式就是基於微信

【 分類 】- 微信小程式

專欄達人 授予成功建立個人部落格專欄

【筆記】微信小程式

本意是想在小程式使用者授權失敗時，可以在頁面中提供一個按鈕，讓使用者點選按鈕能夠進行再次授權。 附button文件 問題：在小程式中設定的按鈕，在設定了bindtap的情況下點選，都會自動跳轉到log/log介面。 經查錯發現，是因為在

【開源】微信小程式、小遊戲以及 Web 通用 Canvas 渲染引擎

Cax 小程式、小遊戲以及 Web 通用 Canvas 渲染引擎 特性 Learn Once, Write Anywhere(小程式、小遊戲、PC Web、Mobile Web) 支援小程式、小遊戲以及 Web 瀏覽器渲染 小程式、小遊戲和 Web 擁有相同簡潔輕巧的 API 高效能的渲染架構 超輕量

【Node】微信小程式網路請求封裝

功能簡介 微信小程式網路請求封裝很簡單，因為我需要在每個網路請求裡面加入自己token、請求來源 等 ，以便於伺服器做驗證。 功能介紹 header ：可以填寫每次請求需要新增的資訊到header Code判斷：根據後臺的請求code進行

【iOS】微信小程式開啟APP到底是怎麼回事？

前言 從蘋果官方來看，小程式新增了兩個功能： 1. 支援開啟移動應用 2. 標題欄區域開放自定義 針對第二個功能，就是開發者可以自定義小程式選單欄的顏色風格，根據需求，對小程式選單外的標題區域進行自定義，比如設定標題區域的顏色。這裡主要介紹一下支援開啟移動應用的功

【程式碼】微信小程式 簡單一個頁面，網上圖片展示

//wxss/* 基礎樣式 */ view,scroll-view,swiper,swiper-item,icon,text,progress,button,checkbox-group,checkbox,form,input,label,picker,radio-group

【Java】微信小程式imgSecCheck介面示例-校驗一張圖片是否含有違法違規內容

  近期應該部分個人開發者小程式會收到如下通知 為了快速解決問題，就直接使用官方提供的介面 imgSecCheck校驗一張圖片是否含有違法違規內容 個人小程式只是圖片的一些處理識別。固只拿imgSecChec

【※墨痕】微信小程式工具註冊步驟

1、在微信公眾平臺官網首頁（ mp.weixin.qq.com）點選右上角的“立即註冊”按鈕。 2、選擇註冊的帳號型別  選擇“小程式”，點選“檢視型別區別”可檢視不同型別帳號的區別和優優勢 3、填寫郵箱和密碼 填寫未註冊過公眾平臺、開放平臺、企業

【※墨痕】微信小程式的開發步驟2

1、登陸微信公眾平臺後，點選小程式，進入小程式開發，找到下面的工具，點選進去微信開發者工具   2、點選下載微信小程式開發工具

【最佳實踐】微信小程式客服訊息實時通知如何快速低成本實現？

我們做微信小程式開發的都知道，只要在小程式頁面中新增如下程式碼即可進入小程式的客服會話介面： <button open-type="contact" >聯絡我們</button> 微信小程式客服會話介面如下圖所示：

用 mpvue 寫個【微博-青銅版】微信小程式

第一次寫小程式，由於偏愛 Vue，所以選則了 mpvue 這個框架。那就寫個青銅版微博來練練手吧。 效果截圖： 圖1：微博首頁 圖2：發微博 圖3：我的 技術要點 1、小程式框架：mpvue 2、http 請求庫：fly.js 3、狀態管理：vuex 4、資料來源：微博開放平臺 ap

【純前端】微信小程式驗證碼

  index.wxml 驗證碼： <input type='text' bindinput='makecodeInput'/> <view class='makecode' bindtap='getcode'>{{code}}</view

【微信小程式】微信小程式掉進的坑之與後臺資料互動

一、與後臺的資料互動 注：服務端語言為Java. 在進行資料互動時，用的是Servlet進行資料的獲取和回傳。 在小程式中提交引數時需要在header寫入 header: {

【小程式】微信小程式開發實踐

帳號相關流程 註冊範圍 企業 政府 媒體 其他組織 換句話講就是不讓個人開發者註冊。 :) 填寫企業資訊 不能使用和之前的公眾號賬戶相同的郵箱,也就是說小程式是和微信公眾號一個層級的。 填寫公司機構資訊,對公賬戶資訊 繫結管理員微信 企業認

【微信小程式】微信小程式與後臺的互動

js onLoad: function (options) { var that = this; var list = that.data.list; var currentPage = that.data.currentPage; wx.sh

【視訊分享】微信小程式入門與實戰

看到網友留言想要小程式的，想了想還是把這個提前吧，那幾個留言要小程式的記得讚賞嘿嘿。小程式官方正