本文一步一步教大家如何利用Vue.js + Vuex制作專門收藏微信公眾號(hào)的app

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

下載&運(yùn)行

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.

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

整體架構(gòu)

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

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

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

2.由于存在跨域問題，遂通過 node 爬蟲使用接口。

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

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

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

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

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

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

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

初始化項(xiàng)目

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

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

服務(wù)器&爬蟲

進(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)單的爬蟲，通過客戶端提供的關(guān)鍵詞向搜狗發(fā)送請(qǐng)求，后利用 cheerio 分析獲取關(guān)鍵的信息。這里貼上搜狗公眾號(hào)搜索的地址，你可以親自試一試： http://weixin.sogou.com/

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

使用 Vuex 作狀態(tài)管理
先貼上 vuex 官方文檔： http://vuex.vuejs.org/en/index.html

相信我，不要看中文版的，不然你會(huì)踩坑，英文版足夠了。

從前文的架構(gòu)圖可以知道，所有的數(shù)據(jù)流通都是通過 vuex 進(jìn)行，通過上面的文檔了解了有關(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 僅能通過 mutation 修改，這樣的好處是能夠更直觀清晰地集中管理應(yīng)用的狀態(tài)，而不是把數(shù)據(jù)扔得到處都是。

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

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

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

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

組件數(shù)據(jù)處理

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

搜索部分組件 SearchBar.vue

/*** 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í)完全可以通過 methods 來(lái)處理參數(shù)，在觸發(fā) actions 的同時(shí)把參數(shù)傳進(jìn)去。

結(jié)果部分組件 SearchResult.vue

/*** 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，然后通過它直接打包就可以了，配套使用 mui 能夠體驗(yàn)更好的效果，不知道為什么那么多人黑它。

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

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

本文已被整理到了《Vue.js前端組件學(xué)習(xí)教程》，《JavaScript微信開發(fā)技巧匯總》，歡迎大家學(xué)習(xí)閱讀。

為大家推薦現(xiàn)在關(guān)注度比較高的微信小程序教程一篇：《微信小程序開發(fā)教程》小編為大家精心整理的，希望喜歡。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論