本文一步步教你如何用Vue.js Vuex做一个专门收集微信微信官方账号的app

项目地址：https://github.com/jrainlau/wechat-subscriptor

下载并运行

git clone[email protected]: jrainlau/微信-下标. gitcd微信-下标npm install

npm运行dev //在dev modecd中运行后端服务器节点crawler.js //打开crawler服务器

在你的浏览器中打开“localhost:8080 ”,享受它。

项目介绍：我在微信上关注了很多微信官方账号，经常浏览里面的内容。但是看文章的时候总是被各种微信消息打断，只好把它们剪下来，回复消息，然后一路点击回到微信官方账号，重新打开文章，继续走。后来想起微信跟搜狗合作，可以直接通过搜狗搜索微信官方账号。那么为什么不利用这个资源做一个专门收集微信官方账号的应用呢？这个应用可以轻松搜索微信官方账号，然后收藏，想看的时候直接打开。嗯，这并不难，所以从架构开始思考。

整体架构

国际惯例，先看架构图：

然后是技术选择：

1.使用搜狗的API作为查询微信官方账号的界面。

2.由于跨域问题，接口由节点爬虫使用。

3.使用vue进行开发，使用vuex进行状态管理。

4.使用mui作为ui框架，方便以后打包到手机app中。

使用vue-cli初始化项目并通过webpack构建它。

首先，分析了红圈中的vuex部分。它是整个APP的核心，是所有数据的处理中心。

客户端的所有组件处理动作中的传入数据(如异步请求)，然后通过动作触发突变修改状态，再通过getter将状态分配给各个组件，符合“单数据流”的特点，也符合官方推荐的做法：

了解了最重要的vuex之后，其他部分就会顺利产生。箭头表示数据流，LocalStorage负责存储喜欢的内容，这样下次打开应用时内容就不会丢失，节点服务器负责根据关键字抓取搜狗API提供的数据。

不是很简单吗？让我们一起开始编码吧！

初始化项目

Npm install vue-cli -g安装最新版本的vue-cli，然后vue init web pack微信-下标，根据提示一步一步设置安装依赖包后，进入项目目录，做一些修改。最终的目录结构如下：

具体内容请直接浏览项目

服务器爬网程序

输入/后端服务器文件夹，并创建一个名为crawler-server.js的新文件。

/*** crawler-server.js ***/'使用严格的const http=require(' http ')const URL=require(' URL ')const util=require(' util ')const超级代理=require('超级代理')const cherio=require(' cherio ')const on request=(req，res)={ //CORS选项res.writeHead(200，{ ' Content-Type ' : ' text/plain '，' Access-Control-Allow-Origin ' 3: ' * })let Type=1 query=' KeY ' ie=utf8 _ sug _=n _ sug _ Type _=').end((err，response)={ if(err)控制台。让$=cheerio。负载(响应。文本)$(。mt7 .wx-Rb ').每个((索引，项)={ //定义一个对象并更新它//然后推送到结果数组让resultObj={ title: ' '，wxNum: ' '，link: ' '，pic: ' '，} resultObj.title=$(项)。查找(' h3 ').文本()。结果对象。wxnum=$(项目).查找('标签')。text(). resultobj . link=$(item).attr(' href ')resultobj。pic=$(物品).查找(' img ').attr(' src ')结果Arr。push(resultObj)})RES . write(JSON。stringify(resultArr))RES . end()})} } http。创建服务器(请求时).监听(process.env.PORT || 8090)控制台。日志('服务器启动！)一个简单的爬虫，通过客户端提供的关键词向搜狗发送请求，后利用再见分析获取关键的信息。这里贴上搜狗公众号搜索的地址，你可以亲自试一试：http://weixin.sogou.com/

当开启服务器以后，只要带上参数请求localhost:8090即可获取内容。

使用Vuex作状态管理先贴上vuex官方文档：http://vuex . vuejs . org/en/index . html

相信我，不要看中文版的，不然你会踩坑，英文版足够了。

从前文的架构图可以知道，所有的数据流通都是通过vuex进行，通过上面的文档了解了有关vuex的用法以后，我们进入/vuex文件夹来构建核心的store.js代码：

/* * *商店。js * * */从' Vue '导入Vue从' Vue '导入Vuex。使用(Vuex)const state={ collectItems 3360[]，搜索结果： { } }本地存储。getitem(' collectItems ')？国家。collectItems=本地存储。getitem(' collectItems ').split('，'):脚手架突变={ SET_RESULT(状态，结果){ state。search RESULT=RESULT }，COLLECT_IT(状态，名称){ state。集体项目。推送(命名)本地存储。setitem(' collectItems '，state.collectItems) }，DELETE _ COLLECTION(state。集体项目。拼接(状态。集体项目。indexof(name)，1)本地存储。setitem(' collectItems '，状态。collectItems)} }导出默认新Vuex .存储({状态，突变})下面我们将对当中的代码重点分析。

首先我们定义了一个状态对象，里面的两个属性对应着收藏夹内容，搜索结果。换句话说，整个应用的数据就是存放在状态对象里，随取随用。

接着，我们再定义一个突变对象。我们可以把突变理解为"用于改变状态状态的一系列方法"。在vuex的概念里，州仅能通过变化修改，这样的好处是能够更直观清晰地集中管理应用的状态，而不是把数据扔得到处都是。

通过代码不难看出，三个变化的作用分别是：

设置_结果：把搜索结果存入状态

收集信息技术：添加到收藏夹操作（包括localstorage)

删除_信息技术：从收藏夹移除操作（包括localstorage)

组件数据处理

我们的应用一共有两个组件，SearchBar.vue和SearchResult.vue，分别对应着搜索部分组件和结果部分组件。其中搜索部分组件包含着收藏夹部分，所以也可以理解为有三个部分。

搜索部分组件SearchBar.vue

/* * * search bar . vue * * */vuex : { getter s : { collectItem(state){ return state . collectitems } }，actions : { deletecollection :({ dispatch }，name)={ dispatch(' DELETE _ COLLECTION '，name) }，searchFun: ({ dispatch }，Keyword)={$。get ('http://localhost :8090 '，{query:关键字}，(数据)={dispatch ('set _ result '，JSON。parse (data))}}}代码有点长，所以这里只介绍vuex部分和完整的代码

Getters获取存储中的数据供组件使用。

两种操作方法负责将数据分发到存储区进行变异。

看一下官方的例子，在组件中传递参数到动作似乎很复杂。事实上，参数可以通过方法来处理，参数可以在动作被触发的同时传入。

结果部分组件SearchResult.vue

/* * * search result . vue * * */vuex : { getter s : { wordValue(state){ return state . keyword }，collectItems(state){ return state . collectItems }，search result(state){ return state . search result } }，actions 3360 { collectit 3360({ dispatch }，name，collectar)={ for(let item of collectiar){ if(item==name)return false } dispatch(' collect _ it '，name)}}结果部分主要在于应该注意的是，应该避免重复添加，因此对于.当数组中已经存在当前元素时，将不会添加它。

乐章结尾部

关键逻辑部分的代码分析完成后，这个APP也只是一样的东西，所以UI部分我就不细说了，直接看项目源代码或者自己动手DIY。至于打包成APP，应该先下载HBuilder，然后直接通过它打包。使用mui可以体验到更好的效果。不知道为什么这么多人黑。

搜狗提供的API很强大，但是请不要操作太频繁，不然你的IP会被它屏蔽，我的也被屏蔽了.

Weex已经问世，通过它可以构建Native应用程序，想想也很刺激。心血来潮之后，本文中的项目将被制作成Weex版本来播放.

本文已整理成《Vue.js前端组件学习教程》、《JavaScript微信开发技巧汇总》。欢迎你学习阅读。

现在推荐一个关注度高的微信小程序教程：《微信小程序开发教程》边肖为大家精心安排的，希望大家喜欢。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。