• taro框架實現(xiàn)一套代碼構(gòu)建多端小程序
• taro-ui 作為UI框架
• 基于serverless的云函數(shù)開發(fā)，爬取網(wǎng)站圖書信息
• 云數(shù)據(jù)庫存儲圖書信息

使用命令創(chuàng)建模版項目，這里選用的是云開發(fā)的模版

taro init myBook

cd 到項目文件夾，安裝依賴

npm install

cd 到項目文件夾下的client文件夾，再編譯成微信小程序

npm run dev:weapp

swan:百度小程序 alipay:支付寶小程序 tt:字節(jié)跳動小程序 qq:qq小程序 jd:京東小程序

開發(fā)工具調(diào)試

打開微信小程序開發(fā)工具，導入當前項目myBook,注意導入的項目根目錄要有project.config.json； 導入后在vscode編輯器打開項目編輯時，可以在小程序開發(fā)工具上查看實時的效果并進行調(diào)試；

項目創(chuàng)建完成后，我們可以參考index的模版再創(chuàng)建一個頁面，語法上與react開發(fā)是一樣的，這里我們看一下掃碼函數(shù)的實現(xiàn)：

@withWeapp({
...
  scanCode: function () {
    Taro.scanCode({// 微信掃碼API
      onlyFromCamera: true,
      scanType: [],
      success: result => {
        Taro.showLoading({
          title: '加載中...'
        })
        // result是掃碼獲取的結(jié)果其中含有isbn碼
        Taro.cloud.callFunction({// 調(diào)取微信云函數(shù)，需要在微信開發(fā)者工具的云開發(fā)中添加并部署云函數(shù)
          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
            })
            // 得到爬取結(jié)果后存入到數(shù)據(jù)庫，此處也需要在云開發(fā)下的云數(shù)據(jù)庫創(chuàng)建collection
            db.collection('book').add({
              data: res.result
            })
            Taro.hideLoading()
          },
          fail: err => {
            console.log(err)
          }
        })
      },
      fail: res => { },
      complete: res => { }
    })
  },
})
復制代碼

上面提到的通過isbn碼，爬取豆瓣圖書信息的云函數(shù)“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 {}
  }
}
// 云函數(shù)入口文件
const cloud = require('wx-server-sdk');
cloud.init()
// 云函數(shù)入口函數(shù)
exports.main = async (event, context) => {
  // event 接收傳遞的參數(shù)
  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
  }
}
復制代碼

前面提到的入庫功能代碼如下：

// 得到爬取結(jié)果后存入到數(shù)據(jù)庫，此處也需要在云開發(fā)下的云數(shù)據(jù)庫創(chuàng)建collection
db.collection('book').add({
   data: res.result
})
復制代碼

注意需要在云開發(fā)下的數(shù)據(jù)庫界面創(chuàng)建一個對應的集合才能正常使用，存入數(shù)據(jù)庫成功時可以刷新看到結(jié)果；

此處涉及到數(shù)據(jù)庫查詢，核心代碼如下：

@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]
        })
      }
    })
  },
  /**
  * 生命周期函數(shù)--監(jiān)聽頁面加載
  */
  onLoad: function (options) {
    this.getList();
  },
  /**
   * 頁面上拉觸底事件的處理函數(shù)
   */
  onReachBottom: function () {
    this.setData({
      page: this.data.page + 1
    }, () => {
      this.getList();
    })
  }
})
復制代碼

倉庫地址如下，歡迎交流學習： github.com/Amy-Tong126…