Uni-app中使用render.js,逻辑层和视图层间的通信笔记

Dev › webDev
,

uniapp 开发中,app-vue 和 h5 端我们会使用 renderjs 写视图层 js,与逻辑层的分离会导致通讯不便,这里说下从逻辑 js 和视图 js 之间相互调用方法的方案.

逻辑 js 调用视图 js(如 module=”amap”)的方法,可以通过逻辑层 js 的数据变化来调用,换人话讲,在 template 中的任意标签中绑定 data 中声名的属性,然后通过:change 来监控这个数据的变化从而调用视图层 js 的方法.上代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<template>
<view :myValue=myValue :change:myValue="amap.myMethod">
</view>
</template>

<script>
data(){
    myValue: ""
}
</script>

<script module="amap" lang="renderjs">
method: {
    myMethod(){
        console.log("hello,world")
    }
}
</script>

同时,在视图 js 中也可以访问到逻辑 js 中的 this.myValue,所以没有必要在视图 js 中重复声明 data.

反之视图 js 调用逻辑 js 的方法,可以通过在视图 js 中封装一下包含逻辑 js 中需要调用的函数,如逻辑 js 有个 showValue()的方法,在视图 js 中可以通过:

1
2
3
4
5
6
7
trigger_showValue(){
   UniViewJSBridge.publishHandler('onWxsInvokeCallMethod', {
    cid: this._$id,
     method:'showValue'
    args:{参数传入}
   })
}

来调用,也可以传入参数.