前言
一直想學習開發(fā)一款小程序,無奈拖延至今,恰逢王者榮耀周年慶,然后本人對王者英雄的人物、配音比較感興趣,就有開發(fā)一款王者榮耀故事站的小程序的念頭。想要了解故事背景就直接打開小程序就好了。
ps: 因為是業(yè)余時間做的,所以 pc 端的爬蟲數(shù)據(jù)展示方面就有點粗糙。
技術(shù)棧
小程序 + nuxt + koa2 + vue2.0 + vuex + nginx + pm2
小程序效果圖
線上體驗
pc 爬蟲效果圖
線上地址
https://story.naice.me/
(如果覺得很慢的同學不是你們的網(wǎng)速的問題,是我的服務器配置太渣了2333)
首先說下爬蟲數(shù)據(jù)
數(shù)據(jù)爬蟲都是從王者榮耀故事站官網(wǎng)來爬取的,然后直接用 next/koa 作為后臺,用cheerio
模塊和request-promise
模塊基本就可以爬到我們想要的數(shù)據(jù)了,有時候爬取出來的數(shù)據(jù)回事亂碼(非 utf-8的)我們就借助iconv
模塊去轉(zhuǎn)成我們想要的中文字符。這些模塊說明文檔在相應的 gihub中都說的很詳細。就不一一介紹。
下面舉例一下爬蟲英雄列表首頁的過程,都注釋在代碼里面
// 引入相應的模塊
import rp from 'request-promise'
import cheerio from 'cheerio'
import { writeFileSync } from 'fs'
const Iconv = require('iconv').Iconv
const iconv = new Iconv('GBK', 'UTF-8')
// request 國外網(wǎng)站的時候使用本地的 VPN
// import Agent from 'socks5-http-client/lib/Agent'
// 爬取英雄列表
const getHeroStory = async() => {
// request-promise的配置
const options = {
uri: 'https://pvp.qq.com/act/a20160510story/herostory.htm',
// agentClass: Agent,
// agentOptions: {
// socksHost: 'localhost',
// socksPort: 1080 // 本地 VPN 的端口,這里用的 shadowsocks
// },
transform: body => cheerio.load(body) // 轉(zhuǎn)成相應的爬蟲
}
// 爬取導航復制給cheerio的$對象
const $ = await rp(options)
let navArr = []
let heroList = []
$('#campNav li').each(function () {
// 分析節(jié)點拿到數(shù)據(jù)
const type = $(this).attr('data-camptype')
const text = $(this).find('a').text()
// push 到navArr數(shù)組中
navArr.push({ type, text })
})
// 爬取英雄列表
const hreodata = await rp({
uri: 'https://pvp.qq.com/webplat/info/news_version3/15592/18024/23901/24397/24398/m17330/list_1.shtml'
})
// 數(shù)據(jù)處理
let str = hreodata.replace('createHeroList(', '')
str = str.substr(0, str.length - 1)
let r = JSON.parse(str)
heroList = r.data.filter(item => item)
let result = {
nav: navArr,
heroList
}
// 寫入文件
writeFileSync('./server/crawerdb/heroList.json', JSON.stringify(result, null, 2), 'utf-8')
return result
}
// 跟去英雄 id,和 url 爬取英雄的詳細介紹
const getHeroDatail = async(url, _id) => {
// 配置
const option = {
encoding: null,
url
}
// 爬取英雄詳情
const $ = await rp(option).then(body => {
// 字符亂碼處理
var result = iconv.convert(new Buffer(body, 'binary')).toString()
return cheerio.load(result)
})
// 這里拿到$之后就像 jq那樣子,根據(jù)文檔就可以進行爬蟲的數(shù)據(jù)處理了
// 下面都是數(shù)據(jù)處理
let heroName = ''
let heroDetail = []
let ht = ''
let hc = ''
if ($('#heroStory').length) {
heroName = $('.hero_name pf').text()
$('#heroStory p').each(function () {
let text = $(this).text().trim()
heroDetail.push({
type: 'text',
text: text
})
})
} else if ($('.textboxs').length) {
$('.textboxs p').each(function () {
if ($(this).find('img').length) {
let src = $(this).find('img').attr('src')
heroDetail.push({
type: 'img',
text: 'https:' + src
})
} else {
let text = $(this).text().trim()
heroDetail.push({
type: 'text',
text: text
})
}
})
}
let hStr = ($('#history_content').text()).replace(/(^\s+)|(\s+$)/g, '');
if (hStr.length > 0) {
ht = $('.history_story h3').text()
hc = $('#history_content').text()
}
let result = {
heroName,
heroDetail,
historyTitle: ht,
historyContent: hc
}
// 寫入文件
writeFileSync('./server/crawerdb/herodetail' + _id + '.json', JSON.stringify(result, null, 2), 'utf-8')
return result
}
export default {
getHeroStory,
getHeroDatail
}
然后在 koa里面配置好路由就可以一步步爬取數(shù)據(jù)了
nuxt
Nuxt.js 是一個基于 Vue.js 的通用應用框架。通過對客戶端/服務端基礎架構(gòu)的抽象組織,Nuxt.js 主要關注的是應用的 UI渲染。我們的目標是創(chuàng)建一個靈活的應用框架,你可以基于它初始化新項目的基礎結(jié)構(gòu)代碼,或者在已有 Node.js 項目中使用 Nuxt.js。Nuxt.js 預設了利用Vue.js開發(fā)服務端渲染的應用所需要的各種配置。
根據(jù)文檔 page 下面的結(jié)構(gòu)就是對應的 vue 的路由結(jié)構(gòu),然后配置好nuxt.config.js
你所需要模塊、插件、webpack 配置等等都有很好的中文文檔說明。會 vue的同學,去看一下官網(wǎng)就可以大概有個很好的了解了。
下面是整個項目的目錄結(jié)構(gòu)
.nuxt/
build/ ---打包發(fā)布
components/ ---組件
layout/ ---布局
pages/ ---對應的路由
--| about.vue/
--| music.vue/
--| word.vue/
--| skin/
--| index.vue
--| ....
server/ --對應的koa 后臺
static/ ---靜態(tài)資源
store/ --vuex
小程序
這是我第一個小程序。所以一開始看文檔,寫起數(shù)據(jù)綁定的時候,會有種跟 vue 的異曲同工的感覺.
下面是官荒的小例子
demo.wxml
<view> Hello {{name}}! </view>
<view wx:for="{{array}}">
{{index}}: {{item.message}}
</view>
demo.js
Page({
data: {
name: '小程序',
array: [{
message: 'foo',
}, {
message: 'bar'
}]
}
})
是不是太熟悉了????當然里面實現(xiàn)的技術(shù)還是想差別很大的,想去詳細的了解,我覺得《一起脫去小程序的外套 - 微信小程序架構(gòu)解析》這篇文章,很是不錯,我初學的時候,是先體驗一番小程序的demo,然后直接動手(光看不動瞎扯淡),再去深入了解原理、pages 的生命周期,邏輯處理、框架、組件、api 等等,理解了這些之后,后面就很容易啦??!
附一張小程序的運行生命周期圖(來源于遇見大神的文章),用來理解小程序的整個運行過程
github
小程序:https://github.com/naihe138/h...
小程序后臺爬蟲: https://github.com/naihe138/h...
博客文章:https://blog.naice.me/
如果大家覺得有用的話,求一個閃晶晶的 start ,謝謝各位大佬