前言

一直想學(xué)習(xí)開(kāi)發(fā)一款小程序，無(wú)奈拖延至今，恰逢王者榮耀周年慶，然后本人對(duì)王者英雄的人物、配音比較感興趣，就有開(kāi)發(fā)一款王者榮耀故事站的小程序的念頭。想要了解故事背景就直接打開(kāi)小程序就好了。

ps: 因?yàn)槭菢I(yè)余時(shí)間做的，所以 pc 端的爬蟲(chóng)數(shù)據(jù)展示方面就有點(diǎn)粗糙。

技術(shù)棧

小程序 + nuxt + koa2 + vue2.0 + vuex + nginx + pm2

小程序效果圖

線上體驗(yàn)

pc 爬蟲(chóng)效果圖

線上地址

https://story.naice.me/
(如果覺(jué)得很慢的同學(xué)不是你們的網(wǎng)速的問(wèn)題，是我的服務(wù)器配置太渣了2333)

首先說(shuō)下爬蟲(chóng)數(shù)據(jù)

數(shù)據(jù)爬蟲(chóng)都是從王者榮耀故事站官網(wǎng)來(lái)爬取的，然后直接用 next/koa 作為后臺(tái)，用cheerio模塊和request-promise模塊基本就可以爬到我們想要的數(shù)據(jù)了，有時(shí)候爬取出來(lái)的數(shù)據(jù)回事亂碼（非 utf-8的）我們就借助iconv模塊去轉(zhuǎn)成我們想要的中文字符。這些模塊說(shuō)明文檔在相應(yīng)的 gihub中都說(shuō)的很詳細(xì)。就不一一介紹。
下面舉例一下爬蟲(chóng)英雄列表首頁(yè)的過(guò)程，都注釋在代碼里面

// 引入相應(yīng)的模塊
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 國(guó)外網(wǎng)站的時(shí)候使用本地的 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)成相應(yīng)的爬蟲(chóng)
  }
  // 爬取導(dǎo)航復(fù)制給cheerio的$對(duì)象
  const $ = await rp(options)
  let navArr = []
  let heroList = []
  $('#campNav li').each(function () {
    // 分析節(jié)點(diǎn)拿到數(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 爬取英雄的詳細(xì)介紹
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ù)文檔就可以進(jìn)行爬蟲(chóng)的數(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 是一個(gè)基于 Vue.js 的通用應(yīng)用框架。通過(guò)對(duì)客戶端/服務(wù)端基礎(chǔ)架構(gòu)的抽象組織，Nuxt.js 主要關(guān)注的是應(yīng)用的 UI渲染。我們的目標(biāo)是創(chuàng)建一個(gè)靈活的應(yīng)用框架，你可以基于它初始化新項(xiàng)目的基礎(chǔ)結(jié)構(gòu)代碼，或者在已有 Node.js 項(xiàng)目中使用 Nuxt.js。Nuxt.js 預(yù)設(shè)了利用Vue.js開(kāi)發(fā)服務(wù)端渲染的應(yīng)用所需要的各種配置。

根據(jù)文檔 page 下面的結(jié)構(gòu)就是對(duì)應(yīng)的 vue 的路由結(jié)構(gòu)，然后配置好nuxt.config.js你所需要模塊、插件、webpack 配置等等都有很好的中文文檔說(shuō)明。會(huì) vue的同學(xué)，去看一下官網(wǎng)就可以大概有個(gè)很好的了解了。
下面是整個(gè)項(xiàng)目的目錄結(jié)構(gòu)

.nuxt/
build/  ---打包發(fā)布
components/ ---組件
layout/   ---布局
pages/    ---對(duì)應(yīng)的路由
--| about.vue/
--| music.vue/
--| word.vue/
--| skin/
--| index.vue
--| ....
server/  --對(duì)應(yīng)的koa 后臺(tái)
static/  ---靜態(tài)資源
store/  --vuex

小程序

這是我第一個(gè)小程序。所以一開(kāi)始看文檔，寫起數(shù)據(jù)綁定的時(shí)候，會(huì)有種跟 vue 的異曲同工的感覺(jué).
下面是官荒的小例子

demo.wxml

<view> Hello {{name}}! </view>
<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

demo.js

Page({
  data: {
    name: '小程序',
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

是不是太熟悉了？？？？當(dāng)然里面實(shí)現(xiàn)的技術(shù)還是想差別很大的，想去詳細(xì)的了解，我覺(jué)得《一起脫去小程序的外套 - 微信小程序架構(gòu)解析》這篇文章，很是不錯(cuò)，我初學(xué)的時(shí)候，是先體驗(yàn)一番小程序的demo,然后直接動(dòng)手（光看不動(dòng)瞎扯淡），再去深入了解原理、pages 的生命周期，邏輯處理、框架、組件、api 等等，理解了這些之后，后面就很容易啦??！

附一張小程序的運(yùn)行生命周期圖(來(lái)源于遇見(jiàn)大神的文章)，用來(lái)理解小程序的整個(gè)運(yùn)行過(guò)程

github

小程序：https://github.com/naihe138/h...

小程序后臺(tái)爬蟲(chóng)： https://github.com/naihe138/h...

博客文章：https://blog.naice.me/

如果大家覺(jué)得有用的話，求一個(gè)閃晶晶的 start ，謝謝各位大佬