介紹

搖出微笑是一款功能非常簡潔的小程序，非常適合用來作為新手入門的第一個實戰項目。

主要涉及到的功能有：

• 小程序動畫接口 wx.createAnimation，
• 搖一搖，基于 重力感應接口（ wx.onAccelerometerChange ）實現
• 列表渲染
• 其他

結構

• 首頁
• 列表
• 個人

首頁

首頁涉及兩部分主要功能，一個是動畫，一個是用搖一搖的功能。
在這里就說一說實現思路，有興趣的同學可以去看源代碼，這樣比較直觀。

動畫

動畫是使用微信提供的 wx.createAnimation 接口來實現的，也是想了解一下這個動畫接口的完善度。

通過觀察渲染出來的Wxml文件，可以發現 wx.craeteAnimation 設置的一些動畫方法會在 view 標簽中多處來的 style 中體現出來。

大概說一下實現首頁動畫的思路吧

由于三個框的旋轉角度不一樣，所以我創建了三個動畫實例

var createAnimation = function() {
  return wx.createAnimation({
    duration: 400,
    timingFunction: 'ease-out',
    transformOrigin: "0% 0%",
  })
}

var animationItem0 = createAnimation()
var animationItem1 = createAnimation()
var animationItem2 = createAnimation()

然后用 AnimationData0 ，AnimationData1，AnimationData2 來分別存儲 動畫數據，用 arrAnimation 來存儲這是三個 動畫數據。

Page({
	data: {
	  AnimationData0: {},
	  AnimationData1: {},
	  AnimationData2: {},
	  arrAnimation: [],
	  ...
	},
	...
})

setAnimationData: function() {

  this.setData({
    AnimationData0: animationItem0.export(),
    AnimationData1: animationItem1.export(),
    AnimationData2: animationItem2.export()
  })

  var data1 = this.data.AnimationData0 
  var data2 = this.data.AnimationData1
  var data3 = this.data.AnimationData2
  
  var arr = [data1, data2, data3]

  this.setData({arrAnimation: arr})
}

考慮到 Wxml 我是用 for循環 渲染出來的（其實也許直接用三個 view 實現邏輯會更簡單），所以就需要動態綁定每一個元素的ID，這樣才能知道哪個框是哪個動畫，點擊的又是哪個框。

<view  catchtouchend = "touchEnd">
  <block wx:for="{{filterTips}}" wx:key="{{index}}">
    <view id="item_{{index}}" 
        animation="{{arrAnimation[index]}}"
        data-index="{{index}}"
        class="item  {{activeIndex == index ? 'touched' : 'untouched'  }} " >
      {{item.text}}
    </view>
  </block>
</view>

搖一搖

至于搖一搖功能，因為微信沒有提供具體的搖一搖接口，但是提供了重力感應接口 wx.onAccelerometerChange，我們如果想要使用搖一搖功能，就得基于此來實現。

關于重力感應有個問題就是，官方沒有提供停止監聽重力感覺的接口，所以會導致一個情況就是：用戶在其他頁面時，重力感應依然在監聽。一個不怎么好的解決方案時利用 頁面生命周期的 onHide ()函數。

通過這種方式，起碼用戶不會在其他頁面觸發搖一搖功能。

onHide: function() {
  //當前頁面處于onHide狀態
  this.setData({onHide: true})
},

wx.onAccelerometerChange((res) => {
  if(this.data.onHide === true) {
    return
  }
}

關于搖一搖的實現，其本質無非就是記錄一段時間內，重力感應返回的三個方向的值變化有多大，如果超過某個閥值，則認為用戶觸發了搖一搖事件。

wx.onAccelerometerChange((res) => { 

  if(this.data.onHide === true) {
    return
  }
  var currentTime = new Date().getTime()
  var SHAKE_THRESHOLD = app.globalData.sensitivity;
  var lastUpdate = this.data.lastUpdate
  if ((currentTime - lastUpdate) > 100) {
    var diffTime = currentTime - lastUpdate;
    var speed = Math.abs(res.x + res.y + res.z - this.data.lastX - this.data.lastY - this.data.lastZ) / diffTime * 10000;

    if(speed > SHAKE_THRESHOLD && tag) {
      tag = false
      //用戶搖一搖后的代碼邏輯
      //...
      setTimeout(() => {
        tag = true;
      }, 800)
    }
  }
  this.setData({
    lastX: res.x,
    lastY: res.y,
    lastZ: res.z,
    lastUpdate: currentTime   
  })
})

列表

作為列表頁，主要涉及的就是 列表渲染，可滾動視圖區域（scroll-view），上拉加載更多。

在 scroll-view 中 無法觸發 onPullDownRefresh，也就是不支持下拉刷新。

若要使用下拉刷新，請使用頁面的滾動，而不是 scroll-view ，這樣也能通過點擊頂部狀態欄回到頁面頂部

這里涉及到一個思想，就是一個函數盡量做一件事。

具體來說，比如獲取列表的網絡請求我們就封裝成一個函數，然后因為請求資源列表時涉及到 per（一頁多少個） 和 page（第幾頁） 參數，所以我們可以把 per 和 page 的值放在 data 中。

這樣就有一個好處。比如實現加載更多這個功能的時候，只需要把 page ＋ 1，然后再去獲取資源列表就可以了。

看代碼

loadMore: function() {
  this.setData({page: this.data.page + 1})
  this.getList()
},

getList: function() {

  var page = this.data.page;
  var per = this.data.per;


  wx.request({
    url: 'https://xxxxx.com/',
    data: {
      page: page,
      per: per
    },
    method: 'GET',
    success: (res) => {
      this.setData({listLi: this.data.listLi.concat(res.data)})
    }
  })
},

wxml的內容就很簡單了，主要用到了微信提供的 列表渲染 功能

<view>
  <view>
    <scroll-view class="scroll" scroll-top="{{scrollTop}}" style="height:{{windowHeight}}px;" scroll-y="true" bindscroll="bindScrollHandel"   bindscrolltolower="loadMore">
      <view class="block" wx:for="{{listLi}}" wx:key="{{index}}" >
        <text>{{item.text}}</text>
      </view>    
    </scroll-view>
  </view>
  <view class="top" hidden="{{hiddenIcon}}" catchtap="goTop">?</view>
</view>

個人

個人頁面在獲取用戶信息的時候用到了回調函數，就重點說一下這個吧。

先看 app.js 這段代碼。

定義 getUserInfo 函數，該函數接受一個 回調函數 作為參數，邏輯是：如果 globalData 中有 userInfo 的值，就把該 userInfo 的值作為參數給這個回調函數，反之，則調用 wx.login 和 wx.getUserInfo 獲取 userInfo，然后 賦值給 globalData.userInfo，并同樣的作為參數給這個回調函數。

getUserInfo: function(cb){
  var that = this
  if(this.globalData.userInfo){
    typeof cb == "function" && cb(this.globalData.userInfo)
  }else{
    //調用登錄接口
    wx.login({
      success: function (res) {
        wx.getUserInfo({
          success: function (res) {
            that.globalData.userInfo = res.userInfo
            typeof cb == "function" && cb(that.globalData.userInfo)
          }
        })
      }
    })
  }
},

個人頁面，調用 getUserInfo（）以一個函數作為參數，然后該函數的參數就有 userInfo 的值

onLoad: function () {
  var that = this
  //調用應用實例的方法獲取全局數據
  app.getUserInfo(function(userInfo){
    //更新數據
    that.setData({
      userInfo:userInfo
    })
  })
}

想一想，如果用戶是第一次使用，那么 globalData 中肯定沒有 userInfo 的值，這時候會從微信服務器中獲取，而如果 globalData 中 userInfo的值，那么就不從服務器中獲取，直接從globalData中取值即可。

后記

這是我第一次寫教程，個人感覺寫的并不是很好，一方面是因為沒有寫教程的經驗，另一方面則是因為真的很忙，所以在這里跟大家說一說抱歉！然后附上這個小程序的源碼地址

如果你看了代碼后覺得有什么地方想找我探討的，可以來問我，我非常樂意跟你交流。

如果你看了代碼后愿意給我一些好的批評或者建議，我會非常開心。

源碼地址：https://github.com/wardenger/shakeTips（歡迎點star）

源碼下載：shakeTips-master.zip