uniapp 使用renderjs通信

我即将远走丶或许也能高飞

已于 2024-09-03 10:23:16 修改

阅读量606

点赞数 2

文章标签： uni-app java 前端

于 2024-08-06 19:34:06 首次发布

本文链接：https://blog.csdn.net/weixin_47756693/article/details/140963093

版权

一、 server层向renderjs传值，并初始化renderjs

prop：可以随便定义

renderTaskDetail：是传往renderjs的数据

change:prop：prop和必须上面prop字段一样

renderScript.initAmap：【 renderScript】需要renderjs 中script标签的module属性一致

【initAmap】是renderjs中定义的初始化方法

<view class="mpapp-container">
    <view 
        style="width: 750rpx; height:650rpx;" 
        :prop="renderTaskDetail" 
        :change:prop="renderScript.initAmap" >
    </view>
</view>

serve层

<script>
    export default{
        data(){
            return{
                renderTaskDetail:{}
            }
        },
        onLoad(){
           setTimeout(()=>{
                //传给renderjs的数据
                this.renderTaskDetail= {
                    name:"小王"
                }
            },1500) 
        }
    }
</script>

renderjs

<script module="renderScript" lang="renderjs">
    export default{
        data(){
            return{
                renderTaskDetail:{}
            }
        },
        mounted() {
			const script = document.createElement('script')
			
			script.src = 'https://maps.googleapis.com/maps/api/js?key=abcdefg123456789&callback=initMap'  
			
			document.head.appendChild(script)  
		}, 
        methods: {    
			initAmap(value) {  
				console.log("这里能拿到serve层传过来的数据并初始化",value)
			},
        }
    }
</script>

二、 renderjs向server层传值

server层


<script>
	export default {
		data() {
			return {}
		},
		methods: {
			/**
			 *  给renderJS调用的方法
			 */
			methodForRenderJs:function(val){
				console.log("收到参数：");
				console.log(val);
			},
		}
	}
</script>

renderjs

<script module="renderScript" lang="renderjs">
    export default{
  
        mounted(){    
		    this.$ownerInstance.callMethod('methodForRenderJs',{val1:"参数1",val2:"参数2"});
        }
    }
</script>