前言1.

一直想学习开发一款小程序，无奈拖延至今，恰逢王者荣耀周年庆，然后本人对王者英雄的人物、配音比较感兴趣，就有开发一款王者荣耀故事站的小程序的念头。想要了解故事背景就直接打开小程序就好了。

2.

ps:因为是业余时间做的，所以pc端的爬虫数据展示方面就有点粗糙。

技术栈3.

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

小程序效果图线上体验pc爬虫效果图线上地址4.

storyweb.naice.me/(如果觉得很慢的同学不是你们的网速的问题，是我的服务器配置太渣了2333)

首先说下爬虫数据5.

数据爬虫都是从王者荣耀故事站官网来爬取的，然后直接用next/koa作为后台，用cheerio模块和request-promise模块基本就可以爬到我们想要的数据了，有时候爬取出来的数据回事乱码（非utf-8的）我们就借助iconv模块去转成我们想要的中文字符。这些模块说明文档在相应的gihub中都说的很详细。就不一一介绍。下面举例一下爬虫英雄列表首页的过程，都注释在代码里面

//引入相应的模块importrpfrom'request-promise'importcheeriofrom'cheerio'import{writeFileSync}from'fs'constIconvrequire('iconv').IconvconsticonvnewIconv('GBK','UTF-8')//request国外网站的时候使用本地的VPN//importAgentfrom'socks5-http-client/lib/Agent'//爬取英雄列表constgetHeroStoryasync(){//request-promise的配置constoptions{uri:'https://pvp.qq.com/act/a20160510story/herostory.htm',//agentClass:Agent,//agentOptions:{//socksHost:'localhost',//socksPort:1080//本地VPN的端口，这里用的shadowsocks//},transform:bodycheerio.load(body)//转成相应的爬虫}//爬取导航复制给cheerio的$对象const$awaitrp(options)letnavArr[]letheroList[]$('#campNavli').each(function(){//分析节点拿到数据consttype$(this).attr('data-camptype')consttext$(this).find('a').text()//push到navArr数组中navArr.push({type,text})})//爬取英雄列表consthreodataawaitrp({uri:'https://pvp.qq.com/webplat/info/news_version3/15592/18024/23901/24397/24398/m17330/list_1.shtml'})//数据处理letstrhreodata.replace('createHeroList(','')strstr.substr(0,str.length-1)letrJSON.parse(str)heroListr.data.filter(itemitem)letresult{nav:navArr,heroList}//写入文件writeFileSync('./server/crawerdb/heroList.json',JSON.stringify(result,null,2),'utf-8')returnresult}//跟去英雄id，和url爬取英雄的详细介绍constgetHeroDatailasync(url,_id){//配置constoption{encoding:null,url}//爬取英雄详情const$awaitrp(option).then(body{//字符乱码处理varresulticonv.convert(newBuffer(body,'binary')).toString()returncheerio.load(result)})//这里拿到$之后就像jq那样子，根据文档就可以进行爬虫的数据处理了//下面都是数据处理letheroName''letheroDetail[]letht''lethc''if($('#heroStory').length){heroName$('.hero_namepf').text()$('#heroStoryp').each(function(){lettext$(this).text().trim()heroDetail.push({type:'text',text:text})})}elseif($('.textboxs').length){$('.textboxsp').each(function(){if($(this).find('img').length){letsrc$(this).find('img').attr('src')heroDetail.push({type:'img',text:'https:'+src})}else{lettext$(this).text().trim()heroDetail.push({type:'text',text:text})}})}lethStr($('#history_content').text()).replace(/(^s+)|(s+$)/g,'');if(hStr.length0){ht$('.history_storyh3').text()hc$('#history_content').text()}letresult{heroName,heroDetail,historyTitle:ht,historyContent:hc}//写入文件writeFileSync('./server/crawerdb/herodetail'+_id+'.json',JSON.stringify(result,null,2),'utf-8')returnresult}exportdefault{getHeroStory,getHeroDatail}复制代码6.

然后在koa里面配置好路由就可以一步步爬取数据了

nuxt7.

Nuxt.js是一个基于Vue.js的通用应用框架。通过对客户端/服务端基础架构的抽象组织，Nuxt.js主要关注的是应用的UI渲染。我们的目标是创建一个灵活的应用框架，你可以基于它初始化新项目的基础结构代码，或者在已有Node.js项目中使用Nuxt.js。Nuxt.js预设了利用Vue.js开发服务端渲染的应用所需要的各种配置。

8.

根据文档page下面的结构就是对应的vue的路由结构，然后配置好nuxt.config.js你所需要模块、插件、webpack配置等等都有很好的中文文档说明。会vue的同学，去看一下官网就可以大概有个很好的了解了。下面是整个项目的目录结构

.nuxt/build/---打包发布components/---组件layout/---布局pages/---对应的路由--|about.vue/--|music.vue/--|word.vue/--|skin/--|index.vue--|....server/--对应的koa后台static/---静态资源store/--vuex复制代码小程序9.

这是我第一个小程序。所以一开始看文档，写起数据绑定的时候，会有种跟vue的异曲同工的感觉.下面是官荒的小例子

10.

demo.wxml

viewHello{{name}}!/viewviewwx:for"{{array}}"{{index}}:{{item.message}}/view复制代码11.

demo.js

Page({data:{name:'小程序',array:[{message:'foo',},{message:'bar'}]}})复制代码12.

是不是太熟悉了？？？？当然里面实现的技术还是想差别很大的，想去详细的了解，我觉得《一起脱去小程序的外套-微信小程序架构解析》这篇文章，很是不错，我初学的时候，是先体验一番小程序的demo,然后直接动手（光看不动瞎扯淡），再去深入了解原理、pages的生命周期，逻辑处理、框架、组件、api等等，理解了这些之后，后面就很容易啦！！

13.

附一张小程序的运行生命周期图(来源于遇见大神的文章)，用来理解小程序的整个运行过程

github地址14.

小程序：github.com/naihe138/he…

15.

小程序后台爬虫：github.com/naihe138/he…

16.

博客文章：blog.naice.me/

17.

如果大家觉得有用的话，求一个闪晶晶的start谢谢各位大佬