1. uniapp 获取dom元素的宽高
在uniapp 中由于他禁止操作dom，所以不能直接获取dom元素，框架本身提供了获取元素宽高的方法
let obj = uni.createSelectorQuery().select('xx') // xx为class或者id，如 .block, #block
obj.boundingClientRect(function (data) { // data - dom中的参数，宽高等
console.log(data)
}).exec()
2. renderjs 获取dom元素
注：只支持 H5 和 App，官网详见 https://uniapp.dcloud.io/frame?id=renderjs
1. 注意事项
- 目前仅支持内联使用。
- 不要直接引用大型类库，推荐通过动态创建 script 方式引用。
- 可以使用 vue 组件的生命周期不可以使用 App、Page 的生命周期
- 视图层和逻辑层通讯方式与 WXS 一致，另外可以通过 this.$ownerInstance 获取当前组件的 ComponentDescriptor 实例。
- 观测更新的数据在视图层可以直接访问到。
- APP 端视图层的页面引用资源的路径相对于根目录计算，例如：./static/test.js。
- APP 端可以使用 dom、bom API，不可直接访问逻辑层数据，不可以使用 uni 相关接口（如：uni.request）
- H5 端逻辑层和视图层实际运行在同一个环境中，相当于使用 mixin 方式，可以直接访问逻辑层数据。
2. 基本用法
// test 为renderjs模块名称，lang固定写法
<script module="test" lang="renderjs">
export default {
// 与uni写法一致
}
</script>
3. 案例分析
- 在renderjs的script中，是无法获取到uni中script--data中的数据的，所以要通过一定的方式去传输
- 在renderjs中，调用方法时也可以通过this.$ownerInstance.callMethod('函数名', 数据)向uni的script发送
<template>
<view class="demo">
<!-- info随便写，但是要与chang后面的一致，text是renderjsmodule名称 -->
<!--data是要想renderjs发送的数据，updateData是renderjs中的监听方法 -->
<view :info="data" :change:info="text.updateData" ref="video"></view>
</view>
</template>
<!-- 普通的script标签 -->
<script>
export default {
data(){
return {
data: "hello"
}
},
methods:{
sendMsg(msg) {
console.log(msg) // 不好
}
}
}
</script>
<!-- renderjs的script标签 -->
<script module="text" lang="renderjs">
export default {
data(){
return {
}
},
methods:{
onClick(event, ownerInstance) {
// 向 uni 的script发送信息
this.$ownerInstance.callMethod('sendMsg', '不好')
},
updateData(newValue, oldValue, ownerInstance, instance) {
// newValue: 新数据
// oldValue: 老数据
},
}
}
</script>
注： 由于renderjs与uni的script运行在同一环境，不能保证加载顺序，所以，尽量把操作dom部分放在renderjs中，所有数据通过数据传递后，在renderjs中操作
在renderjs中，可能会有获取不到数据的情况，请确保组件数据优先与renderjs加载，确定所传输的数据有值
