開發實戰分享|小程序掃碼獲取圖書信息（內附詳細教程）

做者：祈澈姑娘

小程序掃碼實現讀取isbn，獲取圖書的各類信息

接觸到雲函數已經有一段時間了，以前一直在看api，如今本身跟着網絡上的資料和視頻學習，受到豆瓣讀書系列的啓發，決定用雲函數作一個項目，獲取圖書信息並存入雲數據庫。

基本流程

1.用戶端小程序調用 wx.scanCode接口,獲取到ISBN碼。 2.使用ISBN碼調用雲函數，在請求雲函數的時候，雲函數會請求豆瓣的API，獲取豆瓣圖書信息。 3.圖書信息請求到以後，會將其中無用的信息返回給小程序中，小程序中再拿出獲取到的信息，建立圖書條目。 4.將對應的數據直接存儲到雲開大的數據庫裏面。

具體步驟

下面對該項目的步驟進行一些具體的講解以及部分關鍵代碼的呈現。

1、掃一掃獲取圖書ISBN碼
2、準備環境、安裝依賴
    1.安裝Node.js準備環境
    2.在cmd打開雲函數目錄中，安裝依賴
3、編寫雲函數代碼
    1.在雲函數中用獲取到的ISBN傳參
    2.編寫用戶端（小程序端代碼）
    3.編寫雲函數端代碼
4、調用豆瓣API獲取具體數據
5、將獲取到的API數據存入雲數據庫裏面
    1.初始化
    2.添加數據
6、雲數據庫讀取的數據顯示在小程序端列表裏
    1.獲取res.data
    2.設置界面相關數據
    3.顯示和佈局
    4.小程序wxml界面（主要demo）
7、【雲開發】首頁列表跳轉詳情頁
    1.新建一個詳情頁
    2.按鈕跳轉事件
    3.跳轉到具體詳情頁
    4.關於詳情頁的一些代碼

1、掃一掃獲取圖書ISBN碼

用戶端小程序調用 wx.scanCode接口,獲取到圖書ISBN碼（圖書條形碼），在辦公室找了一圈，找到了一本圖書ISBN碼，能夠自動忽略我這渣渣的像素。

關鍵代碼

// pages/scanCode/scanCode.js
Page({

  /**
   * 頁面的初始數據
   */
  data: {
   
  },

  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function (options) {

  },

  /**
   * 生命週期函數--監聽頁面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命週期函數--監聽頁面顯示
   */
  onShow: function () {

  },

  /**
   * 生命週期函數--監聽頁面隱藏
   */
  onHide: function () {

  },

  /**
   * 生命週期函數--監聽頁面卸載
   */
  onUnload: function () {

  },

  /**
   * 頁面相關事件處理函數--監聽用戶下拉動做
   */
  onPullDownRefresh: function () {

  },

  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function () {

  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () {

  },

scanCode: function (event) {
console.log(1)
  // 容許從相機和相冊掃碼
  wx.scanCode({
   onlyFromCamera:true,
   scanType:['barCode'],
   success:res=>{
     console.log(res.result)
   },
   fail:err=>{
     console.log(err);
   }
  })
  }

})
複製代碼

ok，獲取到信息：

2、準備環境、安裝依賴

1.安裝Node.js準備環境

安裝nodejs,準備好環境，這一步就不細說了，沒有安裝的能夠自行百度，不知道有沒有安裝的能夠輸入 node -v 查看一下。

2.在cmd打開雲函數目錄中，安裝依賴

輸入命令：

npm install --production
複製代碼

依賴安裝成功以後，文件裏面多會出現 package-lock.json這個文件：

3、編寫雲函數代碼

1.在雲函數中用獲取到的ISBN傳參

雲函數API：
developers.weixin.qq.com/miniprogram…

經過看文檔能夠學會，在雲函數裏，咱們能夠經過傳遞一份data來獲取這裏面的數據，而後再經過event來拿到對應的數據：

複製這個api裏面的方法：

打開實戰一里面寫的小程序端的掃碼的js界面，把這個方法放在 success裏面。 要調用的雲函數的名稱 name要改爲成實戰二教程裏面創建的雲函數bookinfo：

傳遞的參數是 isbn，結果是掃碼獲得的result：

2.編寫用戶端（小程序端代碼）

將 result的結果打印出來，ok，用戶端（小程序端）代碼寫好了：

用戶端（小程序端）代碼寫完了，就這些：

// pages/scanCode/scanCode.js
Page({

  /**
   * 頁面的初始數據
   */
  data: {

  },

scanCode: function(event) {
    console.log(1)
    // 容許從相機和相冊掃碼
    wx.scanCode({
      onlyFromCamera: true,
      scanType: ['barCode'],
      success: res => {
        console.log(res.result)

        //
        wx.cloud.callFunction({
          // 要調用的雲函數名稱
          name: 'bookinfo',
          // 傳遞給雲函數的參數
          data: {
            isbn: res.result
          },
          success: res => {
            console.log(res)
         
          },
          fail: err => {
            console.error(res)
          }
        })
      },
      fail: err => {
        console.log(err);
      }
    })
  }

})
複製代碼

3.編寫雲函數端代碼

打開 bookinfo裏面的 index.js,將 event結果打印出來,請求雲函數，將雲函數之中的 isbn返回回來：

// 雲函數入口文件
// const cloud = require('wx-server-sdk')
// cloud.init()

// 雲函數入口函數
//var rp = require('request-promise')
exports.main = async (event, context) => {
 console.logI(event);
return event.isbn 
  // var res = rp('https://api.douban.com/v2/book/isbn/' + event.isbn).then(html => {
  //   return html;
  // }).catch(err => {
  //   console.log(err)
  // })
  //return res
  // const wxContext = cloud.getWXContext()
  // return {
  //   event,
  //   openid: wxContext.OPENID,
  //   appid: wxContext.APPID,
  //   unionid: wxContext.UNIONID,
  // }
}
複製代碼

上傳而且部署雲函數：

測試一下，雲函數調用成功,返回的結果(控制檯打印)是isbn：

4、調用豆瓣API獲取具體數據

在網上找了一下，找到了一個能夠用的豆瓣API：
api.douban.com/v2/book/isb…

打開雲函數文件夾，index.js裏面編寫代碼，引用request promise:

var rp = require('request-promise')
複製代碼

自定義的isbn，使用一個+號來鏈接，在傳遞一個catch來處理錯誤狀況：

var res = rp(
 'https://api.douban.com/v2/book/isbn/'+event.isbn).then(html=>{
return html;}).catch(err=>{
console.log(err)})
複製代碼

returnresres就是對應的html,將html傳給用戶端：

上傳雲函數：

繼續測試一下，拿到這個條形碼的信息了（書本的信息）：

對於這些信息，進一步處理，拿到本身想要的信息。

打開小程序端scanCode.js：

//進一步的處理方法        

  var bookString=res.result;        

  console.log(JSON.parse(bookString))
複製代碼

看到了整本圖書上面的全部信息，修改這些信息，存入雲數據庫之中便可。

5、將獲取到的API數據存入雲數據庫裏面

1.初始化

使用數據庫的時候，首先要進行初始化：

雲開發數據庫文檔：
developers.weixin.qq.com/miniprogram…

打開雲開發控制檯建立一個集合books：

打開小程序端js,初始化數據庫：

//雲數據庫初始化         

 const db = wx.cloud.database({});         

 const book = db.collection('books');
複製代碼

2.添加數據

js代碼流程：

// pages/scanCode/scanCode.js

Page({
  data: {
  },
  scanCode: function (event) {
console.log(1)
// 容許從相機和相冊掃碼
wx.scanCode({
  onlyFromCamera: true,
  scanType: 'barCode',
  success: res => {
console.log(res.result)
wx.cloud.callFunction({
  // 要調用的雲函數名稱
  name: 'bookinfo',
  // 傳遞給雲函數的參數
  data: {
    isbn: res.result
  },
  success: res => {
    //  console.log(res)
    //進一步的處理
    var bookString = res.result;
    console.log(JSON.parse(bookString))
    //雲數據庫初始化
    const db = wx.cloud.database({});
    const book = db.collection('books')
    db.collection('books').add({
      // data 字段表示需新增的 JSON 數據
      data: JSON.parse(bookString)
    }).then(res => {
      console.log(res)
    }).catch(err => {
      console.log(err)
    })
  },
  fail: err => {
    console.error(res)
  }
})

  },
  fail: err => {
console.log(err);
  }
})
  }
})
複製代碼

6、雲數據庫讀取的數據顯示在小程序端列表裏

1.獲取res.data

參考的讀取api,請點擊：
developers.weixin.qq.com/miniprogram…

初始化實例和book方法：

//雲數據庫初始化    

  const db = wx.cloud.database({});    

  const book = db.collection('books')
複製代碼

複製API這段代碼獲取多個記錄的數據的方法，放在項目到onload方法之中：

打印在控制檯：

2.設置界面相關數據

拿到res.data以後，要賦值給page實例裏面的data，因此在data裏面設置一個默認的空數組：

建立一個變量來保存頁面page示例中的this,方便後續使用，也可使用箭頭函數來打印一下this,看是否是page示例：

const db = wx.cloud.database({});

const cont = db.collection('books');

Page({

  data: {

book\_list:[]

  },

  onLoad: function(options) {

   // 建立一個變量來保存頁面page示例中的this, 方便後續使用

var _this=this;

db.collection('books').get({

  success: res =>{

 console.log(res.data);

 console.log(this);

        } 

    })

  },

})
複製代碼

直接使用this來設置data：

3.顯示和佈局

使用組件庫引入，能夠省略本身寫不少代碼的樣式，簡單方便，固然也能夠本身寫：youzan.github.io/vant-weapp/…
由於數據不止一條，循環，因此要用到小程序框架的列表渲染：
developers.weixin.qq.com/miniprogram…

寫好以後 wxml以下：

<text>私家書櫃</text>

<view wx:for="{{book\\_list}}">

  <van-card num="2" price="2.00" desc="描述信息" title="商品標題" />

</view>
複製代碼

4.小程序wxml界面（主要demo）

wxml：

<view wx:for="{{book\\_list}}">

  <van-card num="2" 

  price="{{item.price}}" 

  desc="{{item.author}}" 

  title="{{item.title}}"  

  thumb="{{item.image }}" />

</view>
複製代碼

js：

const db = wx.cloud.database({});

const cont = db.collection('books');

Page({

  data: {

book_list:[]

  },

  onLoad: function(options) {

   // 建立一個變量來保存頁面page示例中的this, 方便後續使用

var _this=this;

db.collection('books').get({

  success: res =>{

console.log(res.data[0]);

this.setData({

  book_list:res.data

          })

        } 

     })

  },

})
複製代碼

ok，雲數據庫讀取的數據顯示在小程序端列表裏：

7、【雲開發】首頁列表跳轉詳情頁

1.新建一個詳情頁

打開app.json, "pages/details/details",，自動生成了一個詳情頁：

2.按鈕跳轉事件

打開首頁列表頁代碼，綁定詳情按鈕跳轉事件。

wxml:

<view wx:for="{{book\\_list}}">

  <van-card num="2" price="{{item.price}}" desc="{{item.author}}" title="{{item.title}}" thumb="{{item.image }}">

<view slot="footer">

  <van-button size="mini" bind:click="viewitem">詳情按鈕</van-button>

</view>

  </van-card>

</view>
複製代碼

繼續寫js裏面的綁定事件，在控制檯打印一下event，方便後續測試：

viewitem: function(event) {    

    console.log(event)  

}
複製代碼

3.跳轉到具體詳情頁

要在雲開發裏面寫一個特定的id，打開雲開發控制檯，數據庫，須要用到這個下劃線是_id的字段：

給這個字段設置一個值，data-id="{{item._id}}"：

點擊按鈕，能夠看到，點擊不一樣的列表，打印的是不一樣的id，經過不一樣的id就能夠看到不一樣的內容了：

4.關於詳情頁的一些代碼

初始化db的實例：

const db = wx.cloud.database({});
複製代碼

打開雲函數文檔裏面的讀取數據api：

developers.weixin.qq.com/miniprogram…

複製此段讀取數據記錄的代碼，放在onload裏面：

能夠看到，具體數據已經打印過來了：

這個時候尚未將數據傳遞到一個具體的頁面實例中：

因此，success開始改爲使用箭頭函數，進入頁面的時候，能夠看到appdata裏面的book：

具體展現：在wxml裏面寫上想要拿到的數據，ok，詳情頁面展現的數據：

效果以下：

這樣，咱們就完成了利用雲開發掃碼讀取ISBN碼並獲取圖書各類信息的所有步驟啦~