土鳖屋源码社区

 找回密码
 欢迎注册

QQ登录

只需一步,快速开始

03广告位出售中
广告出售中
广告位
搜狗联盟招募 收益最高
亿恩免费建网站 服务器特价
网维体微信营销平台
【多线高防】无视一切攻击!广告
百度站长平台 精确提升SEO
21广告位高权重链接招租
大型装修门户助您抢占商机天翼云主机 四川资源池开启
国内/香港主机/试用/更有免费
微信小程序微信营销项目诚招代理
小程序招商加盟零费用
广告位络茄网
查看: 43|回复: 0

[新手基础] 小程序网页内容抓取

[复制链接]
弗罗多 发表于 2018-10-27 10:33 | 显示全部楼层 |阅读模式
悦淘淘

最近在研究微信小程序的云开发功能。云开发最大的好处就是不需要前端搭建服务器,可以使用云端能力,从零开始写出来一个能上线的微信小程序,避免了买服务器的开销,对于个人来尝试练手微信小程序从前端到后台的开发,还是一个不错的选择。可以做到一天就能上线一个微信小程序。

云开发的优点

云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,即可实现快速上线和迭代,同时这一能力,同开发者已经使用的云服务相互兼容,并不互斥。

云开发目前提供三大基础能力支持:

  • 云函数:在云端运行的代码,微信私有协议天然鉴权,开发者只需编写自身业务逻辑代码
  • 数据库:一个既可在小程序前端操作,也能在云函数中读写的 JSON 数据库
  • 存储:在小程序前端直接上传/下载云端文件,在云开发控制台可视化管理

好了,介绍了这么多关于云开发的知识,感性的同学可以去研究研究。官方文档地址:https://developers.weixin.qq....

网页内容抓取

小程序是关于答题的,所以题目的来源是一个问题。上网搜,一个题目一个题目粘贴是一种方法,但是这样的重复工作,估计粘个10左右就想放弃了。所以想到了网页抓取。正好把之前学的node捡起来。

必备工具:
  • Cheerio。一个类似于服务器端JQuery的包。主要用它来分析和过滤抓取来的内容。
  • node的fs模块。这个是node自带的模块,用来读写文件的。此处用来将解析好的数据写入json文件。
  • Axios(非必须)。用来抓取网站的HTML网页。因为我要的数据是从网页上点击一个button后获取渲染的,所以直接访问这个网址是抓取不到的。无奈只能将想要的内容复制出来,存成字符串,去解析这个字符串。

接下来就可以用npm init来初始化一个node项目,一路回车后,即可生成一个package.json文件。
然后npm install --save axios cheerio安装cheerio和axios包。

关键的是用cheerio来实现一个类似jquery的功能。只需将抓取到的内容cheerio.load(quesitons)一下即可,之后就可以按照jquery的操作取dom,组装你想要的数据了。

最后用fs.writeFile将数据保存到json文件中,大功告成。

具体代码如下:

  1. let axios = require("axios");

  2. let cheerio = require("cheerio");

  3. let fs = require("fs");

  4. // 我的html结构大致如下,有很多条数据
  5. const questions = `<li id="q1" style="display: list-item;">
  6.       <div class="questionWrapper">
  7.         <div class="question">举头望明月,__________。</div>
  8.         <div class="answer" value="0">
  9.           回首白云低
  10.         </div>
  11.         <div class="answer" value="1">
  12.           低头思故乡
  13.         </div>
  14.         <div class="answer" value="0">
  15.           当春乃发生
  16.         </div>
  17.         <div class="answer" value="0">
  18.           红掌拨清波
  19.         </div>
  20.       </div>
  21.     </li>
  22.     <li id="q2">
  23.       <div class="questionWrapper">
  24.         <div class="question">__________,却话巴山夜雨时。</div>
  25.         <div class="answer" value="1">
  26.           何当共剪西窗烛
  27.         </div>
  28.         <div class="answer" value="0">
  29.           在天愿做比翼鸟
  30.         </div>
  31.         <div class="answer" value="0">
  32.           世味年来薄似纱
  33.         </div>
  34.         <div class="answer" value="0">
  35.           两岸青山相对出
  36.         </div>
  37.       </div>
  38.     </li>
  39.     ..........
  40.     `;
  41.    
  42. const $ = cheerio.load(quesitons);

  43. var arr = [];

  44. for (var i = 0; i < 300; i++) {
  45.    var obj = {};
  46.    obj.quesitons = $("#q" + i).find(".question").text();
  47.    obj.A = $($("#q" + i).find(".answer")[0]).text();
  48.    obj.B = $($("#q" + i).find(".answer")[1]).text();
  49.    obj.C = $($("#q" + i).find(".answer")[2]).text();
  50.    obj.D = $($("#q" + i).find(".answer")[3]).text();
  51.    obj.index = i + 1;
  52.    obj.answer =
  53.      $($("#q" + i).find(".answer")[0]).attr("value") == 1
  54.        ? "A"
  55.        : $($("#q" + i).find(".answer")[1]).attr("value") == 1
  56.          ? "B"
  57.          : $($("#q" + i).find(".answer")[2]).attr("value") == 1
  58.            ? "C"
  59.            : "D";
  60.    arr.push(obj);
  61. }

  62. fs.writeFile("poem.json", JSON.stringify(arr), err => {
  63.    if (err) throw err;
  64.    console.log("json文件已成功保存!");
  65. });
复制代码

保存到json后的文件格式如下,这样就可以通过json文件上传到云端服务器了。


注意事项

微信小程序云开发的数据库,上传json文件的数据格式需要注意一下,之前一直提示格式错误,后来才发现,JSON 数据不是数组,而是类似 JSON Lines,即各个记录对象之间使用 n 分隔,而非逗号。所以还需要对node写出来的json文件做一个小处理之后才能上传成功。


    您需要登录后才可以回帖 登录 | 欢迎注册

    本版积分规则

    www.giverman.com

    QQ|小黑屋|手机版|土鳖屋源码社区 ( 豫ICP备14000521号-2 )

    GMT+8, 2018-11-20 04:11

    Powered by Discuz! X3.4

    © 2001-2017 Comsenz Inc.

    豫公网安备 41088202000172号

    快速回复 返回顶部 返回列表