前言
使用 UniApp 開發(fā) Android / iOS App 時，經(jīng)常會有地圖、可視化圖表、攝像頭、視頻播放、人臉采集、富文本編輯器等需求。而 UniApp 提供的相關(guān)組件或多或少存在各種影響使用的問題：如地圖層級過高難以覆蓋，UniApp 插件市場中的可視化圖表功能缺失、攝像頭相關(guān) API 接口過于簡陋等，使得開發(fā)工作難以進(jìn)行。
RenderJS
在這種情況下，RenderJS 的出現(xiàn)極大程度上緩解了這些難題。 RenderJS 是內(nèi)置在 UniApp 框架中的一個組件，它運行在視圖層，可以在 App 端中對 DOM 直接進(jìn)行操作，并運行 for web 的 JavaScript 庫，這意味著在 Web 支持的一切功能都可以在 App 端實現(xiàn)。
與此同時， RenderJS 也存在著一定的限制：如不支持 Vue3 的 Setup 寫法，不能直接和邏輯層進(jìn)行通信，需要借助一定的技巧才能實現(xiàn)雙向通信等。
示例代碼
下面是 RenderJS 實際使用的一點例子，這些代碼想說明的問題只有一個：視圖層和邏輯層如何互相調(diào)用方法和傳遞數(shù)據(jù)。示例比較長，可以翻到下面跟著說明來閱讀代碼。
<template>
<view id="container" style="padding-top: 20vh;" :viewLayerCallJson="viewLayerCallJson"
:change:viewLayerCallJson="viewLayer.handleLogicLayerCall" :viewLayerData="viewLayerData" :change:viewLayerData="viewLayer.handleLogicLayerData">
<button @click="handleTest">調(diào)用邏輯層方法</button>
<button @click="viewLayer.handleViewLayerTest">調(diào)用視圖層方法</button>
<button @click="handleTest2">從邏輯層調(diào)用視圖層方法</button>
<button @click="viewLayer.handleViewLayerTest2">從視圖層調(diào)用邏輯層方法</button>
<button @click="handleSendDataToViewLayer">視圖層傳遞數(shù)據(jù)給視圖層</button>
<button @click="handleTest4">動態(tài)創(chuàng)建 VIDEO 元素</button>
</view>
</template>
<script>
export default {
data() {
return {
viewLayerCallJson: null,
viewLayerData: null
};
},
methods: {
handleViewLayerCall({ method, params }) {
this[method]?.(params);
},
handleCallViewLayerFunc(method, params) {
const randomNethodPrefix = Math.random().toString(36).substring(2, 15);
this.viewLayerCallJson = JSON.stringify({
method: `${randomNethodPrefix}-${method}`,
params
});
},
handleTest2() {
this.handleCallViewLayerFunc("createEl", {
tag: "input",
value: "hahahaha"
});
},
handleTest3({ content }) {
uni.showModal({
title: "提示",
content,
success: (res) => {
console.log(res);
}
});
},
handleTest4() {
this.handleCallViewLayerFunc("createEl", {
tag: "video"
});
},
handleTest() {
uni.showModal({
title: "提示",
content: "邏輯層方法被調(diào)用啦",
success: (res) => {
console.log(res);
}
});
},
handleSendDataToViewLayer() {
this.viewLayerData = Date.now();
}
}
}
</script>
<script lang="renderjs" module="viewLayer">
export default {
data() {
return {
_data: {}
};
},
methods: {
handleViewLayerTest() {
alert("視圖層方法被調(diào)用啦")
},
handleViewLayerTest2() {
this.callLogicLayerFunc("handleTest3", {
content: "從視圖層調(diào)用邏輯層方法"
});
},
handleLogicLayerCall(json) {
if (!json) return;
const { method: randomMethod, params } = JSON.parse(json);
const method = randomMethod.split("-")[1];
this[method]?.(params);
},
createEl({ value, tag }) {
const el = document.createElement(tag);
if (value) {
el.value = value;
}
document.querySelector("#container").append(el);
},
callLogicLayerFunc(method, params) {
this.$ownerInstance.callMethod("handleViewLayerCall", {
method,
params
});
},
handleLogicLayerData(newval, oldval, owner, instance) {
console.log(newval, oldval, owner, instance);
}
}
}
</script>
<style>
button + button {
margin-top: 20px;
}
</style>編寫 RenderJS 代碼
寫在正常 script 標(biāo)簽中的代碼運行在邏輯層，而 RenderJS 運行在視圖層。 RenderJS 的代碼在編寫時需要單獨寫在一個 script 標(biāo)簽中，同時給 script 標(biāo)簽添加 lang="renderjs" 和 module="xxx" 的屬性，前者是固定值不能修改，后者可以自行定義，用來在模板中引用 RenderJS 中定義的屬性和方法。
邏輯層向視圖層傳遞數(shù)據(jù)
傳遞數(shù)據(jù)需要關(guān)注以下幾點：
- 在邏輯層中定義數(shù)據(jù)，這個無需多言，正常定義要傳遞的數(shù)據(jù)即可。
2. 在模板內(nèi)任意標(biāo)簽中綁定要傳遞的數(shù)據(jù)，通過 :change:[屬性名] 來監(jiān)聽綁定數(shù)據(jù)的變化，并綁定在視圖層中定義的回調(diào)函數(shù)，綁定視圖層中定義的回調(diào)函數(shù)時需要以視圖層 module 屬性為前綴來調(diào)用。
3. 在視圖層內(nèi)定義屬性變化的回調(diào)函數(shù)
回調(diào)函數(shù)會傳遞四個參數(shù)，分別是綁定屬性新值，上一次的值，視圖層實例以及邏輯層實例，需要注意回調(diào)函數(shù)在組件創(chuàng)建之后無論數(shù)據(jù)是否變化都會被調(diào)用一次。
視圖層向邏輯層傳遞數(shù)據(jù)
視圖層并不能直接向邏輯層傳遞數(shù)據(jù)，只能借助調(diào)用邏輯層方法的形式來傳遞數(shù)據(jù)，具體可以參見下一小節(jié)。
視圖層調(diào)用邏輯層方法
視圖層可以通過 $ownerInstance.callMethod 方法來調(diào)用邏輯層內(nèi)定義的方法，該方法接受兩個參數(shù)，邏輯層方法名和邏輯層方法接受的參數(shù)。
邏輯層調(diào)用視圖層的方法
邏輯層并不能直接調(diào)用視圖層的方法，但通過一些技巧可以巧妙的實現(xiàn)調(diào)用。通過將要調(diào)用的方法和參數(shù)名序列化為 JSON 字符串，并作為數(shù)據(jù)傳遞給視圖層，視圖層在回調(diào)方法內(nèi)反序列化 JSON 數(shù)據(jù)，然后執(zhí)行相關(guān)方法。
如果連續(xù)調(diào)用同一個方法并傳遞相同的參數(shù)，由于 JSON 字符串沒有發(fā)生變化，因為視圖層的回調(diào)函數(shù)并不會被執(zhí)行，因此需要在 JSON 字符串內(nèi)加入一些隨機(jī)因子，使得每次調(diào)用方法生成的 JSON 字符串總是不相同的。
需要注意傳遞的數(shù)據(jù)內(nèi)容必須是兼容 JSON 的基本數(shù)據(jù)類型，如果傳遞 Set、Map、ArrayBuffer 等類型將會出現(xiàn)不可預(yù)知的錯誤，同時傳遞的數(shù)據(jù)也不宜過大過于頻繁，否則可能會造成性能問題。
使用場景
基于以上的例子，以往很多不能實現(xiàn)的操作都可以實現(xiàn)。如引入 ECharts 使用全功能圖表，通過動態(tài)創(chuàng)建 Video 元素來避免使用 App 內(nèi)置的 Video 元素，使用 Web 端的各種地圖組件，不再為 App 端 Map 組件層級過高無法覆蓋而頭痛，使用 navigator.getUserMedia 操作攝像頭來實現(xiàn)自定義視頻錄制界面等等，一切在 Web 端可以實現(xiàn)的功能都可以在 App 中實現(xiàn)，不再受限于 UniApp App 的 API 限制。
注意事項
RenderJS 僅兼容 App 和 Web 兩端，雖然在微信小程序中存在著類 RenderJS 的組件 WXS，但其只是 RenderJS 的剪裁版，因此并不兼容。
RenderJS 是一個用來在 App 中實現(xiàn) Web 相關(guān)能力的產(chǎn)物，因此在 Web 中并不需要 RenderJS。 RenderJS 在 Web 端運行時，其會以 mixin 形式混入邏輯層，因此在編寫視圖層代碼時，應(yīng)注意在屬性名和方法名上和邏輯層加以區(qū)分，以免出現(xiàn)在 Web 端運行時被覆蓋的問題。
