NW.js入門

阿新 • • 發佈：2019-01-08

解壓sdk;
在根目錄新建資料夾,myapp, 在myapp中新建index.html

<html>
<head>
<title>shellDemo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />
<script type 
="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<style type="text/css">
    body{
        background-color: #EEEEEE;
    }
    .drag{
        -webkit-app-region:drag;
    }
</style>
<body >
<div style="height:35px; font-size: 25px; line-height: 35px; padding-left: 5px; padding-right: 10px" 
 class="bg-primary drag">
            <img src="logo.png" height="30" /> 
            <span class="caret pull-right" style="margin-top:5px"></span>
</div>
<div class="container" id="vueapp">
    <div class="panel panel-default center-block" style="width: 380px; margin-top: 10%" 
>
        <div class="panel-heading">
            <div class="panel-title">Login</div>
        </div>
        <div class="panel-body">
            <form class="form">
                <div class="form-group">
                    <label>UserName:</label>
                    <input type="text" class="form-control" v-model="user.userName" />
                </div>
                <div class="form-group">
                    <label>Password:</label>
                    <input type="Password" class="form-control" />
                </div>
                <div class="form-group">
                    <label class="checkbox-inline">
                        <input type="checkbox" /> Remenber Me
                    </label>
                </div>
            </form>
        </div>
        <div class="panel-footer">
            <button class="btn btn-default" v-on:click="login()">Login</button>
        </div>
    </div>
</div>
<script type="text/javascript">

    var vue = new Vue({
        el:'#vueapp',
        data:{
            user:{}
        },
        methods:{
            login: function(){
                alert(this.user.userName);
            }
        }
    });
</script>
</body>
</html>

在根目錄新建package.json, 內容如下:

{
    "main": "myapp/index.html",
    "name": "demo",
    "description": "demo app of node-webkit",
    "version": "0.1.0",
    "keywords": [ "demo", "node-webkit" ],
    "nodejs": true,
    "window": {
        "title": "node-webkit demo",
        "icon": "link.png",
        "toolbar": true,
        "frame": false,
        "width": 1000,
        "height": 600,
        "position": "center",
        "min_width": 400,
        "min_height": 200,
        //"max_width": 800,
        //"max_height": 600,
        "resizable" :true,
        "show_in_taskbar": true,
        "kiosk": false
    },
    "webkit": {
        "plugin": true
    }
}

執行
在命令列執行

nw

也可以打包成zip執行, 用nw myapp/myapp.zip即可執行

NW.js入門

解壓sdk; 在根目錄新建資料夾,myapp, 在myapp中新建index.html <html> <head> <title>shellDemo<

JS入門基礎（if else 與 switch case / node安裝）

json health 案例 js文件動作 require 步驟 *** 命令在 JavaScript 中，為不同的決定來執行不同的動作，我們可使用以下條件語句： if 語句 - 只有當指定條件為 true 時，使用該語句來執行代碼 if...else 語句 - 當條

Node.js入門以及第一個helloworld程序

目錄 rip 工作直播需要減少 web容器用戶長連接 1、概念:簡單的說 Node.js 就是運行在服務端的 JavaScript。學之前需要明白Node.js是無法挑戰jsp、php或者asp這種老牌網站的地位的，是永遠不會出現在證券、金融這種領域的。node.

D3.js 入門學習(一)

min() 元素選擇器 eight 也會 127.0.0.1 暫時網絡 doc 學習一、安裝D3.js 1.網絡連接 <script src="https://d3js.org/d3.v4.min.js"></script> 2.命令行安裝

前端04.js入門

js一、學習js之前需要引入的概念。DOM：文檔對象模型，一個html文檔，就是一個dom對象 (整合js，css，html)。BOM：瀏覽器對象模型，用於和瀏覽器打交道。{#1 直接編寫#} <script> alert(‘hello yuan‘) </scrip

js入門5-字符的查詢與過濾加上使用正則表達式

表達 indexof arch document string對象查找 reg 則表達式 fun <h2>5.String對象：字符的查找與過濾</h2> <input type="text" id="txtString

webGL之three.js入門3--材料篇

gmat 深度官網像素 face 得到 hba 根據線框這幾天在看李鵬程翻譯的[美]Jos Dirksen的《Three.js開發指南》，看到第八章了，現在來總結一下threejs中材料的相關知識。順帶也看完了上海交大的張雯莉出的《threejs入門指南》，我所學所

webGL之three.js入門4--ThreeJS Editor入門篇

希望 con 設計 loader 相關 clas cal 其他 bar 因為工作需要，要看threejs editor的源碼，順便記錄過程。 github下載的源碼目錄是這樣的但是editor和其他文件夾內的內容的關聯的，我需要將其獨立出來並且編輯editor。進入e

Three.js入門篇（一）創建一個場景

style api text webgl () mes utf 動畫 fun 上一面講述了向場景中添加物體對象。這一篇準備把每個功能點細細的講述一遍，一方面是為了加深自己的理解。另一方面希望能夠幫助到有需要的人。一、在學習WEBGL的時候，你應該先了解要創建一個WebG

《Node.js入門》Windows 7下Node.js Web開發環境搭建筆記

基於方法一位實時 ibm cal 項目直觀 ear 近期想嘗試一下在IBM Bluemix上使用Node.js創建Web應用程序。所以須要在本地搭建Node.js Web的開發測試環境。這裏講的是Windows下的搭建方法，使用CentOS 的小夥伴請參考：《No

Node.js入門

js代碼 roc 簡單本地 node span server -s host Node的安裝就不說了，流程見http://www.runoob.com/nodejs/nodejs-install-setup.html。直接來做一個簡單的web服務器首先輸入並保存一個js

前端框架React Js入門教程【精】

參考資料 react.js 功夫入門實例 html 操作 load 通過每一個現在最熱門的前端框架有AngularJS、React、Bootstrap等。自從接觸了ReactJS，ReactJs的虛擬DOM（Virtual DOM）和組件化的開發深深的吸引了我，下

Backbone.js入門學習筆記目錄

href web back mode 應用 bookmark hello www col //來自 https://www.the5fire.com/backbone-tutorials-catalogue.html 1、初識backbone.js 2、通過hello

【 D3.js 入門系列 --- 9.4 】集群圖的制作

all users bject nodes -- 部分函數選擇 water 本人的個人博客為： www.ourd3js.com csdn博客為： blog.csdn.net/lzhlzz 轉載請註明出處，謝謝。

Vue.js 入門

互調 type click inpu error 準備增刪保存插入數據背景為了學習spring，準備寫一個通訊錄demo，實現增刪改查功能。前端頁面同事推薦用vue.js，因為簡單快速，當然前提是基於你對前端的html,css,js有一定的了解資料 v

JS入門筆記+基本操作（剛接觸JS，很多筆記就是看到啥寫啥的，希望多多包涵）。

外部 friend mage fff pen scrip 表示 num 很好 1.註釋： html的註釋: CSS的註釋:/*我是註釋*/ JS的註釋://我是註釋 2.變量：變量要先聲明再賦值，如下： var mychar; myc

arcgis api for js入門開發系列十五臺風軌跡

demo 簡單 com span eat api alt 介紹 nbsp 上一篇實現了demo的地圖最近設施點路徑分析，本篇新增臺風軌跡，截圖如下：下面簡單介紹相關知識點：警戒線警戒線坐標集合： var lineArr

萌新--關於vue.js入門及環境搭建

art 安裝 list 建議 href pack 推薦新手學走了十幾天閉關修煉，惡補了html跟css以及JavaScript相應的基礎知識，恰巧有個群友準備做開源項目，願意帶著我做，但是要求我必須懂vue.js，所以開始惡補vue.js相關的東西。在淘寶上買了相關

CK2041-React.js入門與案例開發

理論 filesize 者視頻 htm idt 目前 files 如何 js基礎 CK2041-React.js入門與案例開發隨筆背景：在很多時候，很多入門不久的朋友都會問我：我是從其他語言轉到程序開發的，有沒有一些基礎性的資料給我們學習學習呢，你的框架感覺一下太大了，希

vue.js入門

people 但是簡單的 something rip tutorials data屬性 code 是我 Vue.js是當下很火的一個JavaScript MVVM庫，它是以數據驅動和組件化的思想構建的。相比於Angular.js，Vue.js提供了更加簡潔、更易於理解的A

NW.js入門

相關推薦