DQtech专栏 | 跟Dex学PlatON应用开发–JavaScript篇(工程改造)

• 14 12 月, 2021 16:50 • 技术 • 阅读 643

有读者反应. 点击插件,如果解锁密码的页面是以弹出框的方式出现,如下图所示:

助记词的页面以弹出框的方式显示, 用户体验很不好。

那现在我们在开启第六章之前先对工程进行改造，以达到某些页面必须是以tab的方式打开的效果

修改public目录下的html文件

把index.html文件的修改为 home.html
在该目录下创建popup.html文件,把home.html的内容全部复制到popup.html中。

修改后目录如下：

popup.html 和home.html的内容如下:


<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width,initial-scale=1.0">

  <link rel="icon" href="<%= BASE_URL %>favicon.ico">

  <title>DQTech</title>

  <style>

    .mord {

      padding-left: 0px !important;

    }

  </style>

</head>

<body>

  <div id="app"></div>

</body>

</html>

修改manifest.json文件

打开public目录下manifest.json文件


{

  "manifest_version": 2,

  "name": "Digging",

  "version": "1.0",

  "description": "Digging钱包",

  "author": "DQTech",

  "content_security_policy": "default-src 'self';script-src 'self' 'unsafe-eval'; style-src 'self' 'unsafe-inline';img-src 'self' data: base64; connect-src *",

  "icons": {

    "48": "48.png"

  },

  "browser_action": {

    "default_icon": "32.png",

    "default_title": "Digging",

    "default_popup": "popup.html"

  },

  "background": {

    "scripts": ["js/web3-eth-accounts.js", "js/web3.js", "js/background.js"]

  },

  "permissions": [

    "tabs",

    "storage",

    "storage",

    "unlimitedStorage",

    "clipboardWrite",

    "activeTab",

    "webRequest"

  ]

}

把browser_action下的default_popup的值修改为popup.html,这一步的作用是,每次点击插件图标时弹出的都是popup.html这个页面

修改vue.config.js文件

把vue工程配置成多页应用, 修改后的代码为:


const path = require("path");

module.exports = {

    pluginOptions: {

        "style-resources-loader": {

            preProcessor: "less",

            patterns: [path.resolve(__dirname, "src/assets/less/variable.less")]

        }

    },

    pages: {

        popup: {

            entry: "src/main.js",

            template: "public/popup.html"

        },

        home: {

            entry: "src/main.js",

            template: "public/home.html"

        }

    }

};

这里配置了popup和home两个页面入口

修改 store.js文件

在这里增加一个标志用于全局判断是否是在tab打开的,代码如下:


import Vue from "vue";

import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({

    state: {

        mnemonic: "", // 保存当前助记词

        isOpenInTab: false // 判断是不是在tab打开

    },

    getters: {

        GetMnemonic(state) {

            return state.mnemonic;

        }

    },

    mutations: {

        SetMnemonic(state, mnemonic) {

            state.mnemonic = mnemonic;

        },

        SetOpenInTab(state, isOpenInTab) {

            state.isOpenInTab = isOpenInTab;

        }

    }

});

App.vue页面

把judgeJumpPage的代码修改如下:


        async judgeJumpPage() {

            // 用于判断当前是在是不是在tab打开

            if (window.location.pathname !== "/popup.html") {

                this.$store.commit("SetOpenInTab", true);

            } else {

                   this.$store.commit("SetOpenInTab", false);

            }

             ... 省略代码

        }

unlock-page.vue文件

修改doUnlock函数,代码如下:


        async doUnLock(password) {

            // 解锁钱包

            let bSuccees = await this.digging.PasswordManager.UnLock(password);

            if (bSuccees) {

                this.$message.success("解锁成功!");

                // todo

                // 1, 解锁成功后,需要判断是否已经有钱包,如果还没钱包,则跳转到创建或者导入钱的页面

                // 2, 如果已经有钱包则跳转到主界面

                if (this.isOpenInTab) {

                    this.$router.push("/seed-phrase");

                } else {

                    chrome.tabs.create({ url: "home.html#/seed-phrase" });

                }

            } else {

                this.$message.error("密码错误,解锁失败!");

            }

        },