uni-app中使用RenderJs 使用原生js 使用iframe

1. RenderJs运行机制

RenderJs运行的层叫【视图层】，Uniapp原生Script叫【逻辑层】，逻辑层要调用视图层需要使用一个叫【watcher】，具体怎么调用呢

为了实现这两层之间的通信，uniapp提供了一些特定的机制。以下是对这些通信机制的详细解释，以及一个具体的示例，说明逻辑层如何调用视图层的watcher。

通信机制
‌通过this.$ownerInstance获取当前组件的ComponentDescriptor实例‌：

在RenderJs中，你可以通过this.$ownerInstance访问到当前组件的ComponentDescriptor实例。这个实例提供了与逻辑层通信的接口。
‌通过事件和callMethod方法进行通信‌：

逻辑层可以触发事件，并在RenderJs中监听这些事件。
RenderJs也可以通过this.$ownerInstance.callMethod方法调用逻辑层中的方法，并传递数据。

2. 举例

<template>
  <view>
    <!-- 视图层组件，绑定:prop和:change:prop -->
    <view :prop="someData" :change:prop="renderScript.onDataChange"></view>
    <button @click="changeData">改变数据并触发watcher</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      someData: '初始数据', // 逻辑层数据
    };
  },
  methods: {
    changeData() {
      this.someData = '新数据'; // 改变数据，这将触发视图层的watcher
    },
    // 逻辑层接收来自视图层的数据（可选）
    receiveDataFromRenderJs(data) {
      console.log('从视图层接收到的数据:', data);
    },
  },
};
</script>

<script module="renderScript" lang="renderjs">
export default {
  data() {
    return {
      receivedData: '', // 用于存储从逻辑层接收到的数据
    };
  },
  methods: {
    onDataChange(newValue, oldValue, ownerVm, vm) {
      console.log('数据变化了，新值:', newValue, '旧值:', oldValue);
      
      // 可以在这里调用逻辑层的方法，并传递数据
      // ownerVm.callMethod('receiveDataFromRenderJs', { someKey: newValue });
    },
    // 视图层向逻辑层发送数据（示例）
    sendDataToLogicLayer() {
      // 假设这里有一些逻辑需要向逻辑层发送数据
      const dataToSend = { fromRenderJs: '这是视图层的数据' };
      this.$ownerInstance.callMethod('receiveDataFromRenderJs', dataToSend);
    },
  },
};
</script>

解释
‌模板部分‌：

我们定义了一个视图层组件，并使用:prop和:change:prop绑定了逻辑层的数据和视图层的watcher方法。
当someData在逻辑层发生变化时，将触发renderScript.onDataChange方法。
‌逻辑层部分‌：

我们定义了一个someData数据和一个changeData方法，用于改变someData的值。
当someData的值改变时，将触发视图层的onDataChangewatcher方法。
我们还定义了一个receiveDataFromRenderJs方法，用于接收来自视图层的数据（虽然在这个示例中并没有直接调用它，但展示了如何接收数据）。
‌视图层（RenderJs）部分‌：

我们定义了一个onDataChange方法，当逻辑层的数据变化时，这个方法将被调用。
在onDataChange方法中，我们可以访问新旧值，并可以在这里调用逻辑层的方法，传递数据。
我们还定义了一个sendDataToLogicLayer方法，用于演示如何从视图层向逻辑层发送数据。
通过这种方式，你可以在uniapp中实现逻辑层和视图层之间的有效通信

3. 使用iframe打开src并获取src返回的数据
由于项目需要调用另一网页，并需要数据往返操作，遂使用iframe

发送数据参数给iframe，通过在mounted()给iframe添加返回消息的监听事件 调用onMessage(e)方法，获取iframe返回的图片base64数据 再通过button点击事件 用test()方法传递给逻辑层

<template>
	<view>
		<view :prop="someData" :change:prop="renderjs.onPrint"></view>
		<iframe v-show="true" class="printIframe" id="printIframe"
			src="http://192.168.120.50/LCA/index.html"></iframe>
		
		<button class="btn1" v-show="false" ref="btn1" @click="renderjs.test">打印</button>
	</view>
</template>

<script>
	export default {
	  data() {
	    return {
	      someData: '初始数据', // 逻辑层数据
	    };
	  },
	  methods: {
	    changeData() {
	    	//数据变化时则调用renderjs.onPrint，
	    	this.someData = '新数据'; // 改变数据，这将触发视图层的watcher
	    },
	    // 逻辑层接收来自视图层的数据（可选）
	    receiveDataFromRenderJs(data) {
	      console.log('从视图层接收到的数据:', data);
	    },
	  },
	};
</script>
<script lang="renderjs" module="renderjs">
	export default {
		data() {
			return {
				image: '',
				brcode: ''
			}
		},
		methods: {
			test(e, o) {
				if(o){
					o.callMethod('testFun', this.image)
				}else{
					this.$o.callMethod('testFun', this.image)
				}
				
			},
			onMessage(e) {
				//iframe返回的数据e.data.data（图片base64）
				console.log(e.data)
				if (e.data.data) {
					this.image = e.data.data
					if (document.querySelector('.btn1')) {
						document.querySelector('.btn1').click()
					}
				}
			},
			onPrint(newValue, oldValue, ownerVm, vm) {
				console.log('数据变化了，新值:', newValue, '旧值:', oldValue);
				if (newValue && newValue.length > 0) {
					const iframe = document.querySelector(".printIframe")
					
					iframe.contentWindow.postMessage({
						Print_Data: newValue//把新数据发送给iframe，iframe会返回标签图片的base64
					}, '*');

				}
			}
		},
		mounted() {
			//添加iframe返回消息的监听事件，调用this.onMessage方法
			window.removeEventListener('message', this.onMessage);
			window.addEventListener('message', this.onMessage);

		}
	}
</script>