开发实战分享|小程序扫码获取图书信息（内附详细教程）

做者：祈澈姑娘

小程序扫码实现读取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码并获取图书各类信息的所有步骤啦~