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

?

準(zhǔn)備工作

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

1.下載nw.js

首先登陸官網(wǎng)，看到有兩個版本可以下載，選擇哪個呢？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的圖標(biāo)。

3.下載Inno Setup打包發(fā)布文件

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

?

開發(fā)APP應(yīng)用

1.解壓nwjs sdk 到目錄nwjs-sdk，修改nw.exe圖標(biāo)

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

替換成我的大寫Z.ico

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

2.準(zhǔn)備需要封裝的web程序，并打包成exe程序

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

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" 相當(dāng)于給谷歌瀏覽器添加啟動參數(shù)一樣，這行代碼允許angularjs直接訪問本地json文件。

b.新建app文件夾存放web相關(guān)文件

在app.js里引用Node內(nèi)置模塊

//調(diào)用NodeJs內(nèi)置模塊$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

//調(diào)用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可執(zhí)行文件，大小是4.5M很明顯不包含運行時環(huán)境。

?

?

3.發(fā)布

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

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

?

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

?a.安裝Innosetup 5.5.9

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

?b.生成安裝包

首先把nwjs-sdk文件夾下的用不到的文件刪掉，然后通過Innosetup向?qū)?chuàng)建安裝工程。

?

?

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

?

?c.測試安裝包

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

?

4.使用說明

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

a.配置微信號、AppId和AppSecret

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

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

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

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

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

?

??

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

?

b.查詢、發(fā)布微信公眾號菜單

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

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

修改完菜單需要點擊保存才可以保存到本地，默認(rèn)不自動發(fā)布。

d.安裝包&打賞

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

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

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

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

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

?

?

參考鏈接：

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

1.修改node-webkit的默認(rèn)圖標(biāo)，鏈接?http://keenwon.com/1311.html

2.輕量級桌面應(yīng)用開發(fā)的捷徑——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啟動參數(shù)設(shè)置,鏈接 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.如何快速獲取已關(guān)注微信公眾號的二維碼，鏈接：http://blog.sina.com.cn/s/blog_d2b7bf100102wtav.html

轉(zhuǎn)載于:https://www.cnblogs.com/zeroes/p/wechat-menu-edit.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。