一步一步教你用 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 入门教程
-
每一个你不满意的现在，都有一个你没有努力的曾经。