03. 自定义WebView欢迎页面-例子 #3

PDKSophia · 2021-02-04T07:45:45Z

场景

该插件场景适合做一些简单页面展示、欢迎页面等

代码展示

// demo3 自定义显示页
// 具体看 package.json 中的 configuration 和 commands
import * as vscode from 'vscode'
import * as fs from 'fs'
import * as path from 'path'

module.exports = function (context: vscode.ExtensionContext) {
  let disposable = vscode.commands.registerCommand(
    'beehive.customWelcome',
    () => {
      const panel = vscode.window.createWebviewPanel(
        'welcome',
        '自定义欢迎页',
        vscode.ViewColumn.One,
        {
          enableScripts: true,
        }
      )

      const htmlPath = path.join(
        context.extensionPath,
        'src/customWelcome.html'
      )
      let html = fs.readFileSync(htmlPath, 'utf-8')
      panel.webview.html = html
    }
  )

  context.subscriptions.push(disposable)
}

// extension.ts
import * as vscode from 'vscode'

export function activate(context: vscode.ExtensionContext) {
  console.log('your extension "sugar-demo-vscode" is now active!')
  require('./beehive-customWelcome')(context) // demo3 加载自定义WebView欢迎页
}

export function deactivate() {}

// package.json
"commands": [
    {
       "command": "beehive.customWelcome",
       "title": "demo4: beehive.customWelcome !"
    }
],

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>demo3 自定义欢迎页面</title>
        <style>
            .app {
                margin: 12px 0;
                font-size: 24px;
            }
            .title {
                font-size: 18px;
                margin-top: 24px;
            }
        </style>
    </head>
    <body>
        <div class="app">
            Welcome BeeHiver ～
            <div class="title">后人哀之而不鉴之 亦使后人而复哀后人也 !</div>
        </div>
        <img src="https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif" width="300" />
    </body>
</html>

效果展示

源码展示

beehive-customWelcome.ts

PDKSophia added documentation Improvements or additions to documentation vscode labels Feb 4, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

03. 自定义WebView欢迎页面-例子 #3

03. 自定义WebView欢迎页面-例子 #3

PDKSophia commented Feb 4, 2021 •

edited

Loading

03. 自定义WebView欢迎页面-例子 #3

03. 自定义WebView欢迎页面-例子 #3

Comments

PDKSophia commented Feb 4, 2021 • edited Loading

场景

代码展示

效果展示

源码展示

PDKSophia commented Feb 4, 2021 •

edited

Loading