【赶鸭子上架】vue控制nwjs窗口取消置顶

140 阅读1分钟

任务背景

💔💔💔书接上回,给nwjs和vue之间加了个中介之后,要在调用某个后台接口的时候将nwjs窗口取消置顶

主线任务

请前端开发人员在vue项目中执行窗口取消置顶方法!!!

任务开始

得到道具:取消置顶代方法
const gui = require('nw.gui');
const win = gui.Window.get();
// 将窗口置于顶层
win.setAlwaysOnTop(true);
// 取消将窗口置于顶层
win.setAlwaysOnTop(false);

💫我们的nwjs和vue现在属于是几先生碰见凡先生,有点子关系,但是vue的app.html他检测不到nwjs的环境啊,没办法直接用上我们的道具,还得从中介index.html入手。 image.png 💟我立马想到一个蠢方法,既然它跳出去了就拿不到nw了,那我不让它跳出去,把我的app.html放在iframe嵌在index.html不就得了,我跃跃欲试,但是我怕需要iframe通信,麻烦得很,拉倒吧。再查查。 💥又想到个方法嘿,我本来的app.html是从index.html里头window.location.href直接打开的,那就在nw里头互相替换不得了。

--index.html
const win = nw.Window.get()
win.window.location.href='http://localhost:8080'

换上试试!~嘿嘿不好使,根本白屏打不开,查查怎么回事,不知道怎么回事,但是找到了解决方法--设置nw.js的node-remote

--package.json
main: "index.html",
"node-remote": "http://localhost:8080"

f8e74944c6b0a5ebd75c0416c9af1ae.png 嘻嘻能用了,再来到app.html里头,直接上道具,再判断个浏览器环境

--app.html
function upup() {
    if (typeof nw !== 'undefined') {
      const gui = require('nw.gui');
      const win = gui.Window.get();
      // 将窗口置于顶层
      win.setAlwaysOnTop(true);
      // 取消将窗口置于顶层
      win.setAlwaysOnTop(false);
    }
}

okok,直接window.upup()调用💕💞💓💗