一步一步教你用 Vue.js + Vuex 制作专门收藏微信公众号的 app
一步一步教你用 Vue.js + Vuex 制作专门收藏微信公众号的 app
作者:jrainlau
链接:https://segmentfault.com/a/1190000005844155
项目地址:https://github.com/jrainlau/wechat-subscriptor
下载&运行
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.
项目介绍
我在微信上关注了不少的公众号,经常浏览里面的内容。但是往往在我阅读文章的时候,总是被各种微信消息打断,不得不切出去,回复消息,然后一路点回公众号,重新打开文章,周而复始,不胜其烦。后来想起,微信跟搜狗有合作,可以通过搜狗直接搜索公众号,那么为什么不利用这个资源做一个专门收藏公众号的应用呢?这个应用可以方便地搜索公众号,然后把它收藏起来,想看的时候直接打开就能看。好吧,其实也不难,那就开始从架构开始构思。
整体架构
国际惯例,先看架构图:
然后是技术选型:
利用搜狗的API作为查询公众号的接口
由于存在跨域问题,遂通过node爬虫使用接口
使用vue进行开发,vuex作状态管理
使用mui作为UI框架,方便日后打包成手机app
使用vue-cli初始化项目并通过webpack进行构建
首先分析红圈中的vuex部分。它是整个APP的核心,也是所有数据的处理中心。
客户端所有组件都是在action中完成对流入数据的处理(如异步请求等),然后通过action触发mutation修改state,后由state经过getter分发给各组件,满足“单项数据流”的特点,同时也符合官方推荐的做法:
理解完最重要的vuex以后,其他部分也就顺利成章了。箭头表示数据的流动,LocalStorage负责储存收藏夹的内容,方便下一次打开应用的时候内容不会丢失,node服务器负责根据关键字爬取搜狗API提供的数据。
是不是很简单?下面让我们一起来开始coding吧!
初始化项目
npm install vue-cli -g安装最新版的vue-cli,然后vue init webpack wechat-subscriptor,按提示经过一步步设置并安装完依赖包以后,进入项目的目录并稍作改动,最终目录结构如下:
具体的内容请直接浏览项目(https://github.com/jrainlau/wechat-subscriptor)
服务器&爬虫
进入/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!')
一个简单的爬虫,通过客户端提供的关键词向搜狗发送请求,后利用cheerio分析获取关键的信息。这里贴上搜狗公众号搜索的地址,你可以亲自试一试:http://weixin.sogou.com/
当开启服务器以后,只要带上参数请求localhost:8090即可获取内容。
使用Vuex作状态管理
先贴上vuex官方文档:http://vuex.vuejs.org/en/index.html,相信我,不要看中文版的,不然你会踩坑,英文版足够了。
从前文的架构图可以知道,所有的数据流通都是通过vuex进行,通过上面的文档了解了有关vuex的用法以后,我们进入/vuex文件夹来构建核心的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
})
下面我们将对当中的代码重点分析。
首先我们定义了一个state对象,里面的两个属性对应着收藏夹内容,搜索结果。换句话说,整个APP的数据就是存放在state对象里,随取随用。
接着,我们再定义一个mutations对象。我们可以把mutations理解为“用于改变state状态的一系列方法”。在vuex的概念里,state仅能通过mutation修改,这样的好处是能够更直观清晰地集中管理应用的状态,而不是把数据扔得到处都是。
通过代码不难看出,三个mutation的作用分别是:
SET_RESULT:把搜索结果存入state
COLLECT_IT:添加到收藏夹操作(包括localstorage)
DELETE_IT:从收藏夹移除操作(包括localstorage)
组件数据处理
我们的APP一共有两个组件,SearchBar.vue和SearchResult.vue,分别对应着搜索部分组件和结果部分组件。其中搜索部分组件包含着收藏夹部分,所以也可以理解为有三个部分。
搜索部分组件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))
})
}
}
}
代码有点长,这里仅重点介绍vuex部分,完整代码可以参考项目。
getters获取store当中的数据作予组件使用
actions的两个方法负责把数据分发到store中供mutation使用
看官方的例子,在组件中向action传参似乎很复杂,其实完全可以通过methods来处理参数,在触发actions的同时把参数传进去。
结果部分组件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)
}
}
}
结果部分主要在于展示,需要触发action的地方仅仅是添加到收藏夹这一操作。需要注意的地方是应当避免重复添加,所以使用了for...of循环,当数组中已有当前元素的时候就不再添加了。
尾声
关键的逻辑部分代码分析完毕,这个APP也就这么一回事儿,UI部分就不细说了,看看项目源码或者你自己DIY就可以。至于打包成APP,首先你要下载HBuilder,然后通过它直接打包就可以了,配套使用mui能够体验更好的效果,不知道为什么那么多人黑它。
搜狗提供的API很强大,但是提醒一下,千万不要操作太过频繁,不然你的IP会被它封掉,我的已经被封了……
Weex已经出来了,通过它可以构建Native应用,想想也是激动啊,待心血来潮就把本文的项目做成Weex版本的玩玩……
一步一步教你用 Vue.js + Vuex 制作专门收藏微信公众号的 app的更多相关文章
- 教你如何入手用python实现简单爬虫微信公众号并下载视频
主要功能 如何简单爬虫微信公众号 获取信息:标题.摘要.封面.文章地址 自动批量下载公众号内的视频 一.获取公众号信息:标题.摘要.封面.文章URL 操作步骤: 1.先自己申请一个公众号 2.登录自己 ...
- vue开发微信公众号--开发准备
由于工作项目的原因,需要使用vue开发微信公众号,但是这种微信公众号更多是将APP套了一个微信的壳子,除了前面的授权和微信有关系以外,其他的都和微信没多大的关系了,特此记录 开发流程 首先需要在电脑上 ...
- vue+node.js+webpack开发微信公众号功能填坑——v -for循环
页面整体框架实现,实现小功能,循环出数据,整体代码是上一篇 vue+node.js+webpack开发微信公众号功能填坑--组件按需引入 修改部门代码 app.vue <yd-flexbox&g ...
- vue+node.js+webpack开发微信公众号功能填坑——组件按需引入
初次开发微信公众号,整体框架是经理搭建,小喽喽只是实现部分功能,整体页面效果 整个页面使用两个组件:布局 FlexBox,搜索框 Search,demo文档 http://vue.ydui.org/d ...
- 使用vue开发微信公众号下SPA站点的填坑之旅
原文发表于本人博客,点击进入使用vue开发微信公众号下SPA站点的填坑之旅 本文为我创业过程中,开发项目的填坑之旅.作为一个技术宅男,我的项目是做一个微信公众号,前后端全部自己搞定,不浪费国家一分钱^ ...
- vue项目使用微信公众号支付总结
微信公众号支付 1. 使用jssdk调用微信支付,具体查看开发文档: 使用的vuex,在mutations中 wechatPay (state, data) { state.payObject = d ...
- Vue开发微信公众号默认背景为灰色
最近公司有一个项目,使用Vue开发微信公众号,开发过程遇到一个问题,即设计图的整体背景是白色的,但是公众号里默认的背景是浅灰色,如果某个页面高度没能占满一屏,就会露出浅灰色的默认背景,会显得很不协调. ...
- vue微信公众号、H5微信支付
1.H5微信支付 后台会返回一个URL,前端直接跳转就OK(需要你传给后台一个ip,必须保证在同一域名下) 使用window.location.href =res.data;进行页面跳转到支付界面(r ...
- vux+vuex+vue+Es6开发微信公众号的坑
初次开发微信公众号遇到很多问题,可能是基础不怎么牢靠,最近几天一直在看vue的东西,现在就来慢慢介绍vux和vue这个骚东西的用法: 细看文档一步步来, npm install vux --save ...
随机推荐
- C# 单例模式的五种写法
1.简单实现 C# 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 public sealed c ...
- docker 批量操作容器
docker stop $(sudo docker ps -q)
- Codeforces gym 102062 简要题解
文章目录 A. Bob and BoB B. Vibranium Gift C. The Blood Moon D. Palindrome and Chocolate E. Jumpy Robot F ...
- 2018.01.04 bzoj5291: [Bjoi2018]链上二次求和(线段树)
传送门 线段树基础题. 题意:给出一个序列,要求支持区间加,查询序列中所有满足区间长度在[L,R][L,R][L,R]之间的区间的权值之和(区间的权值即区间内所有数的和). 想题555分钟,写题202 ...
- tp5系统核心设计提供了一些可能会需要的钩子(位置)
钩子 描述 参数 app_init 应用初始化标签位 无 app_begin 应用开始标签位 当前调度信息 module_init 模块初始化标签位 当前请求对象实例 action_begin ...
- elasticsearch中文发行版 安装
参见: https://github.com/medcl/elasticsearch-rtf 具体步骤参见:ubuntu安装elasticsearch-rtf elasticsearch-head 安 ...
- 已经安装了客户端,但是cmd输入sqlcmd报错:Sqlcmd:Error:Connection failure.SQL Native Client is not installed correctly
以前安装了sqlserver2008,没有卸载掉,后面又安装了sqlserver2014,所以系统环境变量中既有2008的环境变量的配置,又有2014的环境变量的配置,所以在终端输入sqlcmd时报错 ...
- mfc标题栏 菜单 退出 关机 重启
隐藏标题栏 int CMainFrame::OnCreate(LPCREATESTRUCT lpCreateStruct) { if (CFrameWnd::OnCreate(lpCreateStru ...
- Jersey RESTful WebService框架学习(五)使用@BeanParam
第一步:定义一个实体类 注意:实体类的属性需要加上FormParam注解 public class User { @FormParam("name") private String ...
- UML(一)下载与安装
三步 Step1 下载绿色版: http://www.pc6.com/softview/SoftView_64080.html Step2 下载汉化包,(提供一个地址): http://downloa ...