副屏 · 小鸟CMS 桌面应用框架

## 获取多个屏幕信息示例 ``` //获取屏幕信息 Display_Detection(null,e=>{console.log(e)}) //指定分辨率获取 Display_Detection([1920,1080,1024,500,1440,1050,1600,1024],e=>{console.log(e)}) ``` ## 参数函数：`Display_Detection` 参数： * 参数1 ResolvingPower 非必填可传入分辨率数组完成自定义屏幕检测【基数是宽，偶数是高】 * 参数2 callback 必填回调返回结果： * 数字下标结果解释 0屏幕数量、1总屏幕尺寸、2主屏幕尺寸、3副屏尺寸 ## 使用与注意 * 如果仅有主屏幕时或有异常时2,3下标值都为0 * 实现不同屏幕显示不同窗口必须注意将屏幕设置为【扩展显示】 * 目前仅支持的分辨率:1024,500,1440,1050,1600,1024,1600,900,1680,1050,1280,1024,1024,768,800,600,1440,900,1024,600,1280,800,1280, 720,1366,768, 1920, 1080, 2560, 1440, 3840, 2160, 4096, 2160, 7680, 4320 如果没有可用的分辨率可自行指定分辨率 ![](https://img.kancloud.cn/ee/35/ee3521c9cec9d04116c3fc2fb7454a2d_697x499.png) ## 设置窗口到其他屏幕中【副屏设置】函数：`setPositionWin` 作用： * 设置当前窗口位置与标题并自动最大化 * 默认最大化可再次执行会进行放大缩小窗口 ## 使用示例 * 结合以上获取屏幕坐标实现示例如下： ``` //采用html字符串写入方式加载页面、使用变量共享方式变量互相共享（可使用数据双向绑定实现实时更新数据） //启动一个窗口 pageOpener = window.open(); //测试变量在新窗口访问 window.page1 = 100 //载入内容采用写入方式也可以http方式 pageOpener.document.write(` <body style="background: #fff;"> <h1>好嗨哦</h1> </body> <script> //设置子窗口值 window.page2 = 200 //获取父类窗口的值 console.log(window.opener.page1) //检测可用函数避免异步创建导致函数失效 var okFunc = 0; //用到的函数 var funcList = ['Display_Detection','setPositionWin']; function testing(){ okFunc = 0; funcList.forEach((item)=>{ if(window[item] !== undefined){ okFunc+=1; } }) console.log(okFunc,funcList.length) if(okFunc != funcList.length){ okFunc = 0; timeout() }else{ startFunc(); } } function timeout(){ setTimeout(()=>{ testing() },500) } testing() function startFunc(){ //获取屏幕 let x=0; let y=0; //设置屏幕 window.Display_Detection(null,e=>{ x=e.data[2][0]; y=e.data[2][1]; //设置屏幕 window.setPositionWin('客显副屏',x,0,600,600,e=>{console.log(e)}) }) } </script> `) //获取子窗口的值 console.log(pageOpener.window.page2) //5s后自动关闭副屏 setTimeout(() => { pageOpener.close() }, 5000); ``` * 对于更多的页面加载方式或窗口通讯方式请看下面 ## 窗口内容加载 * 1.通过http形式加载 * 2.通过opener对象来进行文档内容设置 * 3.使用`open("data:text/html,<h1>123456</h1>");` ## 窗口间通信 * 1.postMessage * 2.window变量共享进行变量监控（双向绑定） * 3.如果使用vuex等类似状态管理，可以考虑实现vue沙箱模式等类似其他框架也可以这么考虑。或者尝试在子窗口挂载父窗口里的部分环境数据，比较灵活，自己尝试。完全可实现父子窗口用一个状态管理。只是新窗口里的环境可能需要自己挂载进去。比如将vue沙箱挂载进去等