快捷導(dǎo)航

uni-app中使用renderjs的詳細步驟講解

更新時間：2024年12月30日 09:04:49 作者：米奇想摸魚

這篇文章主要介紹了uni-app中使用renderjs的詳細步驟,RenderJS是一種可以直接運行在視圖層（webview）中的JavaScript技術(shù),用于優(yōu)化大量DOM操作的性能,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

1.為什么要使用 renderjs

某些h5端使用的插件涉及到大量的dom操作，無法跨端使用。
直接運行在視圖層，解決了視圖層與邏輯層頻繁通信導(dǎo)致的性能折損，讓動畫更流暢。
renderjs是一種可以直接運行在視圖層（webview）中的js技術(shù)，可以在視圖層操作dom。

2.兼容性

App	H5
2.5.5+，僅支持vue	√

3.使用方式

設(shè)置 script 節(jié)點的 lang 為 renderjs

注意：module="openlayers" 中 openlayers 這是一個自定義屬性，用于指定腳本模塊的名稱或標識符，寫什么都可以。

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

4.注意事項

目前僅支持內(nèi)聯(lián)使用。
不要直接引用大型類庫，推薦通過動態(tài)創(chuàng)建 script 方式引用。
可以使用 vue 組件的生命周期(不支持 beforeDestroy、destroyed、beforeUnmount、unmounted)，不可以使用 App、Page 的生命周期
視圖層和邏輯層通訊方式與 WXS 一致，另外可以通過 this.$ownerInstance 獲取當(dāng)前組件的 ComponentDescriptor 實例。
this.$ownerInstance.callMethod() 僅支持調(diào)用邏輯層vue選項式中的 methods 中定義的方法。
注意邏輯層給數(shù)據(jù)時最好一次性給到渲染層，而不是不停從邏輯層向渲染層發(fā)消息，那樣還是會產(chǎn)生邏輯層和視圖層的多次通信，還是會卡
觀測更新的數(shù)據(jù)在視圖層可以直接訪問到。
APP 端視圖層的頁面引用資源的路徑相對于根目錄計算，例如：./static/test.js。
APP 端可以使用 dom、bom API，不可直接訪問邏輯層數(shù)據(jù)，不可以使用 uni 相關(guān)接口（如：uni.request）
H5 端邏輯層和視圖層實際運行在同一個環(huán)境中，相當(dāng)于使用 mixin 方式，可以直接訪問邏輯層數(shù)據(jù)。
vue3 項目不支持 setup script 用法。

5.renderjs模塊內(nèi)的生命周期

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

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

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

H5效果圖

APP效果圖(我這里用的夜神模擬器)

6.renderjs模塊內(nèi)的this指向

<!-- 邏輯層 -->
<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端報錯
        }
    }
</script>

H5效果圖

APP效果圖(我這里用的夜神模擬器)

7.視圖層和邏輯層的通信方式

視圖層可以通過 this.$ownerInstance.callMethod('方法名', 傳的值) 來和邏輯層進行通信。
代碼中 :變量名="變量值" :change:變量名="renderjs模塊上的方法"
change 就是監(jiān)聽定義的變量發(fā)生改變 -> 觸發(fā)視圖層上的方法 -> 通過this.$ownerInstance.callMethod('方法名', 傳的值)給頁面?zhèn)鲄?-> 頁面接收值 -> 渲染頁面。

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

</template>

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

			/**
			 * 接收 renderjs 傳過來的數(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ù)或組件的實例
			 * @param {*} instance 當(dāng)前操作的具體實例
			 */
			loadOperation(newValue, oldValue, ownerInstance, instance) {
				console.log(newValue, oldValue, ownerInstance, instance);
				this.$ownerInstance.callMethod('reciveMessage', ++this.count); // 向uni-app頁面組件發(fā)送信息
			},
		}
	}
</script>

8.調(diào)用視圖層renderJS中的方法

例：當(dāng)前要增加一個地圖放大功能，之前的寫法是通過調(diào)用邏輯層的事件改變對象里的值觸發(fā)視圖層change事件，達到觸發(fā)地圖的方法。
現(xiàn)在可改成在點擊事件內(nèi)直接觸發(fā)視圖層的方法，以此來調(diào)用地圖方法，不用在經(jīng)過邏輯層和視圖層通信這一步驟

<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>