微信小程序实现计数器，微信小程序震动，微信小程序提示音

一、效果

通过微信小程序实现简单的计数器功能，点一下+1的同时震动及发出提示音。

预览效果：

扫码进入小程序体验，或者微信搜索“即享工具箱”进入到“计数器”模块体验。

二、编码

wxml:

<!--pages/camcelToUnderlane/count.wxml-->
<view class="count-main-view">
  <van-toast id="van-toast" />
  <view class="count-result">
    <view style="font-size: 40px;font-weight: bold;">{{ reslutReleaseTime }}</view>
  </view>
  <view class="count-btn-view">
    <van-button round type="info" class="count-btn" bind:click="onAdd">计数</van-button>
  </view>
</view>
<view class="share-btn-area">
  <van-cell-group style="text-align: left;">
    <van-cell title="开启震动" >
      <van-switch size="20px" slot="right-icon" checked="{{ config.enableShake }}" bind:change="onShakeChange" />
    </van-cell>
    <van-cell title="开启声音"  border="{{ false }}">
      <van-switch size="20px" slot="right-icon" checked="{{ config.enableVoice }}" bind:change="onVoicChange" />
    </van-cell>
  </van-cell-group>
  <button class="share-btn" size="mini" type="default" open-type="share">
    <van-icon name="share-o" />分享功能给朋友
  </button>
  <button class="share-btn" size="mini" type="default" style="margin-left: 20px;" bindtap="onClear">
    <van-icon name="clear" />计数清零
  </button>
</view>

vant-xxx是属于vant weapp框架的组件。如果不用vant框架，使用微信提供的button等组件即可。

const util = require('@/utils/util');
Page({

  /**
   * 页面的初始数据
   */
  data: {
    config: {

      enableShake: true,
      enableVoice: true,
    },
    reslutReleaseTime:0
  },
  onAdd(event) {
    const me = this;
    if(this.data.config.enableVoice){
      this.data.innerAudioContext.play();
    }
    me.setData({
      ['reslutReleaseTime']: this.data.reslutReleaseTime+1
    })
    if(this.data.config.enableShake){
      wx.vibrateShort({
        type:"heavy"
      })
    }
  },
  onShakeChange(event){
    const me=this;
    me.setData({
      ['config.enableShake']: event.detail
    })
  },
  onVoicChange(event){
    const me=this;
    me.setData({
      ['config.enableVoice']: event.detail
    })
  },
  onClear(){
    this.setData({
      ['reslutReleaseTime']: 0
    })
  },
  onShow: function () {
    const innerAudioContext = wx.createInnerAudioContext({
      useWebAudioImplement: true 
    })
    innerAudioContext.src = '/audio/click.wav';
    this.setData({
      ['innerAudioContext']: innerAudioContext
    })
  },
   /**
     * 生命周期函数--监听页面隐藏
     */
    onUnload: function () {
    this.data.innerAudioContext.destroy();
   }   
})

微信小程序震动

wx.vibrateShort({ type:"heavy" })

震动强度类型，有效值为：heavy、medium、light

微信小程序播放提示音

const innerAudioContext = wx.createInnerAudioContext({ useWebAudioImplement: true});
innerAudioContext.src = '/audio/click.wav'; 
innerAudioContext.play();