uniappでは一部のフロントエンドライブラリやiframeが使用されますが、これらのライブラリでDOMを操作する必要がある場合、uniappにはドキュメントなどの基本的なオブジェクトがありません。また、これらの DOM を操作して対話型ロジックを実装することもできず、それに関連する html2、canvas、image などのフロントエンド クラス ライブラリも使用できません。これらを使用したい場合はどうすればよいでしょうか? これは、レンダリングにビュー レイヤ ツール renderjs を使用して行われます。ロジック層とビュー層の間の通信損失を大幅に削減し、高性能のビュー対話機能を提供します。
説明書:
1. 元のスクリプトの下に、lang="renderjs" を固定、module="demo" とし、モジュール名は任意に変更できるスクリプトを追加します。
2. this.$ownerInstance を通じて現在のコンポーネントの ComponentDescriptor インスタンスを取得できます。vmに似ている
3. ビュー層はモジュール名を介してイベントをバインドします。ロジック層定義メソッドには 2 つのパラメータがあります。1. イベント オブジェクトevent、2. 現在のコンポーネント インスタンス ComponentDescriptor
4. 2 つのスクリプト間の通信には、this.$ownerInstance グローバル コンポーネント インスタンス、またはイベント パラメーター ComponentDescriptor の callMethod メソッドを渡す必要があります。これは、vue コンポーネント間でのエミットと同様に、メソッドをスローして値を渡します。
5. vue コンポーネントのライフサイクルは使用できますが、アプリとページのライフサイクルは使用できません。
レイヤーの使用状況を表示する
ロジック層のイベント
renderjs&script ——> スクリプト
通常のスクリプト
デモコード
<template>
<view>
<view :msg="msg" :change:msg="renderScript.receiveMsg" class="renderjs" id="renderjs-view">
{
{msg}}
</view>
<button @click="renderScript.emitData">直接调用renderjs中的emitData的方法</button>
<button @click="changeMsg" class="app-view">改变msg的值,直接调用renderjs中receiveMsg的值</button>
<button @click="renderScript.renferMsg">通过renderjs改变msg的值,同时调用renderjs中的emitData的方法</button>
</view>
</template>
<script>
export default {
data() {
return {
msg: '我是service层原来的msg',
};
},
methods: {
// 触发逻辑层出入renderjs数据改变
changeMsg() {
this.msg = "msg值改变了";
},
// 接收renderjs发回的数据
receiveRenderData(val) {
console.log('renderjs返回的值-->', val);
},
//接收renderjs发回的数据,同时触发:change:msg,调用enderjs中的emitData的方法
serviceClick(e){
this.msg=e
}
}
};
</script>
<script module="renderScript" lang="renderjs">
export default {
data() {
return {
name: '我是renderjs数据'
}
},
methods: {
renferMsg(event, ownerInstance) {
// 调用 service层的serviceClick方法,传值
ownerInstance.callMethod('serviceClick', {
test: '这是点击renderjs的区域,向service层传递变量'
})
},
// 接收逻辑层发送的数据
receiveMsg(newValue, oldValue, ownerVm, vm) {
console.log('msg变化了newValue', newValue)
console.log('msg变化了oldValue', oldValue)
console.log('msg变化了ownerVm', ownerVm)
console.log('msg变化了vm', vm)
},
// 发送数据到逻辑层
emitData(e, ownerVm) {
ownerVm.callMethod('receiveRenderData', this.name)
}
}
};
</script>