node-webkit實踐－一鍵安裝

yy736044583 發布于2019-08-01 14:44 / 1318人閱讀

摘要：博客原文地址實踐一鍵安裝前言很久以前我簡單的寫過關于的使用但是我在更換博客的時候丟棄了，我在下面的文章把它引用一遍。

博客原文地址node-webkit實踐－一鍵安裝

前言

很久以前我簡單的寫過關于node-webkit的使用,但是我在更換博客的時候丟棄了，我在下面的文章把它引用一遍。
node-webkit其實在很多地方用處很大，請自行發散。
本文的相關代碼：點擊查看demo的代碼

本文會根據以前的文章進行實踐，同樣會變更一些地方。主要從以下幾個方法介紹：

獲取node-webkit

以我的博客為例制作一個客戶端。

windows下打包一個一鍵安裝包

引用

最近開發艾聯的商家管理web后臺，由于后臺的效果采用了html5，為了照顧到所有低版本瀏覽器的商家，開始了無休止的兼容性調試，但是最終還是沒有達到預期。

為了提供更好的體驗，決定采用pc客戶端的形勢展示商家管理后臺。
查了一下資料，發現有兩款基于node的客戶端打包工具
appjs：https://github.com/appjs/appjs
node-webkit: https://github.com/rogerwang/node-webkit
因為先看到的是node-webkit所以就采用了這種方式
作用：將web轉化成原生桌面的應用（win，linux，mac）
步驟：
1. 制作web頁面
2. 打包文件，參考如何打包你的app
3. win下可以通過Inno等軟件制作安裝包
問題：
4. 64位運行：因為自己傻，一開始沒看懂api，后來看懂了，直接把包放到目錄下運行就好了
5. 軟件更新：這是我沒有解決的地方，因為沒辦法直接去修改打包的內容，所以沒辦法去更新。我只好退而求其次，直接把

我的地址放在了配置文件中。這樣我就不用擔心軟件的更新了

最終的windows版就直接可以打包成了安裝包。由于屬于公司產品，所以沒有辦法開放我的源碼，請見諒。

獲取node-webkit

git地址

很好的中文手冊&教程

實際例子

大家現在瀏覽的是我的博客，我們以這個博客為例子，分別進行封裝。因為我的博客做過自適應，所以我們自己來把它變成一個小型的桌面應用。

下載node-webkit 32位
這里可以很好的下載各種版本的。我下載32位的。

解壓配置
解壓你下載的文件包，在里面新建一個文件夾，我命名為我的博客名稱“cindy”

添加配置文件package.json
我的配置文件很簡單，因為我是遠程加載的。

    {% highlight json %}
    {
      "main": "http://cindyfn.com",

      "name": "cindy-blog",

      "description": "會寫ios的前端",

      "version": "0.1.0",

      "keywords": [ "web","IOS","nodejs","javascript","js","object-c","前端開發","ios開發" ],

      //定義windows表現
        "window": {

        "title": "cindy的博客",

        "icon": "logo.png",

        "toolbar": false,

        "frame": true,

        "width": 320,

        "height": 500

        }
    }
    {% endhighlight %}

打包運行

備：windows下運行可以將cindy文件夾拖拽到nw.exe中進行展示

打包：在windows下打包cindy文件夾下文件為cindy.zip打包，并修改名字為cindy.nw
打包exe: copy /b nw.exe+cindy.nw cindy.exe

這樣就會在文件夾下又一個cindy.exe，點擊運行就會看到相應的效果。

不過。你不要以為這樣就大功告成了，你嘗試把cindy.exe多帶帶拿出來運行，貌似不能運行了。為什么？以為它的運行是依賴包內的chrome的，你多帶帶拿出來當然不能運行了。不過別急，繼續往下面看，教你如何打包安裝包。

切換到windows電腦。有點不習慣。

windows下封裝

趣：由于我目前用的是mac，沒有win系統，所以把我塵封已久的電腦拿出來了，畫質不好不要怪我。

node-webkit官方建議使用的封裝軟件是Inno,點擊查看詳情
具體的使用方式可以參考這里如何封裝EXE安裝程序

我已經按照這個步驟封裝了我的博客exe，參見這里cindysetup.exe

說在后面

本文是針對windows進行封裝，你也可以嘗試使用mac，linux下的封裝。希望你能夠分享下。

云服務器 GPU云服務器一鍵安裝一鍵安裝包安裝lnmp一鍵安裝包 linux一鍵安裝

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/49557.html

分享一個用vue2 + node-webkit + koa2 + mongodb開發的，可以實時編輯

摘要：若用戶已登錄，數據存儲在遠程服務器用戶未登錄時，數據存儲在。開發服務端部署服務端已經部署在我自己的服務器上，不需要你進行部署啦。有什么好的建議也可以提哈記事本 showImg(https://segmentfault.com/img/remote/1460000013228992?w=50&h=50); 該項目分為兩部分：桌面客戶端(node-webkit) + 服務端(koa2)...

LeoHsiun 2019-08-26 11:38 評論0 收藏0
NW.js+Enigma Virtual Box+node-webkit打包Hybrid桌面應用其實

摘要：在很多原因下，我們為了迎合客戶或者其他的原因，需要在本身代碼或框架不能兼容的瀏覽器下運行項目，怎么辦呢，我們將其打包為桌面應用不失為一種好。如果圖標有變化，大功告成我的沒有換圖標，所以依然是的圖標 WHY 在很多原因下，我們為了迎合客戶或者其他的原因，需要在本身代碼或框架不能兼容的瀏覽器下運行項目，怎么辦呢，我們將其打包為桌面應用不失為一種好idea。nw.js是node-webkit...

microcosm1994 2019-08-20 17:31 評論0 收藏0
node-webkit文檔翻譯#package.json

摘要：文檔翻譯基本示例必填字段字符串當打開時的默認頁面。可通過訪問控制窗口的樣子，后文細講。禁止選中文字拖動布爾值是否在任務欄上顯示。布爾值是否處于狀態，在狀態下將全屏并且阻止用戶關閉窗口。 title: node-webkit文檔翻譯#package.json date: 2013-12-07 21:38:25 tags: node-webkit 基本示例 { main: i...

luodongseu 2019-08-01 14:35 評論0 收藏0
Yeoman-- 一個強大的前端構建工具

摘要：通過官方的生成器，他們建立了一個的工作流，這個流是由一個強大的固定的客戶端組建，包含工具和框架幫助開發者快速建立牛逼的應用。原文還是在簡書上： Yeoman-- 一個強大的前端構建工具,我只是自己的搬運工！！上期跟大家試了試Vue-cli這個構建工具，這個讓我想起了很多其他的前端工具，其中一個就是Yeoman（上次就劇透了的）,所以這期跟大家先簡單介紹下這個腳手架工具，然后慢慢一步...

寵來也 2019-08-19 17:26 評論0 收藏0