uni-app renderjs报错 vue.undefined is not a function;$t.setAttribute is not a function

uni-app renderjs报错 vue.undefined is not a function;$t.setAttribute is not a function

开发环境 版本号 项目创建方式
Windows 10 CLI

产品分类:uniapp/App

PC开发环境操作系统:Windows

手机系统:Android

手机系统版本号:Android 11

手机厂商:小米

手机机型:Redmi Note 9 Pro

页面类型:vue

vue版本:vue3

打包方式:离线

CLI版本号:3.0.0-3090620231104002


示例代码:

<template>    
    <view>    
        <!-- 设置 script 节点的 lang 为 renderjs    
script的module的名称可以随便取,module=(值任意,相当于命名空间,之后会根据这个名字调用其中的方法),但是change:参数名称必须和module保持一致,虽然不会阻断renderjs的运行,但是会报错,也会导致无法捕获数据的变化 -->    
        <!--  prop是个名字,可以随意改,注意:change:[name]这两个名字需要相同就行了  -->    
        <!-- 从service层到renderjs:首先在template中绑定一个service中定义的值,然后在同样的位置增加:change:(属性名)=(renderjs的module名.触发的方法)来实现通信。    
简单来说就是service负责数据的更改,通过template监听数据的变化来通知renderjs    
    this.$ownerInstance.callMethod方法必须通过点击事件执行-->    
        <!-- msg是要向renderjs发送的数据,testRenderjs 为renderjs模块名称,onChange是renderjs中的监听方法 -->    
        <view :prop="msg" :change:prop="testRenderjs.onChange" id="renderjs-view">{{msg}}</view>    

        <button @tap="changeMsgFn">点击修改options旧版版</button>    

        <button @tap="testRenderjs.emitData">直接调用renderjs中的emitData方法</button>    

        <button @click="update">更新版本</button>    
    </view>    
</template>    
<script>  
    // 原先的script,这里被称为service层  
    export default {    
        data() {    
            return {    
                //这里存放准备传递给renderjs的数据    
                msg: "我是service层原来的msg"    
            }    
        },    
        methods: {    
            // 触发service层 出入renderjs数据改变    
            changeMsgFn() {    
                //  修改msg 触发change    
                this.msg = "msg的值变了"    
            },    
            // 接收renderjs发回的数据    
            acceptDataFromRenderjs(data) {    
                console.log('从renderjs中接收到的数据', data)    
                this.msg = data.content    
            },    
            update() {    
                console.log("更新版本")    
                uni.downloadFile({    
                    url: "https://mp-def56af1-b497-4158-bdaa-adb4eb12820e.cdn.bspapp.com/cloudstorage/__UNI__9FEA80B.wgt",    
                    success: res => {    
                        console.log("res:", res)    
                        // 下载好直接安装,下次启动生效    
                        plus.runtime.install(res.tempFilePath, {    
                            force: true    
                        }, (success) => {    
                            console.log(success)    
                            plus.runtime.restart();      
                        }, (fail) => {    
                            console.log("失败" + fail)    
                        });    
                    }    
                });    
            }    
        }    
    }  
</script>  

<!--  testRenderjs 为renderjs模块名称,lang固定写法 -->    
<script module="test" lang="renderjs">  
    export default {  
        data() {    
            return {    
                content: "我是来自renderjs的数据"    
            }    
        },    
        created() {    
            console.log('renderjs初始化完毕')    
        },    
        mounted() {    
            const view = document.getElementById('renderjs-view')    
            const button = document.createElement('button')    
            button.innerText = '一个按钮'    
            view.appendChild(button)    
        },    
        methods: {    
            // 接收逻辑层service层发送的数据    
            onChange(newValue, oldValue, ownerInstance, instance) {    
                console.log('service层中的options发生变化')    
                console.log('新值newValue', newValue)    
                console.log('旧值oldValue', oldValue)    
                // ownerInstance和this.$ownerInstance一样,可用来向service层通信         
                // instance和ownerInstance的区别是:           
                // instance.$el指向的是触发事件的那个节点;ownerInstance.$el指向当前vue文件中的根节点;        
                // instance的作用目前尚不明确,官方没有给出用法    
            },    
            // 发送数据到service层    
            emitData(event, ownerInstance) {    
                // event是事件对象    

                ownerInstance.callMethod('acceptDataFromRenderjs', {    
                    content: this.content    
                })    
                // 或者    
                /* this.$ownerInstance.callMethod('acceptDataFromRenderjs',{    
                    content:this.content    
                }) */    
                // 需要注意的是:只有通过在template中用户手动操作触发renderjs的方法参数是这两个:event, ownerInstance;通过其他方法触发的函数参数不一样    
            }    

        }    
    }  
</script>

更多关于uni-app renderjs报错 vue.undefined is not a function;$t.setAttribute is not a function的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

问题已解决,将cli更新到3.0.0-4000820240401001版本就行了

更多关于uni-app renderjs报错 vue.undefined is not a function;$t.setAttribute is not a function的实战教程也可以访问 https://www.itying.com/category-93-b0.html


请问是更新hbuilder吗

我是用cli创建项目的,更新cli版本就行

非cli项目 也报这个错,怎么解决?

哥,我照着你的版本更新了cli 还是会有vue.undefined is not a function的情况 太难了

uni-app 中使用 renderjs 时,出现 vue.undefined is not a function$t.setAttribute is not a function 的错误,通常是因为在 renderjs 中使用了不支持的 Vue API 或 DOM 操作方式。renderjs 是一个运行在 WebView 中的 JavaScript 环境,它并不完全支持 Vue 的所有特性,因此在编写 renderjs 代码时需要注意以下几点:

1. 避免使用 Vue 的 this 上下文

renderjs 中的 this 并不是 Vue 实例,因此在 renderjs 中直接使用 this 可能会导致 vue.undefined 的错误。你可以通过传递参数或使用闭包的方式来访问数据。

2. 使用原生 DOM 操作

renderjs 中不能直接使用 Vue 的 $refs$el 等 Vue 特有的 API。你需要使用原生 JavaScript 的 DOM 操作方法,例如 document.getElementByIdelement.setAttribute

3. 确保 $t 是一个有效的 DOM 元素

$t.setAttribute is not a function 的错误通常是因为 $t 不是一个有效的 DOM 元素。你需要确保 $t 是通过 DOM 操作方法获取到的元素。

示例代码

假设你有一个 renderjs 的代码块,以下是一个正确的示例:

// renderjs 代码
export default {
  mounted() {
    // 使用原生 DOM 操作
    const element = document.getElementById('myElement');
    if (element) {
      element.setAttribute('data-custom', 'value');
    }
  },
  methods: {
    updateElement() {
      const element = document.getElementById('myElement');
      if (element) {
        element.setAttribute('data-updated', 'true');
      }
    }
  }
}
回到顶部