一步一步教你用 Vue.js + Vuex 製做專門收藏微信公衆號的 app
只看不讚，或者只收藏不讚的都是耍流氓，放學別走，我找我哥收拾大家。html
下載&運行
|
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.
|
項目介紹
我在微信上關注了很多的公衆號，常常瀏覽裏面的內容。可是每每在我閱讀文章的時候，老是被各類微信消息打斷，不得不切出去，回覆消息，而後一路點回公衆號，從新打開文章，周而復始，不勝其煩。後來想起，微信跟搜狗有合做，能夠經過搜狗直接搜索公衆號，那麼爲何不利用這個資源作一個專門收藏公衆號的應用呢？這個應用能夠方便地搜索公衆號，而後把它收藏起來，想看的時候直接打開就能看。好吧，其實也不難，那就開始從架構開始構思。node
總體架構
國際慣例，先看架構圖：webpack
而後是技術選型：git
- 利用搜狗的API做爲查詢公衆號的接口
- 因爲存在跨域問題，遂經過
node爬蟲使用接口 - 使用
vue進行開發，vuex做狀態管理 - 使用
mui做爲UI框架，方便往後打包成手機app - 使用
vue-cli初始化項目並經過webpack進行構建
首先分析紅圈中的vuex部分。它是整個APP的核心，也是全部數據的處理中心。github
客戶端全部組件都是在action中完成對流入數據的處理（如異步請求等），而後經過action觸發mutation修改state，後由state通過getter分發給各組件，知足「單項數據流」的特色，同時也符合官方推薦的作法：web
理解完最重要的vuex之後，其餘部分也就順利成章了。箭頭表示數據的流動，LocalStorage負責儲存收藏夾的內容，方便下一次打開應用的時候內容不會丟失，node服務器負責根據關鍵字爬取搜狗API提供的數據。vuex
是否是很簡單？下面讓咱們一塊兒來開始coding吧！vue-cli
初始化項目
npm install vue-cli -g安裝最新版的vue-cli，而後vue init webpack wechat-subscriptor，按提示通過一步步設置並安裝完依賴包之後，進入項目的目錄並稍做改動，最終目錄結構以下：npm
具體的內容請直接瀏覽項目
服務器&爬蟲
進入/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版本的玩玩……
最後的最後，感謝你的閱讀，若是以爲個人文章不錯，歡迎關注個人專欄，下次見！
- 1. 一步一步教你用 Vue.js + Vuex 製做專門收藏微信公衆號的 app
- 2. 一步一步教你用 Vue.js + Vuex 製作專門收藏微信公衆號的 app
- 3. JAVA帶你一步一步實現微信公衆號開發（一）--接入微信公衆平臺
- 4. 使用python一步一步搭建微信公衆平臺（一）
- 5. 【微信公衆號】第一步：申請公衆號及測試號
- 6. java微信公衆號開發步驟
- 7. 微信公衆號建立步驟
- 8. 統一微信公衆號、小程序、APP的用戶信息
- 9. 微信公衆號使用：給微信公衆號設置頭像和微信號的步驟
- 10. 教你如何用node.js開發微信公衆號（一）
- 更多相關文章...
- • 一對一關聯查詢 - MyBatis教程
- • 您已經學習了 ADO， 下一步呢？ - ADO 教程
- • Java Agent入門實戰（一）-Instrumentation介紹與使用
- • YAML 入門教程
-
每一个你不满意的现在，都有一个你没有努力的曾经。