微信小程序项目-电子木鱼

好久之前就看到过电子木鱼这类微信小程序，当时认为这东西热度很快就没了。所以，就没把这项目当作一回事。后来，发现经小红书炒作后，电子木鱼变得越来越红。因此，就有了这个项目。

界面介绍

核心代码

// index.ts
var animation: WechatMiniprogram.Animation
const innerAudioContext = wx.createInnerAudioContext({
  useWebAudioImplement: true // 是否使用 WebAudio 作为底层音频驱动，默认关闭。对于短音频、播放频繁的音频建议开启此选项，开启后将获得更优的性能表现。由于开启此选项后也会带来一定的内存增长，因此对于长音频建议关闭此选项
})
innerAudioContext.src = '/images/music.mp3'
//Page Object
Page({
  data: {
    show: false,
    countToday: wx.getStorageSync('countToday') || 0,
    countSum: wx.getStorageSync('countSum') || 0,
  },
  //options(Object)
  onLoad: function () {
    this.getData()
  },
  getData: function () {
    let myDate = new Date();
    let today = myDate.toLocaleDateString()
    if (wx.getStorageSync('today') == today) {
      this.setData({
        countToday: wx.getStorageSync('countToday') || 0,
        countSum: wx.getStorageSync('countSum') || 0,
      })
    } else {
      this.setData({
        countToday: 0,
        countSum: wx.getStorageSync('countSum') || 0,
      })
      wx.setStorageSync('today', today);
    }
  },
  onShareAppMessage: function () {

  },

  // 创建动画
  onShow: function () {
    animation = wx.createAnimation({
      duration: 200,
      timingFunction: 'ease'
    })
  },

  start: function () {
    innerAudioContext.play() // 播放
    wx.setStorageSync('countToday', this.data.countToday + 1);
    wx.setStorageSync('countSum', this.data.countSum + 1);
    animation.scale(1.25).step()
      .scale(1).step()
    this.setData({
      animation: animation.export(),
      countToday: this.data.countToday + 1,
      countSum: this.data.countSum + 1,
      show: true
    })
  },

  leave: function () {
    setTimeout(() => {
      this.setData({
        show: false
      })
    }, 70)
  },
});

项目地址

电子木鱼

部署步骤

1. git clone https://gitee.com/MarcoMaHH/dzmy.git
2. 修改project.config.json的appid