[JavaScript知识库]纯原生渲染模式下的uni-App框架通信实战

纯原生渲染模式

在应用程序端，uni-App支持在虚拟页面和虚拟页面之间混合和跳转。还支持纯nvue本地渲染。
启用本机渲染模式可以减少应用程序端的包体积，并减少内存使用。因为webview渲染模式的相关模块将被删除。
在清单中，在json源代码视图的“app plus”下配置“renderer”和“native”，这意味着在应用程序端启用纯本地渲染模式。此时，vue页面按页面注册。json将被忽略，vue组件也将由本机呈现引擎呈现。
如果未指定此值，则默认情况下不会启动本机渲染。

{    
    // ...    
     /* App平台特有配置 */    
    "app-plus": {    
        "renderer": "native", //App端纯原生渲染模式
    }    
}

Nvue和vue相互通信

在uni-app中，nvue和vue页面可以混合使用。
建议使用uni$上，uni$退出页面通信。不再建议使用旧的通信方法（uni.postMessage和plus.webview.postMessageToUniNView）。
通信实现方式

// $on(eventName, callback)  
uni.$on('page-popup', (data) => {  
    console.log('标题：' + data.title)
    console.log('内容：' + data.content)
})  

// 发送信息的页面
// $emit(eventName, data)  
uni.$emit('page-popup', {  
    title: '我是title',  
    content: '我是content'  
});

vue与nvue通信（已过期，建议使用上述uni.$on和uni.$exit）

步骤：
使用加号。vue PostMessageToUniNView（data，nvueId）中的webview发送消息。数据为JSON格式（键值对的值仅支持String）。nvueId是nvue所在Web视图的ID。获取webview ID的方法如下：$getAppWebview（）。
引用nvue中的globalEvent模块来侦听plusMessage事件，如下所示：

const globalEvent = weex.requireModule('globalEvent');
globalEvent.addEventListener("plusMessage", e => {
  console.log(e.data);//得到数据
});

vue和nvue共享的变量和数据

除了通信事件，变量和存储可以在vue和nvue页面之间共享。uni-app提供的共享变量和数据的方案如下：
1.vuex：
由于HBuilderX 2.2.5，nvue支持vuex。这是vue的官方国家管理工具。
小心：
不支持直接导入存储。您可以使用mapState、mapGetters、mapMutations和其他辅助方法或使用此方法$百货商店
2.统一存储：
vue和nvue页面可以使用相同的uni存储。此存储是持久的。例如，登录状态可以保存在此处。
该应用程序还支持plus.sqlite，它也是共享和通用的。
3.全球数据：
小程序有一个globalData机制，也可以在uni-app中使用，并且在所有端都是通用的。在App.vue文件中定义globalData，如下所示：

<script>  
    export default {  
        globalData: {  
            text: 'text'  
        },  
        onLaunch: function() {  
            console.log('App Launch')  
        },  
        onShow: function() {  
            console.log('App Show')  
        },  
        onHide: function() {  
            console.log('App Hide')  
        }  
    }  
</script>

接下来，让我们以自定义代码扫描为例，看看如何在uni-app中扩展5+个本机接口控件。在开发uni-app时，平台实际上为我们提供了代码扫描API，但它不能满足我们所有的代码扫描需求，例如定制代码扫描框的颜色。

//  uni-app 中的扫码功能直接调用 plus API就可以了，而扩展5+的原生界面控件要等 plusready 后再调用 plus API。

var plusReady = function (callback) {
    if (window.plus && window.plus.isReady) {
        callback();
    } else {
        document.addEventListener('plusready', function () {
            callback();
        }, false);
    }
};

//创建 Barcode 实例对象，可以自定义扫码框的位置大小和颜色
var barcode = plus.barcode.create('barcode', options.types, options.styles);  

nvue将价值转移到vue

使用uni。in-nvue PostMessage（数据）发送数据。参数数据只能是json数据。json数据的值仅支持字符串。使用vue中的onUniNViewMessage函数来侦听数据。
例子：
在nvue页面上定义方法，并使用uni PostMessage（data）发送数据。

<script>
export default {
methods: {
postMessage(item){
        uni.postMessage({
name:’慕课网’,
data:item
})
}
}
  }
</script>