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

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

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

1.為什么要使用 renderjs

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

2.兼容性

App	H5
2.5.5+，僅支持vue	√

3.使用方式

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

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

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

4.注意事項

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

5.renderjs模塊內的生命周期

<!--
 H5:所有 UNI 框架的生命周期都可使用
 APP:僅可使用 VUE 組件生命周期
 視圖層與邏輯層可以重復定義生命周期，都會執(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í)行，重復定義也會執(zhí)行，不會被覆蓋。
        }, 
        
        mounted() {
            console.log('視圖層生命周期 - mounted'); // 組件生命周期 H5 APP 都會執(zhí)行，重復定義也會執(zhí)行，不會被覆蓋。
        }
    }
</script>

H5效果圖

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

6.renderjs模塊內的this指向

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

<!-- 視圖層 -->
<script module="openlayers" lang="renderjs" type="module" >
 export default {
        mounted() {
            console.log("嘗試獲取邏輯層的數據",this.str) // H5端可正常打印 APP打印undefined
            console.log("嘗試調用邏輯層的方法",this.test()) // H5端可正常調用 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ā)生改變時，調用 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 傳過來的數據
			 * @param {Number} num 接收的內容
			 */
			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 擁有該數據或組件的實例
			 * @param {*} instance 當前操作的具體實例
			 */
			loadOperation(newValue, oldValue, ownerInstance, instance) {
				console.log(newValue, oldValue, ownerInstance, instance);
				this.$ownerInstance.callMethod('reciveMessage', ++this.count); // 向uni-app頁面組件發(fā)送信息
			},
		}
	}
</script>

8.調用視圖層renderJS中的方法

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

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

總結

到此這篇關于uni-app中使用renderjs的文章就介紹到這了,更多相關uni-app使用renderjs內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

uni-app中renderjs使用的方式淺析

JS控制只能輸入數字并且最多允許小數點兩位
這篇文章主要介紹了JS控制只能輸入數字并且最多允許小數點兩位,本文給大家提到js如何限制input輸入框只能輸入數字問題，需要的朋友可以參考下
2019-11-11
html文本框提示效果的示例代碼
在html文本框中顯示提示效果，以方便用戶的輸入，比如在輸入姓名時，會自動提示姓名長度最多16個字符，是不是很酷哦。快來看看吧
2014-06-06
JS實現選項卡插件的兩種寫法（jQuery和class）
這篇文章主要為大家詳細介紹了JS實現選項卡插件的兩種寫法：jQuery和class，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-12-12
一段批量給頁面上的控件賦值js
一次性給頁面上的控件賦值，控件的ID和數據庫表字段對應一樣，這樣就一次性搞定了
2010-06-06
前端根據鏈接生成二維碼的方案及相關常用API
這篇文章主要介紹了qrcode插件的使用方法,包括ES6/ES7示例、常用API及Vue示例,同時還討論了二維碼的優(yōu)點和缺點,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2025-01-01
Bootstrap實現響應式導航欄效果
這篇文章主要介紹了Bootstrap實現響應式導航欄效果，導航欄是一個很好的功能，是Bootstrap網站的一個突出特點，本文帶領大家學習實現Bootstrap導航欄,需要的朋友可以參考下
2015-12-12
Babylon使用麥克風并處理常見問題解決
這篇文章主要為大家介紹了Babylon使用麥克風并處理常見問題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-04-04
你可能不需要在JavaScript使用switch語句
這篇文章主要介紹了你可能不需要在JavaScript使用switch語句，對switch性能感興趣的同學，可以參考下
2021-04-04
利用js實現前后臺傳送Json的示例代碼
下面小編就為大家分享一篇利用js實現前后臺傳送Json的示例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-03-03
List Information About the Binary Files Used by an Applicati
List Information About the Binary Files Used by an Application...
2007-06-06