<script module="openlayers" lang="renderjs">
    export default {
        mounted() {
            // ...
        },
        methods: {
            // ...
        }
    }
</script>

<!--
 H5:所有 UNI 框架的生命周期都可使用
 APP:僅可使用 VUE 組件生命周期
 視圖層與邏輯層可以重復(fù)定義生命周期，都會(huì)執(zhí)行。
-->

<!-- 邏輯層 -->
<script>
 export default {
        onLoad() {
            console.log('邏輯層生命周期 - onLoad'); 
        },
        
        created() {
            console.log('邏輯層生命周期 - created');
        },
        
        mounted() {
            console.log('邏輯層生命周期 - mounted');
        }
    }
</script>

<!-- 視圖層 vue3版本下不會(huì)走下面的方法 -->
<script module="openlayers" lang="renderjs" type="module" >
 export default {
        onLoad() {
            console.log('視圖層生命周期 - onLoad'); // 頁(yè)面生命周期 APP 不會(huì)執(zhí)行 H5 會(huì)執(zhí)行
        },
        
        created() {
            console.log('視圖層生命周期 - created'); // 組件生命周期 H5 APP 都會(huì)執(zhí)行，重復(fù)定義也會(huì)執(zhí)行，不會(huì)被覆蓋。
        }, 
        
        mounted() {
            console.log('視圖層生命周期 - mounted'); // 組件生命周期 H5 APP 都會(huì)執(zhí)行，重復(fù)定義也會(huì)執(zhí)行，不會(huì)被覆蓋。
        }
    }
</script>

<!-- 邏輯層 -->
<script>
 export default {
        data() {
            return {
                str:"邏輯層的數(shù)據(jù)"
            }
        },
        
        methods: {
            test() {
                return "調(diào)用邏輯層的方法"
            }
        }
        
    }
</script>

<!-- 視圖層 -->
<script module="openlayers" lang="renderjs" type="module" >
 export default {
        mounted() {
            console.log("嘗試獲取邏輯層的數(shù)據(jù)",this.str) // H5端可正常打印 APP打印undefined
            console.log("嘗試調(diào)用邏輯層的方法",this.test()) // H5端可正常調(diào)用 APP端報(bào)錯(cuò)
        }
    }
</script>

<template>
	<view>
		<!-- 監(jiān)聽(tīng)變量 operation 的變化，operation 發(fā)生改變時(shí)，調(diào)用 openlayers 模塊的 loadOperation 方法 -->
		<view :operation="operation" :change:operation="openlayers.loadOperation"></view>
		<view>點(diǎn)擊了 {{total}} 次</view>
		<button @click="onClick">點(diǎn)擊</button>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				operation: true,
				total: 0,
			}
		},
		methods: {
			/**
			 * 點(diǎn)擊事件
			 */
			onClick() {
				this.operation = !this.operation
			},

			/**
			 * 接收 renderjs 傳過(guò)來(lái)的數(shù)據(jù)
			 * @param {Number} num 接收的內(nèi)容
			 */
			reciveMessage(data) {
				this.total = data;
			}
		}
	}
</script>

<script module="openlayers" lang="renderjs">
	export default {
		data() {
			return {
				count: 0
			}
		},
		methods: {
			/**
			 * @param {*} newValue 新的值或狀態(tài)
			 * @param {*} oldValue 舊的值或狀態(tài)
			 * @param {*} ownerInstance 擁有該數(shù)據(jù)或組件的實(shí)例
			 * @param {*} instance 當(dāng)前操作的具體實(shí)例
			 */
			loadOperation(newValue, oldValue, ownerInstance, instance) {
				console.log(newValue, oldValue, ownerInstance, instance);
				this.$ownerInstance.callMethod('reciveMessage', ++this.count); // 向uni-app頁(yè)面組件發(fā)送信息
			},
		}
	}
</script>

<template>
    <view>
        <view id="mymap" class="mymap"></view>
        
        <view class="but_sty">
            <button @click="openlayers.zoomIn">放大</button>
            <button @click="openlayers.zoomOut">縮小</button>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {}
        }
    },
</script>

<script module="openlayers" lang="renderjs">
    import {
        mapObject
    } from "@/common/openlayers/openlayerMap.js";
    
    export default {
        methods: {
            /**
             * 地圖放大
             */
            zoomIn() {
                console.log('放大');
                mapObject.mapZoom('in');
            },
    
            /**
            * 地圖縮小
            */
            zoomOut() {
                console.log('縮小');
                mapObject.mapZoom('out');   
            },
        }
    }
</script>