摘要：項(xiàng)目背景龐大的用戶安裝量和恐怖的用戶使用時(shí)間，微信已成為國(guó)內(nèi)移動(dòng)互聯(lián)網(wǎng)上基礎(chǔ)設(shè)施級(jí)的應(yīng)用。以一周時(shí)間開發(fā)的微信天氣查詢助手，就是一次技術(shù)驗(yàn)證性嘗試。但就針對(duì)微信來說，不是最好的解決方案。

龐大的用戶安裝量和恐怖的用戶使用時(shí)間，微信已成為國(guó)內(nèi)移動(dòng)互聯(lián)網(wǎng)上基礎(chǔ)設(shè)施級(jí)的應(yīng)用。

以微信為平臺(tái)的客服服務(wù)有很多方式，比如訂閱號(hào)，服務(wù)號(hào)，小程序，但受到微信官方的限制，如果想做一個(gè)聊天群的自助客服, 或者私人訂制的客服，那就沒有了官方的自動(dòng)化方案。例如場(chǎng)景一：折扣商品導(dǎo)購(gòu)群里，只要@客服+產(chǎn)品名，就可以馬上反饋一條產(chǎn)品折扣信息。場(chǎng)景二：徒步群里參加一個(gè)活動(dòng)報(bào)名，只需要@客服+活動(dòng)名稱 就可以自助報(bào)名參加活動(dòng)。

以Electron-nightmare一周時(shí)間開發(fā)的微信天氣查詢助手 ，就是一次技術(shù)驗(yàn)證性嘗試。

依賴項(xiàng)

-

python的優(yōu)點(diǎn)，python是非常棒的語言，有著廣闊的舞臺(tái)，在可預(yù)見的未來，python的熱度還將大幅提升。python有大量的三方庫(kù)支持，各種重量級(jí)的應(yīng)用框架、前瞻性產(chǎn)品基本上都提供python接口，有大量的社區(qū)。就微信機(jī)器人來說,有非常優(yōu)秀的itchat。但就針對(duì)微信來說，python不是最好的解決方案。因?yàn)閜ython需要從底層web通訊協(xié)議開始分析，需要用抓包、分解、組裝，完完全全的實(shí)現(xiàn)一個(gè)web協(xié)議的機(jī)器人，這其間的開發(fā)工作量過大。而且越陷入web底層，將來隨著官方協(xié)議變更，維護(hù)版本的工作量也不容忽視。這背離了我們的初衷：在松耦合基礎(chǔ)上盡可能的專注業(yè)務(wù)本身。而且python還面臨2與3的不兼容的坑，也是需要考慮的問題。

phantomjs 一個(gè)headless的瀏覽器框架，基于webkit。第一次了解到phantomjs是用來做爬蟲，phantomjs非常適合動(dòng)態(tài)頁(yè)面的內(nèi)容爬取，而且phantomjs可以很方便的運(yùn)行在linux服務(wù)器上，相對(duì)于普通的瀏覽器，phantomjs消耗的內(nèi)存要少太多。但phantomjs也有一些問題。最大的問題就是phantomjs的headless,無法很簡(jiǎn)單的測(cè)試代碼片段。而這幾年瀏覽器前端發(fā)展迅速，各種js新的特性不斷涌現(xiàn)，但phantomjs兼容性問題也凸顯：例如phantomjs對(duì)set Object就不支持。而且就整體性能而言，沒有V8引擎的支持的js，在執(zhí)行效率上也要打折扣。所以我們還是要盡可能站在巨人的肩膀上拓展業(yè)務(wù)。

站在巨人的肩上，Electron。Electron是基于Google的Chromium框架，本來是專注快速開發(fā)跨平臺(tái)桌面應(yīng)用。但基于高性能瀏覽器的Electron是天生的web自動(dòng)化框架。配合Node.js的express,可以很簡(jiǎn)單的實(shí)現(xiàn)一個(gè)RESTFul服務(wù)。而瀏覽器的可視化調(diào)試工具也大大提高了測(cè)試、調(diào)試效率。在Electron上做微信網(wǎng)頁(yè)版自動(dòng)化更像是做一個(gè)plugin，這將減少了大量的的開發(fā)工作。

從模塊分離的原則，在設(shè)計(jì)上，將微信機(jī)器人作為服務(wù)提供出來，這樣即可以在以后按照其約定方式（RESTFul）提供新的對(duì)接方式，也隔離的本身業(yè)務(wù)與機(jī)器人服務(wù)之間的耦合性，而且分離后，基礎(chǔ)服務(wù)可以遠(yuǎn)程部署。設(shè)計(jì)思路如下圖

系統(tǒng)分解圖

當(dāng)前（2017-11-30日）微信網(wǎng)頁(yè)版是基于AngularJS v1.2.28開發(fā)的，采用MVC分離模式。通過分析最主要的index.js源碼我們可以大概知道各個(gè)功能模塊的組合方式。

模塊分解圖

在了解網(wǎng)頁(yè)版模式后，接下來就是獲取，并調(diào)用對(duì)應(yīng)的功能模塊，具體實(shí)現(xiàn)位于 wxinjector.js

var injector = angular.element(document.body).injector();
var F = {
  chatFactory:injector.get("chatFactory"),
  contactFactory:injector.get("contactFactory"),
  confFactory:injector.get("confFactory"),
  loginFactory:injector.get("loginFactory"),
  accountFactory:injector.get("accountFactory"),
  utilFactory:injector.get("utilFactory"),
}
var CTRLS = {
  appController:angular.element(document.body).scope(),
  loginController:angular.element(document.querySelector("body > div.login.ng-scope")).scope(),
  chatSenderController:angular.element(document.querySelector("#chatArea > div.box_ft.ng-scope")).scope(),
}

chrome的dev-tools是非常好用的可視化測(cè)試工具，我們可以將功能片段一點(diǎn)一點(diǎn)的在console中測(cè)試后，再添加到項(xiàng)目的代碼中

測(cè)試獲得聯(lián)系人列表

angular.element(document.body).injector().get("contactFactory").getAllContacts();

測(cè)試發(fā)送文本消息

function SendMessage(ToUserName, msg){
  var a = angular.element(document.querySelector("#editArea")).scope();
  var confFactory = angular.element(document.body).injector().get("confFactory")
  var chatFactory = angular.element(document.body).injector().get("chatFactory");
  a.editAreaCtn = msg;
  var e = chatFactory.createMessage({
    ToUserName:ToUserName,
    MsgType: confFactory.MSGTYPE_TEXT,
    Content: a.editAreaCtn
  });
  chatFactory.appendMessage(e),
  chatFactory.sendMessage(e),
  // O[chatFactory.getCurrentUserName()] = "",
  a.editAreaCtn = "";
}

|____conf                       # 程序配置文件
| |____service.json
| |____wxconf.js
| |____cities.json              # 城市氣象編碼表
|____lib                        # 模塊代碼
| |____weather.js
| |____inject
| | |____wxinjector.js
| |____wxbot.js
|____test                       # 測(cè)試代碼目錄
|____.gitignore
|____package.json
|____README.md
|____sy-cli.js                  # 天氣問答業(yè)務(wù)程序
|____syaya.js                   # 微信基礎(chǔ)服務(wù)程序

cnpm install

啟動(dòng)微信基礎(chǔ)服務(wù) node syaya.js

啟動(dòng)天氣問答業(yè)務(wù) node sy-cli.js

掃碼登錄微信賬號(hào)（業(yè)務(wù)賬號(hào)）

用另一個(gè)微信賬號(hào)給業(yè)務(wù)賬號(hào)發(fā)信息測(cè)試

ubuntu server上運(yùn)行electron

$sudo apt-get install xvfb libgtk2.0-0 libnotify-bin libgconf-2-4 libnss3 libasound2 libcap2-bin libcups2 libxtst6 libxss1
$xvfb-run node --harmony syaya.js

window.reload后，重新加載注入腳本的時(shí)機(jī): 在事件"dom-ready"中注入

  page.engin.on("dom-ready", function () {
    console.log("DOM-READY for inject...");
    page.engin.inject("js", WX_HELPER_JS);
  });

express下，讓curl的post正常工作

var bodyParser = require("body-parser");
var app = express();
app.use(bodyParser.json({
  limit: "100kb",
  type: "application/x-www-form-urlencoded"
}));

js的sleep等待

async function sleep(ms) {
  return new Promise(resolve => {
    var tm = setTimeout(() => {
      console.log("clear", tm);
      clearTimeout(tm);
      resolve(0);
    }, ms);
  });
}
async function test_sleep(){
  var r =  await sleep(2000);
  console.log(r);
}
test_sleep();

js協(xié)程處理單條消息, 偽代碼

var co = require("co");
function process_one_message(msg){
  co(function *(message) {
    var action = yield extract_action(message);
    var r = yield action.do_step1();
    if(r.status == "success"){
      r = yield action.do_step2();
    }
    r = yield action.do_final();
    r = yield make_response(action, message);
  }, msg);
}

在線XML、JSON數(shù)據(jù)互轉(zhuǎn)

有哪些免費(fèi)開放且收錄城市較完整的天氣 API 接口

http://itchat.readthedocs.io/...

https://github.com/Chatie/wec...

https://shields.io

如果有什么問題或者建議都可以在這個(gè)Issue和我討論
或者也可以在微博上聯(lián)系我：rockee阿木
或者微信聯(lián)系：