“图书爬虫”小程序云开发实战

产品功能

• 微信?程序扫一扫，获取图书的isbn码
• 通过isbn码爬取豆瓣图书接口，获取图书信息
• 图书信息存储入数据库，形成图书列表

技术点

• taro框架实现一套代码构建多端小程序
• taro-ui 作为UI框架
• 基于serverless的云函数开发，爬取网站图书信息
• 云数据库存储图书信息

项目创建及调试

使用饬令创建模版项目，这里选用的是云开发的模版

taro init myBook

cd 到项目文件夹，安装依靠

npm install

cd 到项目文件夹下的client文件夹，再编译成微信小程序

npm run dev:weapp

swan:百度小程序 alipay:付出宝小程序 tt:字节跳动小程序 qq:qq小程序 jd:京东小程序

开发工具调试

打开微信小程序开发工具，导入当前项目myBook,细致导入的项目根目录要有project.config.json； 导入后在vscode编辑器打开项目编辑时，可以在小程序开发工具上查看实时的结果并进行调试；

营业功能实现
扫码功能

项目创建完成后手机app，我们可以参考index的模版再创建一个页面，语法上与react开发是一样的，这里我们看一下扫码函数的实现：

@withWeapp({
...
  scanCode: function () {
    Taro.scanCode({// 微信扫码API
      onlyFromCamera: true,
      scanType: [],
      success: result => {
        Taro.showLoading({
          title: '加载中...'
        })
        // result是扫码获取的效果其中含有isbn码
        Taro.cloud.callFunction({// 调取微信云函数耐高温标签，必要在微信开发者工具的云开发中添加并部署云函数
          name: 'book',
          data: {
            isbn: result.result
          },
          success: res => {
            console.log('success', res.result)
            res.result.create_time = new Date().getTime()
            this.setData({
              detail: res.result
            })
            // 得到爬取效果后存入到数据库四川成都人事考试网，此处也必要在云开发下的云数据库创建collection
            db.collection('book').add({
              data: res.result
            })
            Taro.hideLoading()
          },
          fail: err => {
            console.log(err)
          }
        })
      },
      fail: res => { },
      complete: res => { }
    })
  },
})
复制代码

爬虫功能（云函数）

上面提到的通过isbn码，爬取豆瓣图书信息的云函数“book”dc dc电源模块，如下：

// cloud>book>index.js
const { default: axios } = require('axios');
const doubanbook = require('doubanbook');
const cheerio = require('cheerio');
// 获取豆瓣图书的信息
async function getDoubanBook(isbn) {
  const url = "https://search.douban3564/book/subject_search?search_text="+isbn;
  const res = await axios.get(url);
  const reg = /window\.__DATA__ = \"(.*)\"/;
  if (reg.test(res.data)) {
    const searchData = doubanbook(RegExp.$1)[0];//解密
    //再通过详情URL获取图书简介
    const introduce = await axios.get(searchData.url);
    const $ = cheerio.load(introduce.data);
    const summary = $("#link-report 5841ro").text();
    console.log(summary);
    return {...searchData,summary}
  }else{
    return {}
  }
}
// 云函数入口文件
const cloud = require('wx-server-sdk');
cloud.init()
// 云函数入口函数
exports.main = async (event, context) => {
  // event 接收传递的参数
  const {isbn} = event;
  console.log(isbn);
  const info = await getDoubanBook(isbn);
  return {
    cover_url:info.cover_url,
    abstract:info.abstract,
    title:info.title,
    rating:info.rating,
    summary:info.summary
  }
}
复制代码

数据库操作

前面提到的入库功能代码如下：

// 得到爬取效果后存入到数据库，此处也必要在云开发下的云数据库创建collection
db.collection('book').add({
   data: res.result
})
复制代码

细致必要在云开发下的数据库界面创建一个对应的荟萃才能正常使用，存入数据库成功时可以刷新看到效果；

列表查看与分页

此处涉及到数据库查询，核心代码如下：

@withWeapp({
  data: {
    books: [],
    pageSize: 5,
    page: 1
  },
  getList: function () {
    const { pageSize, page } = this.data;
    db.collection('book').skip((page - 1) * pageSize).limit(pageSize).get({
      success: res => {
        console.log(res)
        this.setData({
          books: [...this.data.books, ...res.data]
        })
      }
    })
  },
  /**
  * 生命周期函数--监听页面加载
  */
  onLoad: function (options) {
    this.getList();
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    this.setData({
      page: this.data.page + 1
    }, () => {
      this.getList();
    })
  }
})
复制代码

代码库地址

仓库地址如下，迎接交流学习： github3564/Amy-Tong126…

作者：变态的小水瓶
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。