一、效果

通过小程序>微信小程序实现简单的计数器功能，点一下+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等组件即可。

javascript">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();}   
})

小程序>微信小程序震动

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

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

小程序>微信小程序播放提示音

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