序文
renderjs はビュー レイヤーで実行される js であり、app-vue と h5 のみをサポートし、主に APP を提供します。
UNI APP側の開発については、Webサイトにドキュメントがないため、関連するDOM操作ができず、DOMレンダリングに関連するサードパーティのライブラリ（echart、openlayer、canvasなど）を有効に活用できないため、上記の問題を解決するために、公式の renderjs ソリューションが開始されました。
1. renderjs の機能:
ロジック レイヤーとビュー レイヤーの通信損失を大幅に削減し、高性能のビュー インタラクション機能を提供し、通信損失を削減し、パフォーマンスを向上させます。
ビュー層でdomを操作し、web用のjsライブラリを実行する（domを操作できるということは、app-vueのサービス層では利用できないウィンドウやドキュメントなどのグローバル変数を持つことを意味します）
2. renderjs とサービスレイヤー間の通信
具体的には、次の 3 つの部分に分けられます。
1. テンプレートでの手動ユーザー操作によるイベントのトリガー
2. サービス層でメソッドを呼び出す
3. renderjs でメソッドを呼び出す
renderjs からサービス レイヤーへ: サービス内のメソッドは this.$ownerInstance.callMethod() メソッドを介して呼び出すことができます。最初のパラメーターはメソッド名で、2 番目のパラメーターは渡されたパラメーターです。
3. renderjs の使用
概要：
ネイティブ レイヤーのデータは、監視を通じて renderjs レイヤーに渡されます (ネイティブ レイヤーのメソッドを呼び出すことでトリガーできます)。
renderjs レイヤーメソッドによって送信されたデータを直接呼び出す
知らせ：
スクリプト ノードの lang を renderjs に設定します。
スクリプトのモジュールの名前は自由に選択できます。module=(値は任意で、名前空間に相当し、後でこの名前に従ってメソッドが呼び出されます)、変更: パラメータ名は次のように一致する必要があります。 renderjs の動作をブロックすることはありませんが、エラーが報告され、データの変更をキャプチャできなくなります。
<template>
<view class="page-body">
<!-- prop是一个名字，可以随意修改，注意：change:[name]这两个名字需要相同就行了
从service层到renderjs：首先在template中绑定一个service中定义的值，然后在同样的位置
增加：change:(属性名)=(renderjs的module名，触发的方法)来实现通信。
简单来说就是service负责数据的更改，通过template监听数据的变化来通知renderjs
this.$ownerInstance.callMethod方法必须通过点击事件执行 -->
<!-- msg是要向renderjs发送的数据，testRenderjs为renderjs模块名称，onChange是renderjs中的监听方法 -->
<view :prop="msg" :change:prop="testRenderjs.onChange" id="renderjs-view">{
{msg}}
</view>
<button @tap="changeMsgFn">点击修改options</button>
<button @tap="testRenderjs.emitData">直接调用renderjs中的emitData方法</button>
</view>
</view>
</template>
<script>
//原先的script,这里被称为service层
export default{
data(){
return{
//这里存放准备传递给renderjs的数据
msg:'我是service层原来的msg'
}
},
methods:{
//触发servuce层出入renderjs数据改变
changeMsgFn(){
//修改msg 触发change
this.msg='msg的值变了'
},
//接收renderjs发回的数据
acceptDataFromRenderjs(data){
console.log('从renderjs中接收到的数据',data)
this.msg=data.content;
}
}
}
</script>
<script module="testRenderjs" lang="renderjs">
export default{
data(){
return{
content:'我是来自renderjs的数据'
}
},
created(){
console.log('renderjs初始化完毕')
},
mounted(){
const view=document.getElementById('renderjs-view');
const button=document.createElement('button');
button.innerText='一个按钮';
view.appendChild(button);
},
methods:{
//接收逻辑层service发送到数据
onChange(newValue,oldValue,ownerInstance,instance){
console.log('service层中的options发生变化');
console.log('新值newValue',newValue);
console.log('旧值oldValue',oldValue);
//ownerInstance和this.$ownerInstance一样,可用来向service通信
//instance和ownerInstance的区别是:
//instance.$el指向的是触发事件的那个节点;ownerInstance.$el指向当前vue文件中的根节点
//instance的作用目前尚不明确,官方没有给出用法
},
//发送数据到service层
emitData(event,ownerInstance){
//event是事件对象
ownerInstance.callMethod('acceptDataFromRenderjs',{
content:this.content
})
//或者
// this.$ownerInstance.callMethod('acceptDataFromRenderjs',{
// content:this.content
// })
// 需要注意的是:只有通过在template中用户手动操作触发renderjs的方法参数是这两个:event,ownerInstance;通过其他方法
// 触发的函数参数不一样
}
}
}
</script>予防：
現在、インライン使用のみをサポートしています
大きなクラス ライブラリを直接インポートしないでください。スクリプト メソッドを作成してインポートすることをお勧めします
vue コンポーネントのライフサイクルは使用できますが、App Page のライフサイクルは使用できません
ビュー層とロジック層の間の通信モードは WXS と一致しています.また、現在のコンポーネントの ComponentDescriptor インスタンスは、this.$ownerInstance を通じて取得できます。
ビューレイヤで観測更新データに直接アクセス可能
APP ビュー レイヤーのページ参照リソース パスは、ルート ディレクトリからの相対パスです (例: ./static/test.js)。
The APP side can use the dom bom API, and cannot directly access logic layer data. Renderjs は uni または他のフレームワーク API (例: uni.request) を使用できません. ネイティブ レイヤーが呼び出された後にデータを渡すためにモニタリングをトリガーする必要があります. .
H5エンドのロジックベースレイヤーとビューレイヤーは実際には同じ環境で動作しており、これはロジックレイヤーのデータに直接アクセスできるmixinを使用することと同等です。
アプリ側の renderjs レイヤーのデータは、ネイティブ レイヤーのデータとは無関係です
this.$ownerInstance.callMethod メソッドは、クリック イベントを通じて実行する必要があります。
Map メソッドは renderjs レイヤーに記述する必要があり、サブコンポーネントは使用できません