只看不讚，或者只收藏不讚的都是耍流氓，放學別走，我找我哥收拾你們。
下載&執行
|
1 2 3 4 5 6 7 |
git clone git@github.com: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. |
專案介紹
我在微信上關注了不少的公眾號，經常瀏覽裡面的內容。但是往往在我閱讀文章的時候，總是被各種微信訊息打斷，不得不切出去，回覆訊息，然後一路點回公眾號，重新開啟文章，周而復始，不勝其煩。後來想起，微信跟搜狗有合作，可以通過搜狗直接搜尋公眾號，那麼為什麼不利用這個資源做一個專門收藏公眾號的應用呢？這個應用可以方便地搜尋公眾號，然後把它收藏起來，想看的時候直接開啟就能看。好吧，其實也不難，那就開始從架構開始構思。
整體架構
國際慣例，先看架構圖：
然後是技術選型：
- 利用搜狗的API作為查詢公眾號的介面
- 由於存在跨域問題，遂通過
node爬蟲使用介面 - 使用
vue進行開發，vuex作狀態管理 - 使用
mui作為UI框架，方便日後打包成手機app - 使用
vue-cli初始化專案並通過webpack進行構建
首先分析紅圈中的vuex部分。它是整個APP的核心，也是所有資料的處理中心。
客戶端所有元件都是在action中完成對流入資料的處理（如非同步請求等），然後通過action觸發mutation修改state，後由state經過getter分發給各元件，滿足“單項資料流”的特點，同時也符合官方推薦的做法：
理解完最重要的vuex以後，其他部分也就順利成章了。箭頭表示資料的流動，LocalStorage負責儲存收藏夾的內容，方便下一次開啟應用的時候內容不會丟失，node伺服器負責根據關鍵字爬取搜狗API提供的資料。
是不是很簡單？下面讓我們一起來開始coding吧！
初始化專案
npm install vue-cli -g安裝最新版的vue-cli，然後vue init webpack wechat-subscriptor，按提示經過一步步設定並安裝完依賴包以後，進入專案的目錄並稍作改動，最終目錄結構如下：
具體的內容請直接瀏覽專案
伺服器&爬蟲
進入/backend-server資料夾並新建名為crawler-server.js的檔案，程式碼如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
/*** 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!') |
一個簡單的爬蟲，通過客戶端提供的關鍵詞向搜狗傳送請求，後利用cheerio分析獲取關鍵的資訊。這裡貼上搜狗公眾號搜尋的地址，你可以親自試一試：http://weixin.sogou.com/
當開啟伺服器以後，只要帶上引數請求localhost:8090即可獲取內容。
使用Vuex作狀態管理
先貼上vuex官方文件：http://vuex.vuejs.org/en/index.html，相信我，不要看中文版的，不然你會踩坑，英文版足夠了。
從前文的架構圖可以知道，所有的資料流通都是通過vuex進行，通過上面的文件瞭解了有關vuex的用法以後，我們進入/vuex資料夾來構建核心的store.js程式碼：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
/*** 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 }) |
下面我們將對當中的程式碼重點分析。
首先我們定義了一個state物件，裡面的兩個屬性對應著收藏夾內容，搜尋結果。換句話說，整個APP的資料就是存放在state物件裡，隨取隨用。
接著，我們再定義一個mutations物件。我們可以把mutations理解為“用於改變state狀態的一系列方法”。在vuex的概念裡，state僅能通過mutation修改，這樣的好處是能夠更直觀清晰地集中管理應用的狀態，而不是把資料扔得到處都是。
通過程式碼不難看出，三個mutation的作用分別是：
SET_RESULT：把搜尋結果存入stateCOLLECT_IT：新增到收藏夾操作（包括localstorage）DELETE_IT：從收藏夾移除操作（包括localstorage）
元件資料處理
我們的APP一共有兩個元件，SearchBar.vue和SearchResult.vue，分別對應著搜尋部分元件和結果部分元件。其中搜尋部分元件包含著收藏夾部分，所以也可以理解為有三個部分。
搜尋部分元件SearchBar.vue
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
/*** 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)) }) } } } |
程式碼有點長，這裡僅重點介紹vuex部分，完整程式碼可以參考專案。
getters獲取store當中的資料作予元件使用actions的兩個方法負責把資料分發到store中供mutation使用
看官方的例子，在元件中向action傳參似乎很複雜，其實完全可以通過methods來處理引數，在觸發actions的同時把引數傳進去。
結果部分元件SearchResult.vue
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
/*** 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) } } } |
結果部分主要在於展示，需要觸發action的地方僅僅是新增到收藏夾這一操作。需要注意的地方是應當避免重複新增，所以使用了for...of迴圈，當陣列中已有當前元素的時候就不再新增了。
尾聲
關鍵的邏輯部分程式碼分析完畢，這個APP也就這麼一回事兒，UI部分就不細說了，看看專案原始碼或者你自己DIY就可以。至於打包成APP，首先你要下載HBuilder，然後通過它直接打包就可以了，配套使用mui能夠體驗更好的效果，不知道為什麼那麼多人黑它。
搜狗提供的API很強大，但是提醒一下，千萬不要操作太過頻繁，不然你的IP會被它封掉，我的已經被封了……
Weex已經出來了，通過它可以構建Native應用，想想也是激動啊，待心血來潮就把本文的專案做成Weex版本的玩玩……
最後的最後，感謝你的閱讀，如果覺得我的文章不錯，歡迎關注我的專欄，下次見！