5***@qq.com
5***@qq.com
  • 发布:2024-01-17 14:15
  • 更新:2024-01-29 20:39
  • 阅读:123

vue3 使用renderjs打包wgt包后 :change 导致白屏 去掉:change正常。在真机调试和安卓运行都正常。

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: 10

HBuilderX类型: 正式

HBuilderX版本号: 3.98

手机系统: Android

手机系统版本号: Android 11

手机厂商: 红米

手机机型: 9A

页面类型: vue

vue版本: vue3

打包方式: 云端

项目创建方式: HBuilderX

示例代码:

<template>
<view id="map-container" :prop="isLocation" :change:prop="mapModule.geolocation" ></view>
</template>
<script>
import { ref, reactive, defineComponent, toRefs, watch } from 'vue';
import { onShow } from '@dcloudio/uni-app'
export default defineComponent({
setup() {
const markers = ref([]);
const state = reactive({
isLocation: false
})
return {
...toRefs(state)
}
}
})
</script>

<script module="mapModule" lang="renderjs">
export default {
data () {
return {
map: null,
}
},
created() {},
methods: {
geolocation(newLocation, oldLocation) {
}
}
}
</script>

操作步骤:

真机和安卓运行 :change正常显示,打包wgt访问包白屏 去掉 :change打包wgt后才能正常。

预期结果:

:change能够操作renderjs层。

实际结果:

:change打包wgt白屏

bug描述:

vue3 使用renderjs打包wgt包后 :change 导致白屏 去掉:change正常。在真机调试和安卓运行都正常。

2024-01-17 14:15 负责人:DCloud_UNI_HRK 分享
已邀请:
DCloud_UNI_HRK

DCloud_UNI_HRK

我这边在安卓机上测试并无问题,请检查你的代码是否有误,我贴一下我的测试工程请供参考

<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="testRenderjs" 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>

要回复问题请先登录注册