使用NW.js封装微信公众号菜单编辑器为桌面应用

　　开发微信公众号的朋友都会遇到一个常见的需求就是修改自定义菜单，如果每个人都去开发这个不经常使用的功能确实有点浪费时间。前段时间在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