一步一步教你用 Vue.js + Vuex 制作专门收藏微信公众号的 app
<p><img src="https://simg.open-open.com/show/f2a873daaf9428f4ade2798d62061674.gif"></p> <p><img src="https://simg.open-open.com/show/8ddadd10d6a458a5d145572d7634ff6d.gif"></p> <h2>下载&运行</h2> <pre> <code class="language-javascript">gitclone git@github.com:jrainlau/wechat-subscriptor.git cdwechat-subscriptor && npminstall npmrundev // run in dev mode cdbackend-server && nodecrawler.js // turn on the crawler server open `localhost:8080` in yourbroswerand enjoyit. </code></pre> <h2>项目介绍</h2> <p>我在微信上关注了不少的公众号,经常浏览里面的内容。但是往往在我阅读文章的时候,总是被各种微信消息打断,不得不切出去,回复消息,然后一路点回公众号,重新打开文章,周而复始,不胜其烦。后来想起,微信跟搜狗有合作,可以通过搜狗直接搜索公众号,那么为什么不利用这个资源做一个专门收藏公众号的应用呢?这个应用可以方便地搜索公众号,然后把它收藏起来,想看的时候直接打开就能看。好吧,其实也不难,那就开始从架构开始构思。</p> <h2>整体架构</h2> <p>国际惯例,先看架构图:</p> <p><img src="https://simg.open-open.com/show/2bd0fcfa5272b6457c085412c77c6d8b.jpg"></p> <p>然后是技术选型:</p> <ol> <li>利用搜狗的API作为查询公众号的接口</li> <li>由于存在跨域问题,遂通过 node 爬虫使用接口</li> <li>使用 vue 进行开发, vuex 作状态管理</li> <li>使用 mui 作为UI框架,方便日后打包成手机app</li> <li>使用 vue-cli 初始化项目并通过 webpack 进行构建</li> </ol> <p>首先分析红圈中的 vuex 部分。它是整个APP的核心,也是所有数据的处理中心。</p> <p>客户端所有组件都是在 action 中完成对流入数据的处理(如异步请求等),然后通过 action 触发 mutation 修改 state ,后由 state 经过 getter 分发给各组件,满足“单项数据流”的特点,同时也符合官方推荐的做法:</p> <p><img src="https://simg.open-open.com/show/1eb567d0e0d34443f73fd2d8def3b737.png"></p> <p>理解完最重要的 vuex 以后,其他部分也就顺利成章了。箭头表示数据的流动, LocalStorage 负责储存收藏夹的内容,方便下一次打开应用的时候内容不会丢失,node服务器负责根据关键字爬取搜狗API提供的数据。</p> <p>是不是很简单?下面让我们一起来开始coding吧!</p> <h2>初始化项目</h2> <p>npm install vue-cli -g 安装最新版的 vue-cli ,然后 vue init webpack wechat-subscriptor ,按提示经过一步步设置并安装完依赖包以后,进入项目的目录并稍作改动,最终目录结构如下:</p> <p><img src="https://simg.open-open.com/show/4ab2360436b6cb459bb3321b5330e575.jpg"></p> <p>具体的内容请直接浏览 <a href="/misc/goto?guid=4959674919148929829" rel="nofollow,noindex">项目</a></p> <h2>服务器&爬虫</h2> <p>进入 /backend-server 文件夹并新建名为 crawler-server.js 的文件,代码如下:</p> <pre> <code class="language-javascript">/*** 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': '*'}) letkeyWord = encodeURI(url.parse(req.url, true).query.query) // recieve keyword from the client side and use it to make requests if (keyWord) { letresultArr = [] 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 letresultObj = { 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!') </code></pre> <p>一个简单的爬虫,通过客户端提供的关键词向搜狗发送请求,后利用 cheerio 分析获取关键的信息。这里贴上搜狗公众号搜索的地址,你可以亲自试一试: <a href="/misc/goto?guid=4959674919245041833" rel="nofollow,noindex">http://weixin.sogou.com/</a></p> <p>当开启服务器以后,只要带上参数请求 localhost:8090 即可获取内容。</p> <h2>使用 Vuex 作状态管理</h2> <p>先贴上 vuex 官方文档: <a href="/misc/goto?guid=4959674919336639637" rel="nofollow,noindex">http://vuex.vuejs.org/en/index.html</a> ,相信我,不要看中文版的,不然你会踩坑,英文版足够了。</p> <p>从前文的架构图可以知道,所有的数据流通都是通过 vuex 进行,通过上面的文档了解了有关 vuex 的用法以后,我们进入 /vuex 文件夹来构建核心的 store.js 代码:</p> <pre> <code class="language-javascript">/*** store.js ***/ importVuefrom 'vue' importVuexfrom '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) } } exportdefault new Vuex.Store({ state, mutations }) </code></pre> <p>下面我们将对当中的代码重点分析。</p> <p>首先我们定义了一个 state 对象,里面的两个属性对应着收藏夹内容,搜索结果。换句话说,整个APP的数据就是存放在 state 对象里,随取随用。</p> <p>接着,我们再定义一个 mutations 对象。我们可以把 mutations 理解为“用于改变 state 状态的一系列方法”。在 vuex 的概念里, state 仅能通过 mutation 修改,这样的好处是能够更直观清晰地集中管理应用的状态,而不是把数据扔得到处都是。</p> <p>通过代码不难看出,三个 mutation 的作用分别是:</p> <ul> <li>SET_RESULT :把搜索结果存入 state</li> <li>COLLECT_IT :添加到收藏夹操作(包括 localstorage )</li> <li>DELETE_IT :从收藏夹移除操作(包括 localstorage )</li> </ul> <h2>组件数据处理</h2> <p>我们的APP一共有两个组件, SearchBar.vue 和 SearchResult.vue ,分别对应着搜索部分组件和结果部分组件。其中搜索部分组件包含着收藏夹部分,所以也可以理解为有三个部分。</p> <p>搜索部分组件 SearchBar.vue</p> <pre> <code class="language-javascript">/*** 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)) }) } } } </code></pre> <p>代码有点长,这里仅重点介绍 vuex 部分,完整代码可以参考 <a href="/misc/goto?guid=4959674919148929829" rel="nofollow,noindex">项目</a> 。</p> <ul> <li>getters 获取 store 当中的数据作予组件使用</li> <li>actions 的两个方法负责把数据分发到 store 中供 mutation 使用</li> </ul> <p>看官方的例子,在组件中向 action 传参似乎很复杂,其实完全可以通过 methods 来处理参数,在触发 actions 的同时把参数传进去。</p> <p>结果部分组件 SearchResult.vue</p> <pre> <code class="language-javascript">/*** 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(letitemofcollectArr) { if(item == name) return false } dispatch('COLLECT_IT', name) } } } </code></pre> <p>结果部分主要在于展示,需要触发 action 的地方仅仅是添加到收藏夹这一操作。需要注意的地方是应当避免重复添加,所以使用了 for...of 循环,当数组中已有当前元素的时候就不再添加了。</p> <h2>尾声</h2> <p>关键的逻辑部分代码分析完毕,这个APP也就这么一回事儿,UI部分就不细说了,看看项目源码或者你自己DIY就可以。至于打包成APP,首先你要下载HBuilder,然后通过它直接打包就可以了,配套使用 mui 能够体验更好的效果,不知道为什么那么多人黑它。</p> <p>搜狗提供的API很强大,但是提醒一下,千万不要操作太过频繁,不然你的IP会被它封掉,我的已经被封了……</p> <p>Weex 已经出来了,通过它可以构建Native应用,想想也是激动啊,待心血来潮就把本文的项目做成 Weex 版本的玩玩……</p> <p>最后的最后,感谢你的阅读,如果觉得我的文章不错,欢迎关注我的专栏,下次见!</p> <p> </p> <p><a href="/misc/goto?guid=4959675347701921552">阅读原文</a></p> <p> </p>
本文由用户 wpsowerfnc 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
转载本站原创文章,请注明出处,并保留原始链接、图片水印。
本站是一个以用户分享为主的开源技术平台,欢迎各类分享!