巧用Vue.js+Vuex制作專門收藏微信公眾號(hào)的app
本文一步一步教大家如何利用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í)有所幫助,也希望大家多多支持腳本之家。
- Vue微信公眾號(hào)網(wǎng)頁(yè)分享的示例代碼
- 使用vue完成微信公眾號(hào)網(wǎng)頁(yè)小記(推薦)
- 使用vue編寫h5公眾號(hào)跳轉(zhuǎn)小程序的實(shí)現(xiàn)代碼
- Vue開發(fā)Html5微信公眾號(hào)的步驟
- vue中使用微信公眾號(hào)js-sdk踩坑記錄
- vue項(xiàng)目使用微信公眾號(hào)支付總結(jié)及遇到的坑
- Vue.js 實(shí)現(xiàn)微信公眾號(hào)菜單編輯器功能(二)
- Vue.js 實(shí)現(xiàn)微信公眾號(hào)菜單編輯器功能(一)
- vue 做移動(dòng)端微信公眾號(hào)采坑經(jīng)驗(yàn)記錄
- 詳解Vue微信公眾號(hào)開發(fā)踩坑全記錄
- 如何使用vue開發(fā)公眾號(hào)網(wǎng)頁(yè)
相關(guān)文章
vue.js將時(shí)間戳轉(zhuǎn)化為日期格式的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue.js將時(shí)間戳轉(zhuǎn)化為日期格式的實(shí)現(xiàn)代碼,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-06-06vue2.0構(gòu)建單頁(yè)應(yīng)用最佳實(shí)戰(zhàn)
這篇文章主要為大家分享了vue2.0構(gòu)建單頁(yè)應(yīng)用最佳實(shí)戰(zhàn)案例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-04-04vue實(shí)現(xiàn)導(dǎo)航菜單和編輯文本的示例代碼
這篇文章主要介紹了vue實(shí)現(xiàn)導(dǎo)航菜單和編輯文本功能的方法,文中示例代碼非常詳細(xì),幫助大家更好的參考和學(xué)習(xí),感興趣的朋友可以了解下2020-07-07vue中使用$http.post請(qǐng)求傳參的錯(cuò)誤及解決
這篇文章主要介紹了vue中使用$http.post請(qǐng)求傳參的錯(cuò)誤及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04Vue應(yīng)用qs插件實(shí)現(xiàn)參數(shù)格式化示例詳解
這篇文章主要為大家介紹了Vue應(yīng)用qs插件實(shí)現(xiàn)參數(shù)格式化示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09vue實(shí)現(xiàn)移動(dòng)端項(xiàng)目多行文本溢出省略
這篇文章主要介紹了vue實(shí)現(xiàn)移動(dòng)端項(xiàng)目多行文本溢出省略功能,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2020-07-07