uni-app App端 TypeError: uni.createSelectorQuery(...).select(...).node is not a function 无法获取节点方法

uni-app App端 TypeError: uni.createSelectorQuery(…).select(…).node is not a function 无法获取节点方法

项目信息 详细信息
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境版本号 WIN7
HBuilderX类型 正式
HBuilderX版本号 3.1.18
手机系统 Android
手机系统版本号 Android 9.0
手机厂商 一加
手机机型 一加6
页面类型 vue
打包方式 离线
项目创建方式 HBuilderX

示例代码：

<template>  
    <view class="content">  
        <canvas id="c1" type="2d" style="display: inline-block; width: 300px; height: 300px;background-color: #007AFF;"></canvas>  
        <view class="text-class">  
            获取节点信息(直接运行到手机获取不到节点信息/但微信小程序可以)  
        </view>  
        <view class="text-class" :style="{'color':bgColor}">  
            {{title}}  
        </view>  
        <button @click="test()" type="primary">测试</button>  
    </view>  
</template>  

<script>  
export default {  
    data() {  
        return {  
            title: '--',  
            bgColor: "#007AFF"  
        }  
    },  
    onLoad() {  

    },  
    methods: {  
        test(){  
            try{  
                this.bgColor = "#007AFF"  
                uni.createSelectorQuery().select('#c1').node(res => {  
                    console.info(JSON.stringify(res.node))  
                    this.title = JSON.stringify(res.node)  
                }).exec()  
            }catch(error){  
                console.info("出现异常了",error)  
                this.bgColor = "#FF0000"  
                this.title = "出现异常了"+error  
            }  

        }  
    }  
}  
</script>  

<style>  
    .content {  
        display: flex;  
        flex-direction: column;  
        align-items: center;  
        justify-content: center;  
        margin: 10rpx auto;  
    }  

    .canvas-class{  
        width: 300rpx;  
        height: 300rpx;  
    }  

    .text-class {  
        margin: 10rpx;  
        padding: 10rpx;  
        width: 100%;  
    }  
</style>

操作步骤：

  • 分别运行在 微信小城 及 直接运行到手机

预期结果：

  • 小程序点击测试 成功获取到节点
  • App 成功获取到节点

实际结果：

  • 小程序点击测试 成功获取到节点
  • App 获取失败

bug描述：

TypeError: uni.createSelectorQuery(...).select(...).node is not a function  
在微信小程序平台上,node 节点可以正常获取,但是App无法成功获取  
附件中附带了 复现的Demo,请查收

示例图片 test-createSelectorQuery.zip


更多关于uni-app App端 TypeError: uni.createSelectorQuery(...).select(...).node is not a function 无法获取节点方法的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

请问问题解决了吗？我这边也遇到这样问题了

更多关于uni-app App端 TypeError: uni.createSelectorQuery(...).select(...).node is not a function 无法获取节点方法的实战教程也可以访问 https://www.itying.com/category-93-b0.html


请问问题解决了吗？我这边也遇到这样问题了

app 不支持 .node， 有没有其他代替方法

在uni-app App端，uni.createSelectorQuery().select().node()方法确实存在平台兼容性问题。这个API主要用于获取Canvas节点，但在App端支持不完善。

问题分析：

  1. node()方法在微信小程序平台可用，但在App端可能未实现或存在差异
  2. App端对Canvas 2D的支持与小程序平台不同步
  3. 当前HBuilderX版本(3.1.18)可能存在此API的兼容性问题

解决方案：

方案一：使用boundingClientRect替代

test(){  
    uni.createSelectorQuery().select('#c1').boundingClientRect(res => {
        console.info('Canvas位置信息:', res)
        this.title = JSON.stringify(res)
    }).exec()  
}

方案二：使用原生Canvas API

test(){  
    const query = uni.createSelectorQuery()
    query.select('#c1').fields({
        node: true,
        size: true
    }, res => {
        if(res && res.node){
            console.info('获取到Canvas节点:', res.node)
            this.title = '获取节点成功'
        } else {
            this.title = '未获取到节点信息'
        }
    }).exec()
}

方案三：延迟执行查询

test(){  
    setTimeout(() => {
        uni.createSelectorQuery().select('#c1').node(res => {
            if(res && res.node){
                this.title = JSON.stringify(res.node)
            } else {
                this.title = '节点获取失败'
            }
        }).exec()
    }, 100)
}
回到顶部