纯原生渲染模式下的 uni-App 框架通信实战

作者：黎燃

2022-11-19
内蒙古
本文字数：1716 字
阅读完需：约 6 分钟

纯原生渲染模式

在应用程序端，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 $上， u n i$ 退出页面通信。不再建议使用旧的通信方法（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. $o n 和 u n i .$ 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>

复制代码

发布于: 刚刚阅读数: 4

原文链接:【http://xie.infoq.cn/article/a7d6e4aca1e19288ce600aa3a】。文章转载请联系作者。

黎燃

关注

前端工程师 2022-05-06 加入

专注学习分享前端知识。

发布

暂无评论

创作场景

纯原生渲染模式下的 uni-App 框架通信实战

纯原生渲染模式

Nvue 和 vue 相互通信

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

vue 和 nvue 共享的变量和数据

nvue 将价值转移到 vue

黎燃

评论

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