開發微信公眾號的朋友都會遇到一個常見的需求就是修改自定義菜單，如果每個人都去開發這個不經常使用的功能確實有點浪費時間。前段時間在github上找到一個仿企業號的菜單編輯界面，結合微信的C# SDK開發了自定義菜單的編輯發布功能，源碼。做為程序員我們經常想追求完美，于是打算做成桌面版，搜索了cef、webkit.net、nw.js等方案后，決定使用nw.js嘗試一下。。。。。。。。經過幾天的摸索后終于完成了，這篇博客也是保存了N次草稿。先上個截圖：

?

準備工作

事情開始之前先看看別人是怎么做的，有個博客可以參考?用node-webkit(NW.js)創建桌面程序，主要是要看官方文檔?http://docs.nwjs.io/en/latest/,官方站點是?http://nwjs.io/。首先創建一個文件夾，如：Zeroes.WeixinMenuApp，把下載的東西都放里面。

1.下載nw.js

首先登陸官網，看到有兩個版本可以下載，選擇哪個呢？Getting Started with NW.js?文檔中有個提示，于是下載SDK版就沒錯了（79.1M）。

You are recommended to choose SDK build flavor to develop your app, which enables you to use DevTools to debug your app. See?Build Flavors?for the differences between build flavors.

2.下載Resource Hacker

?下載地址?http://www.angusj.com/resourcehacker/resource_hacker.zip ，用于修改nw.exe的圖標。

3.下載Inno Setup打包發布文件

打開官網http://www.jrsoftware.org/isdl.php，下載安裝包innosetup-5.5.9-unicode.exe，下載中文語言包 ChineseSimplified.isl

?

開發APP應用

1.解壓nwjs sdk 到目錄nwjs-sdk，修改nw.exe圖標

ResourceHacker解壓后雙擊就可以運行，教程參考http://keenwon.com/1311.html。

替換成我的大寫Z.ico

點擊保存后，在nwjs-sdk目錄下出現了替換圖標后的nw.exe和原始圖標的nw_original.exe兩個文件。

2.準備需要封裝的web程序，并打包成exe程序

這里以nwjs-sdk文件夾為根目錄，直接運行nw.exe就可以運行web程序，按F12打開開發者工具。

a.新建package.json文件存放啟動配置信息。

{"main": "app/index.html", "name": "WeixinMenuEditor","description": "使用nw.js封裝的一個微信公眾號菜單編輯器App","version": "0.0.1","keywords": [ "微信", "菜單編輯器" ], "window": {"title": "微信菜單編輯器","icon": "app/static/img/weixin_logo.jpg","toolbar": true,"frame": true,"width": 1008,"height": 750,"position": "center","min_width": 400,"min_height": 200},"webkit": {"plugin": true,"java": false,"page-cache": false },"chromium-args" :"-allow-file-access-from-files" }

其中? "chromium-args" :"-allow-file-access-from-files" 相當于給谷歌瀏覽器添加啟動參數一樣，這行代碼允許angularjs直接訪問本地json文件。

b.新建app文件夾存放web相關文件

在app.js里引用Node內置模塊

//調用NodeJs內置模塊$scope.fs = require('fs'); 　　　　//讀取配置文件$scope.readConfig = function () {try {var configStr = $scope.fs.readFileSync(config.weixin.path, 'utf8');console.log(configStr);var obj = eval('(' + configStr + ')');$scope.weixin.appid = obj.appid;$scope.weixin.appsecret = obj.appsecret; $scope.weixin.qrcodeurl = obj.qrcodeurl; } catch (e) { console.log(e); alert("讀取微信配置文件失敗"); } } //寫入配置文件 $scope.writeConfig = function () { try { var configStr = JSON.stringify($scope.weixin); $scope.fs.writeFileSync(config.weixin.path, configStr, {encoding: 'utf8'}); return true; } catch (e) { console.log(e); alert("寫入微信配置文件失敗"); return false; } }

引用第三方模塊wechat-api

//調用NodeJs第三方模塊$scope.wechatApi = require('wechat-api');$scope.query = function () {var api = new $scope.wechatApi($scope.weixin.appid, $scope.weixin.appsecret);api.getMenu(function (err, result) {if (err) {console.log(err);alert("查詢菜單異常");} else {load(result);$scope.$apply();//需要手動刷新 }});};

第三方模塊文件夾node_modules放在nwjs-sdk文件夾下，與nw.exe相同目錄。

把上面紅線選中的文件和文件夾打包成一個zip文件，改名為app.nw。

打開命令提示符定位到nwjs-sdk文件夾，運行命令: copy /b nw.exe+app.nw WechatMenuEdit.exe,會生成一個WechatMenuEdit.exe可執行文件，大小是4.5M很明顯不包含運行時環境。

?

?

3.發布

這個時候你希望把exe發布出去，但是要注意的是你不能獨立的運行這個app.exe，因為它需要依賴一些dll，官網上推薦用Enigma Virtual Box這個軟件來將app.exe和依賴的dll打包成一個exe后發布，但是這里有個嚴重問題，那就是這個最后生成的yourapp.exe的size太大，至少70MB以上!

原因很簡單，這個是因為app.exe本身就很大，已經有幾十mb，而他其實也是基于我們剛解壓出來node-webkit后那個nw.exe而生成的，而那個nw.exe本身已經50+mb了，所以我們的app.exe能小的起來嗎？

?

這里推薦另一個打包方式，就是用Inno Setup來打包成安裝程序，即將你的一開始的web應用源文件和node-webkit的nw.exe和一些以來dll直接壓縮成一個安裝文件，我們并不需要上述中間那先打包成app.exe的步驟。用戶在使用你的exe后會出現setup wizard把程序安裝到Program Files目錄中，其實等于解壓縮了，將nw.exe和dll還有你的web應用釋放出來，這個時候所生成的安裝文件其實size會小很多。

?a.安裝Innosetup 5.5.9

默認沒有中文語言包，把下載的中文語言包放在D:\Program Files (x86)\Inno Setup 5\Languages文件夾下。

?b.生成安裝包

首先把nwjs-sdk文件夾下的用不到的文件刪掉，然后通過Innosetup向導創建安裝工程。

?

?

?一直Next最后生成一個微信菜單編輯器V1.0.exe 安裝包

?

?c.測試安裝包

運行安裝包，會在“C:\Program Files (x86)\微信菜單編輯器”目錄下生成nwjs-sdk文件夾下的所有文件，并多出來一個unins000.exe用于卸載，同時安裝包也創建了桌面和菜單的快捷方式。

?

4.使用說明

微信公眾號自定義菜單功能僅對認證訂閱號、服務號、認證服務號開放權限，所以未認證的訂閱號就不要來測試了，可以使用開發者測試公眾號做測試。

a.配置微信號、AppId和AppSecret

創建微信公眾號菜單只要知道AppId和AppSecret就夠了，點擊“完成”時會調用二維碼接口生成一個永久二維碼圖片，顯示在主窗口的預覽區域，方便掃碼關注測試菜單。

在上個版本中是通過獲取永久二維碼的方式生成一個公眾號圖片，這個是欠考慮的做法，實際上只有認證服務號有這個權限，所以導致有些朋友使用過程中出現配置錯誤。

新版本中增加了微信號的配置用來生成公眾號二維碼。

測試公眾號獲取這些信息的地方：http://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index

訂閱號獲取這些信息的地方：

?

??

微信號，用于獲取公眾號二維碼圖片，完整路徑是： http://open.weixin.qq.com/qr/code/?username=微信號 ,?現在的路徑是http://open.weixin.qq.com/qr/code?username=微信號?

?

b.查詢、發布微信公眾號菜單

配置完公眾號之后就可以通過查詢按鈕獲取當前公眾號的菜單配置了，發布時首先調用接口創建菜單，然后保存菜單配置在本地文件weixin-menu.json

c.新增、編輯、修改公眾號菜單，支持拖拽排序，實時預覽。

修改完菜單需要點擊保存才可以保存到本地，默認不自動發布。

d.安裝包&打賞

安裝包放在了百度網盤上：http://pan.baidu.com/s/1o8xuK8E，也可以加入QQ群：19060470 一起交流。

最新安裝包放在QQ群共享文件中，歡迎加入。

微信菜單編輯是個比較獨立的小功能，如果這個小軟件對你有用，請“打賞”一下啊。

?=================================================================

2016.11.09 :更新一版去掉了帶參數二維碼的功能，增加了公眾號二維碼的獲取

?

?

參考鏈接：

0.用node-webkit(NW.js)創建桌面程序，鏈接?http://www.cnblogs.com/soaringEveryday/p/4950088.html

1.修改node-webkit的默認圖標，鏈接?http://keenwon.com/1311.html

2.輕量級桌面應用開發的捷徑——nw.js，鏈接?http://www.jianshu.com/p/7c66ee28ce51

3.Manifest Format，鏈接?https://github.com/nwjs/nw.js/wiki/Manifest-format#webkit-subfields(0.13版以后) 和?http://docs.nwjs.io/en/latest/References/Manifest%20Format/#required-fields(0.12版)

4.?nw.js node-webkit系列（澤澤秋），鏈接?http://blog.csdn.net/zeping891103/article/category/5702195

5.chrome啟動參數設置,鏈接 http://blog.csdn.net/wei_ge163/article/details/7638685。?可以用在package.json的chromium-args 屬性配置，如：?"chromium-args" :"-allow-file-access-from-files"

6.node.js fs文檔，鏈接：https://nodejs.org/api/fs.html

7.Creating Desktop Applications With node-webkit ，鏈接：?https://github.com/nwjs/nw.js/issues/174

8.Wechat API，鏈接：http://doxmate.cool/node-webot/wechat-api/index.html

9.如何快速獲取已關注微信公眾號的二維碼，鏈接：http://blog.sina.com.cn/s/blog_d2b7bf100102wtav.html

轉載于:https://www.cnblogs.com/zeroes/p/wechat-menu-edit.html

總結

以上是生活随笔為你收集整理的使用NW.js封装微信公众号菜单编辑器为桌面应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。