以“图书爬虫”小程序功能为例，开始需求分解和开发实战。

产品功能

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

技术点

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

准备工作

微信小程序申请： mp.weixin.qq.com/
微信小程序官方文档：developers.weixin.qq.com/miniprogram…
微信开发者工具下载：developers.weixin.qq.com/miniprogram…
Taro安装及使用：taro-docs.jd.com/taro/docs/G…
taro-ui安装，注意目前taro3.0和taroui2.x不兼容使用npm install taro-ui@3.0.0-alpha.3；

项目创建及调试

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

taro init myBook

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

npm install

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

npm run dev:weapp

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

开发工具调试

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

业务功能实现

扫码功能

项目创建完成后，我们可以参考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”，如下：

// 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.douban.com/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 .intro").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
})

注意需要在云开发下的数据库界面创建一个对应的集合才能正常使用，存入数据库成功时可以刷新看到结果； alt

列表查看与分页

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

@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();
    })
  }
})

成果展示

小程序体验码：

alt

代码库地址

仓库地址如下，欢迎交流学习： github.com/Amy-Tong126…

从0开始搭建，小程序云开发实战