uni-app 获取节点信息未包含 properties 的bug APP内不返回信息 小程序内正常

uni-app 获取节点信息未包含 properties 的bug APP内不返回信息 小程序内正常

项目信息 详情
产品分类 uniapp/App
PC开发环境操作系统 Mac
PC开发环境操作系统版本号 mac11.4
HBuilderX类型 正式
HBuilderX版本号 3.2.9
手机系统 全部
页面类型 vue
打包方式 云端
项目创建方式 HBuilderX

测试过的手机：

  • 华为P30Pro
  • 苹果12Pro

示例代码：

var K = {  
    dataset: true,  
    size: true,  
    rect: true,  
    computedStyle: ["fontFamily", "fontSize", "fontStyle", "fontWeight"],  
    node: true,  
    properties: ["checked", "color", "disabled", "icon", "mode", "placeholder", "placeholderStyle",  
        "placeholderClass", "plain", "src", "style", "type", "value"  
    ]  
};  
uni.createSelectorQuery().selectAll("#id")  
    .fields(K, data => {  
         console.log("得到节点信息" + JSON.stringify(data));  
         console.log("节点的宽为" + data.width);  
    }).exec();

操作步骤：

  • 直接运行就可以 APP和小程序返回结果不一致

预期结果：

bottom: 124.78125
dataset: {type: "input"}
disabled: true
fontFamily: "UICTFontTextStyleBody"
fontSize: "14px"
fontStyle: "normal"
fontWeight: "400"
height: 22.390625
left: 0
nodeCanvasType: "text"
placeholder: ""
placeholderClass: ""
placeholderStyle: ""
right: 375
top: 102.390625
type: "text"
value: "12345"
width: 375

实际结果：

{
"bottom": 177.5625,
"height": 22.390625,
"fontSize": "16px",
"fontWeight": "normal",
"width": 428,
"fontFamily": "\"PingFang SC\", Arial, \"Hiragino Sans GB\", \"Microsoft YaHei\", sans-serif",
"left": 0,
"dataset": {
"type": "input"
},
"right": 428,
"top": 155.171875,
"fontStyle": "normal"
}

bug描述：

方法内的可选参数 properties 在app内无任何返回结果，但是小程序内是正常的


更多关于uni-app 获取节点信息未包含 properties 的bug APP内不返回信息 小程序内正常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 获取节点信息未包含 properties 的bug APP内不返回信息 小程序内正常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的uni-app平台差异问题。在App端使用uni.createSelectorQuery().fields()时，properties参数确实存在兼容性问题。

问题分析：

  1. 平台实现差异：小程序原生支持通过properties获取组件属性，但App端（特别是iOS）的底层实现机制不同
  2. DOM结构差异：App端基于WebView渲染，而小程序是原生组件，属性获取方式存在本质区别
  3. API限制：App端对DOM属性的访问受到更多安全限制

解决方案：

方案1：使用ref替代（推荐）

// 模板中
<view ref="myElement"></view>

// 脚本中
this.$refs.myElement.$el.getAttribute('checked')
// 或直接访问组件实例的属性
this.$refs.myElement.value

方案2：通过dataset传递数据

// 设置data-属性
<view :data-checked="checked" data-type="input"></view>

// 获取时通过dataset访问
uni.createSelectorQuery()
  .select('#id')
  .fields({
    dataset: true,
    rect: true
  }, res => {
    console.log(res.dataset.checked)
    console.log(res.dataset.type)
  })
  .exec()

方案3：使用条件编译处理平台差异

// #ifdef APP-PLUS
// App端使用ref方式
const value = this.$refs.element.value
// #endif

// #ifdef MP-WEIXIN
// 小程序端使用properties
uni.createSelectorQuery()
  .select('#id')
  .fields({
    properties: ['value']
  }, res => {
    console.log(res.value)
  })
  .exec()
// #endif
回到顶部