uniapp renderjs

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. 案例分析

1. 在renderjs的script中，是无法获取到uni中script--data中的数据的，所以要通过一定的方式去传输
2. 在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="test" lang="renderjs">
    export default {
           data(){
                return {
                }
            },
            methods:{
              onClick(event, ownerInstance) {
                // 向 uni 的script发送信息
                ownerInstance.callMethod('sendMsg', '不好')
              },
              updateData(newValue, oldValue, ownerInstance, instance) {
                  // newValue: 新数据
                  // oldValue: 老数据
              },
          }
    }
</script>

注： 由于renderjs与uni的script运行在同一环境，不能保证加载顺序，所以，尽量把操作dom部分放在renderjs中，所有数据通过数据传递后，在renderjs中操作
在renderjs中，可能会有获取不到数据的情况，请确保组件数据优先与renderjs加载，确定所传输的数据有值