微信小程序—仿淘宝、微信、百度app键盘，顶部带语音输入

摘要

在使用搜索框功能时发现微信、淘宝、百度等都会弹出顶部带语音输入功能的软键盘，觉得很不错，小程序或许也会用到，先试着实现一下，结果发现，限于小程序官方接口的原因，并不能做到尽如人意，只是形似而已

效果

体验

实现思路

1、input第一次获取焦点时，可以通过bindkeyboardheightchange获得键盘弹出的高度和弹出动画时长，并设置为语音动画的位移点和时长
2、第一次获取焦点时，语音按钮延后弹出
3、之后可根据获取焦点和失去焦点控制语音动画的执行
4、防止点击空白处或者语音按钮而导致键盘关闭，input应设置属性hold-keyboard="true"

代码

js

data: {
   	keyboardHeight:0,
    keyboardDuration:0,
    oriBottom:0,
    voiceOpacity:0
  },
 onLoad: function (options) {
    var that = this
    var query = wx.createSelectorQuery();
    query.select('#viewVoice').boundingClientRect()
    query.exec(function (res) {
      that.setData({
        oriBottom: -res[0].height,
        voiceOpacity:1
      })
    })
  },
keyboradFocus(e){
    console.log(e)
    this.setData({
      keyboardHeight:e.detail.height
    })
    if (this.data.keyboardDuration != 0) {
      this.animate('.view-voice', [
        { bottom: this.data.oriBottom +"px"},
        { bottom: this.data.keyboardHeight + "px"}
      ], this.data.keyboardDuration * 800, function () {
      }.bind(this))
    }else{
      this.animate('.view-voice', [
        { bottom: this.data.oriBottom+"px" },
        { bottom: this.data.keyboardHeight + "px"}
      ], 250, function () {
      }.bind(this))
    }
  },
  keyboardBlur(e){
    console.log("失去焦点")
    var that = this
    this.animate('.view-voice', [
      { bottom: this.data.keyboardHeight + "px"},
      { bottom: this.data.oriBottom +"px"}
    ], this.data.keyboardDuration * 1000, function () {
    }.bind(this))
  },
  keyboardHeightChange(e){
    this.setData({
      keyboardDuration:e.detail.duration,
      keyboardHeight:e.detail.height
    })
  },
  inputVoice(){
    wx.showToast({
      title: '正在听您说话',
    })
  }

wxml

<input placeholder="键盘带顶部按钮" hold-keyboard="true" style="margin-top:50rpx;width:70%;text-align:center;border:1rpx solid #1AB84E;padding:15rpx 0; border-radius:10rpx" bindkeyboardheightchange="keyboardHeightChange" bindfocus="keyboradFocus" bindblur="keyboardBlur"></input>
<view id="viewVoice"  class="view-voice" style="width:100%;position:fixed;bottom:{{oriBottom}}px;display:flex;flex-direction:column;justify-content:center;align-items:center;opacity:{{voiceOpacity}}">
  <image style="width:80rpx;height:80rpx;padding:20rpx;" src="./voice.png" bindtap="inputVoice"></image>
</view>

问题

动画执行不够优秀，测试发现获取焦点及失去焦点的回调不够及时，要在软键盘弹出与关闭动画启动之后，望改良