本文主要记录uniapp双屏异显插件(安卓收银机双屏(副屏)异显,主副屏通讯)使用方式:
在uniapp中安装和引入插件请参考uniapp文档,这里不作介绍
uniapp里面调用
调用也是参考插件文档进行的,直接贴源码吧!
- 页面挂在成功后调用插件进行副屏显示
- 页面中的输入框和发送按钮模拟信息处理
- send方法负责发送信息到副屏
- /static/dist/index.html为打包的vue项目地址
<template>
<view>
<input type="text" v-model="msg" class="msgs"/>
{{msg}}
<button @click="send">发送</button>
</view>
</template>
<script>
// 初始化
const multiScreen = uni.requireNativePlugin('SPT-MultiScreen');
export default {
data() {
return {
msg: "hello",
}
},
methods:{
send () {
let msg = this.msg
multiScreen.sendDataToSubScreen(JSON.stringify(msg), result => {
console.log('result: ' + JSON.stringify(result));
});
}
},
mounted () {
// 检查是否已开启浮窗权限
multiScreen.canDrawOverlays(res => {
// 已开启浮窗权限
if (res.result) {
// 如果加载本地html,推荐使用vue cli创建的项目,uni-app打包的H5项目会白屏,打包后,放在项目的static目录中,需要使用plus.io.convertLocalFileSystemURL(),转成安卓项目中的绝对地址。
let url = plus.io.convertLocalFileSystemURL('/static/dist/index.html');
// let url = 'https://www.baidu.com';
multiScreen.showURL(url);
}
// 未开启
else {
uni.showModal({
title: '提示',
content: '您尚未开启浮窗权限,副屏无法正常显示内容',
confirmText: '前往设置',
success: modalRes => {
// 点击确定
if (modalRes.confirm) {
// 前往设置
multiScreen.gotoSetDrawOverlays();
}
}
});
}
});
},
}
</script>
<style>
.msgs{
height: 50px;
border: 1px solid #006EFF;
}
</style>
副屏VUE项目编写
新建一个VUE项目sub-screen,这里我创建的是vue2.0项目,以下代码我直接写在项目sub-screen/src/App.vue文件中
- 按照文档中的一样,挂载成功后直接监听主屏传过来的数据
<template>
<div id="app">
<div style="width: 100vw;height: 100vh">
{{msg}}
</div>
</div>
</template>
<script>
export default {
name: 'App',data () {
return {
msg: '这是一个副屏,Know?'
}
},
mounted() {
let that =this
window.onReceiveData = function(result) {
console.log('result: ' + JSON.stringify(result));
that.msg = JSON.stringify(result)
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
副屏VUE项目配置方式
由于vue项目直接打包直接运行会造成白屏现象,需要修改一下配置文件
首先修改sub-screen/config/index.js文件:
将dev下的
assetsPublicPath: '/',
改为
assetsPublicPath: './',
然后在sub-screen/build/webpack.prod.conf.js文件的output中添加如下配置:
publicPath:"./"