摘要：箭頭表示數(shù)據(jù)的流動(dòng)，負(fù)責(zé)儲(chǔ)存收藏夾的內(nèi)容，方便下一次打開(kāi)應(yīng)用的時(shí)候內(nèi)容不會(huì)丟失，服務(wù)器負(fù)責(zé)根據(jù)關(guān)鍵字爬取搜狗提供的數(shù)據(jù)。

只看不贊，或者只收藏不贊的都是耍流氓，放學(xué)別走，我找我哥收拾你們。

項(xiàng)目地址：https://github.com/jrainlau/wechat-subscriptor

git clone [email protected]:jrainlau/wechat-subscriptor.git
cd wechat-subscriptor && npm install

npm run dev   // run in dev mode
cd backend-server && node crawler.js   // turn on the crawler server

open `localhost:8080` in your broswer and enjoy it.

我在微信上關(guān)注了不少的公眾號(hào)，經(jīng)常瀏覽里面的內(nèi)容。但是往往在我閱讀文章的時(shí)候，總是被各種微信消息打斷，不得不切出去，回復(fù)消息，然后一路點(diǎn)回公眾號(hào)，重新打開(kāi)文章，周而復(fù)始，不勝其煩。后來(lái)想起，微信跟搜狗有合作，可以通過(guò)搜狗直接搜索公眾號(hào)，那么為什么不利用這個(gè)資源做一個(gè)專門(mén)收藏公眾號(hào)的應(yīng)用呢？這個(gè)應(yīng)用可以方便地搜索公眾號(hào)，然后把它收藏起來(lái)，想看的時(shí)候直接打開(kāi)就能看。好吧，其實(shí)也不難，那就開(kāi)始從架構(gòu)開(kāi)始構(gòu)思。

國(guó)際慣例，先看架構(gòu)圖：

然后是技術(shù)選型：

利用搜狗的API作為查詢公眾號(hào)的接口

由于存在跨域問(wèn)題，遂通過(guò)node爬蟲(chóng)使用接口

使用vue進(jìn)行開(kāi)發(fā)，vuex作狀態(tài)管理

使用mui作為UI框架，方便日后打包成手機(jī)app

使用vue-cli初始化項(xiàng)目并通過(guò)webpack進(jìn)行構(gòu)建

首先分析紅圈中的vuex部分。它是整個(gè)APP的核心，也是所有數(shù)據(jù)的處理中心。

客戶端所有組件都是在action中完成對(duì)流入數(shù)據(jù)的處理（如異步請(qǐng)求等），然后通過(guò)action觸發(fā)mutation修改state，后由state經(jīng)過(guò)getter分發(fā)給各組件，滿足“單項(xiàng)數(shù)據(jù)流”的特點(diǎn)，同時(shí)也符合官方推薦的做法：

理解完最重要的vuex以后，其他部分也就順利成章了。箭頭表示數(shù)據(jù)的流動(dòng)，LocalStorage負(fù)責(zé)儲(chǔ)存收藏夾的內(nèi)容，方便下一次打開(kāi)應(yīng)用的時(shí)候內(nèi)容不會(huì)丟失，node服務(wù)器負(fù)責(zé)根據(jù)關(guān)鍵字爬取搜狗API提供的數(shù)據(jù)。

是不是很簡(jiǎn)單？下面讓我們一起來(lái)開(kāi)始coding吧！

npm install vue-cli -g安裝最新版的vue-cli，然后vue init webpack wechat-subscriptor，按提示經(jīng)過(guò)一步步設(shè)置并安裝完依賴包以后，進(jìn)入項(xiàng)目的目錄并稍作改動(dòng)，最終目錄結(jié)構(gòu)如下：

具體的內(nèi)容請(qǐng)直接瀏覽項(xiàng)目

進(jìn)入/backend-server文件夾并新建名為crawler-server.js的文件，代碼如下：

/*** crawler-server.js ***/

"use strict"
const http = require("http")
const url = require("url")
const util = require("util")
const superagent = require("superagent")
const cheerio = require("cheerio")

const onRequest = (req, res) => {
    // CORS options
    res.writeHead(200, {"Content-Type": "text/plain", "Access-Control-Allow-Origin": "*"})
    let keyWord = encodeURI(url.parse(req.url, true).query.query)
    // recieve keyword from the client side and use it to make requests
    if (keyWord) {
        let resultArr = []
        superagent.get("http://weixin.sogou.com/weixin?type=1&query=" + keyWord + "&ie=utf8&_sug_=n&_sug_type_=").end((err, response) => {
            if (err) console.log(err)
            let $ = cheerio.load(response.text)

            $(".mt7 .wx-rb").each((index, item) => {
                // define an object and update it
                // then push to the result array
                let resultObj = {
                    title: "",
                    wxNum: "",
                    link: "",
                    pic: "",
                }

                resultObj.title = $(item).find("h3").text()
                resultObj.wxNum = $(item).find("label").text()
                resultObj.link = $(item).attr("href")
                resultObj.pic = $(item).find("img").attr("src")
                resultArr.push(resultObj)
            })
            
            res.write(JSON.stringify(resultArr))
            res.end()
        })
    }
}

http.createServer(onRequest).listen(process.env.PORT || 8090)
console.log("Server Start!")

一個(gè)簡(jiǎn)單的爬蟲(chóng)，通過(guò)客戶端提供的關(guān)鍵詞向搜狗發(fā)送請(qǐng)求，后利用cheerio分析獲取關(guān)鍵的信息。這里貼上搜狗公眾號(hào)搜索的地址，你可以親自試一試：http://weixin.sogou.com/

當(dāng)開(kāi)啟服務(wù)器以后，只要帶上參數(shù)請(qǐng)求localhost:8090即可獲取內(nèi)容。

先貼上vuex官方文檔：http://vuex.vuejs.org/en/index.html，相信我，不要看中文版的，不然你會(huì)踩坑，英文版足夠了。

從前文的架構(gòu)圖可以知道，所有的數(shù)據(jù)流通都是通過(guò)vuex進(jìn)行，通過(guò)上面的文檔了解了有關(guān)vuex的用法以后，我們進(jìn)入/vuex文件夾來(lái)構(gòu)建核心的store.js代碼：

/*** store.js ***/

import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex)

const state = {
  collectItems: [],
  searchResult: {}
}

localStorage.getItem("collectItems")?
 state.collectItems = localStorage.getItem("collectItems").split(","):
  false

const mutations = {
  SET_RESULT (state, result) {
    state.searchResult = result
  },
  COLLECT_IT (state, name) {
    state.collectItems.push(name)
    localStorage.setItem("collectItems", state.collectItems)
  },
  DELETE_COLLECTION (state, name) {
    state.collectItems.splice(state.collectItems.indexOf(name), 1)
    localStorage.setItem("collectItems", state.collectItems)
  }
}

export default new Vuex.Store({
  state,
  mutations
})

下面我們將對(duì)當(dāng)中的代碼重點(diǎn)分析。

首先我們定義了一個(gè)state對(duì)象，里面的兩個(gè)屬性對(duì)應(yīng)著收藏夾內(nèi)容，搜索結(jié)果。換句話說(shuō)，整個(gè)APP的數(shù)據(jù)就是存放在state對(duì)象里，隨取隨用。

接著，我們?cè)俣x一個(gè)mutations對(duì)象。我們可以把mutations理解為“用于改變state狀態(tài)的一系列方法”。在vuex的概念里，state僅能通過(guò)mutation修改，這樣的好處是能夠更直觀清晰地集中管理應(yīng)用的狀態(tài)，而不是把數(shù)據(jù)扔得到處都是。

通過(guò)代碼不難看出，三個(gè)mutation的作用分別是：

SET_RESULT：把搜索結(jié)果存入state

COLLECT_IT：添加到收藏夾操作（包括localstorage）

DELETE_IT：從收藏夾移除操作（包括localstorage）

我們的APP一共有兩個(gè)組件，SearchBar.vue和SearchResult.vue，分別對(duì)應(yīng)著搜索部分組件和結(jié)果部分組件。其中搜索部分組件包含著收藏夾部分，所以也可以理解為有三個(gè)部分。

/*** SearchBar.vue ***/


vuex: {
  getters: {
    collectItem(state) {
      return state.collectItems
    }
  },
  actions: {
    deleteCollection: ({ dispatch }, name) => {
      dispatch("DELETE_COLLECTION", name)
    },
    searchFun: ({ dispatch }, keyword) => {
      $.get("http://localhost:8090", { query: keyword }, (data) => {
        dispatch("SET_RESULT", JSON.parse(data))
      })
    }
  }
}

代碼有點(diǎn)長(zhǎng)，這里僅重點(diǎn)介紹vuex部分，完整代碼可以參考項(xiàng)目。

getters獲取store當(dāng)中的數(shù)據(jù)作予組件使用

actions的兩個(gè)方法負(fù)責(zé)把數(shù)據(jù)分發(fā)到store中供mutation使用

看官方的例子，在組件中向action傳參似乎很復(fù)雜，其實(shí)完全可以通過(guò)methods來(lái)處理參數(shù)，在觸發(fā)actions的同時(shí)把參數(shù)傳進(jìn)去。

/*** SearchResult.vue ***/

vuex: {
  getters: {
    wordValue(state) {
      return state.keyword
    },
    collectItems(state) {
      return state.collectItems
    },
    searchResult(state) {
      return state.searchResult
    }
  },
  actions: {
    collectIt: ({ dispatch }, name, collectArr) => {
      for(let item of collectArr) {
        if(item == name) return false
      }
      dispatch("COLLECT_IT", name)
    }
  }
}

結(jié)果部分主要在于展示，需要觸發(fā)action的地方僅僅是添加到收藏夾這一操作。需要注意的地方是應(yīng)當(dāng)避免重復(fù)添加，所以使用了for...of循環(huán)，當(dāng)數(shù)組中已有當(dāng)前元素的時(shí)候就不再添加了。

關(guān)鍵的邏輯部分代碼分析完畢，這個(gè)APP也就這么一回事兒，UI部分就不細(xì)說(shuō)了，看看項(xiàng)目源碼或者你自己DIY就可以。至于打包成APP，首先你要下載HBuilder，然后通過(guò)它直接打包就可以了，配套使用mui能夠體驗(yàn)更好的效果，不知道為什么那么多人黑它。

搜狗提供的API很強(qiáng)大，但是提醒一下，千萬(wàn)不要操作太過(guò)頻繁，不然你的IP會(huì)被它封掉，我的已經(jīng)被封了……

Weex已經(jīng)出來(lái)了，通過(guò)它可以構(gòu)建Native應(yīng)用，想想也是激動(dòng)啊，待心血來(lái)潮就把本文的項(xiàng)目做成Weex版本的玩玩……

最后的最后，感謝你的閱讀，如果覺(jué)得我的文章不錯(cuò)，歡迎關(guān)注我的專欄，下次見(jiàn)！