• 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编辑器打开项目编辑时，可以在小程序开发工具上查看实时的效果并进行调试；

项目创建完成后，我们可以参考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 = http://www.wxapp-union.com/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
})
复制代码

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

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

@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();
    })
  }
})
复制代码

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