uni-app 在抖音小程序里 uni.onKeyboardHeightChange is not a function

发布于 1周前 作者 sinazl 来自 Uni-App

uni-app 在抖音小程序里 uni.onKeyboardHeightChange is not a function

产品分类

uniapp/小程序/字节跳动

操作步骤

uni.onKeyboardHeightChange(res => {  
  console.log(res.height)  
})

预期结果

返回高度

实际结果

uni.onKeyboardHeightChange is not a function

bug描述

文档上支持抖音小程序使用 uni.onKeyboardHeightChange,但运行后报错

Image 1 Image 2

开发环境信息

项目创建方式 PC开发环境操作系统 PC开发环境操作系统版本号 HBuilderX类型 HBuilderX版本号 第三方开发者工具版本号 基础库版本号
HBuilderX Windows 10 正式 4.28 4.3.0 3.41.0.10

2 回复

微信小程序,同问


在uni-app开发抖音小程序时遇到uni.onKeyboardHeightChange is not a function的错误,通常是因为抖音小程序平台不支持uni.onKeyboardHeightChange这个API。uni.onKeyboardHeightChange是uni-app框架提供的一个监听键盘高度变化的API,但并非所有小程序平台都支持这个API,特别是在特定的小程序平台上,比如抖音小程序。

为了解决这个问题,你可以采用其他方法来实现类似的功能,比如通过监听输入框的聚焦(focus)和失焦(blur)事件来间接获取键盘的状态。以下是一个使用输入框聚焦和失焦事件来模拟键盘高度变化的示例代码:

// 在页面的data中定义一个变量来存储键盘的高度
data() {
    return {
        keyboardHeight: 0 // 初始键盘高度设为0
    };
},
methods: {
    // 输入框聚焦时的事件处理
    handleInputFocus(e) {
        // 这里可以设置一个默认的键盘高度或者通过其他方式计算
        // 由于抖音小程序不支持直接获取键盘高度,这里我们假设一个固定值
        this.keyboardHeight = 300; // 假设键盘高度为300px
        // 你可以根据实际需求调整这个值或者通过其他方式动态计算
    },
    // 输入框失焦时的事件处理
    handleInputBlur(e) {
        this.keyboardHeight = 0; // 键盘收起时高度设为0
    }
},
onReady() {
    // 假设你的输入框有一个ref属性为'myInput'
    this.$refs.myInput.addEventListener('focus', this.handleInputFocus);
    this.$refs.myInput.addEventListener('blur', this.handleInputBlur);
},
onUnload() {
    // 页面卸载时移除事件监听器
    this.$refs.myInput.removeEventListener('focus', this.handleInputFocus);
    this.$refs.myInput.removeEventListener('blur', this.handleInputBlur);
}

在页面的模板中,你需要确保你的输入框有一个ref属性,这样你可以在JavaScript代码中引用它:

<template>
    <view>
        <input ref="myInput" type="text" placeholder="请输入内容" />
        <!-- 其他页面内容 -->
    </view>
</template>

请注意,上述代码示例中的键盘高度是硬编码的,这在实际应用中可能不是最佳实践。如果你需要更精确的控制,你可能需要考虑使用其他技术,比如计算屏幕高度的变化来间接推断键盘的高度,但这通常会更复杂且可能不够准确。在抖音小程序这样的特定平台上,由于API限制,你可能需要接受这种折衷的解决方案。

回到顶部