uniapp 项目双屏异显插件使用方式

本文主要记录uniapp双屏异显插件（安卓收银机双屏（副屏）异显，主副屏通讯）使用方式：

在uniapp中安装和引入插件请参考uniapp文档，这里不作介绍

uniapp里面调用

调用也是参考插件文档进行的，直接贴源码吧！

• 页面挂在成功后调用插件进行副屏显示
• 页面中的输入框和发送按钮模拟信息处理
• send方法负责发送信息到副屏
• /static/dist/index.html为打包的vue项目地址

副屏VUE项目编写

新建一个VUE项目sub-screen，这里我创建的是vue2.0项目，以下代码我直接写在项目sub-screen/src/App.vue文件中

• 按照文档中的一样，挂载成功后直接监听主屏传过来的数据

副屏VUE项目配置方式

由于vue项目直接打包直接运行会造成白屏现象，需要修改一下配置文件

首先修改sub-screen/config/index.js文件：

将dev下的

assetsPublicPath: '/',

改为

assetsPublicPath: './',

然后在sub-screen/build/webpack.prod.conf.js文件的output中添加如下配置：

publicPath:"./"