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

作者：祈澈姑娘

小程序扫码实现读取isbn，获取图书的各种信息

接触到云函数已经有一段时间了，之前一直在看api，现在自己跟着网络上的资料和视频学习，受到豆瓣读书系列的启发，决定用云函数做一个项目，获取图书信息并存入云数据库。

基本流程

1.用户端小程序调用 wx.scanCode接口,获取到ISBN码。 2.使用ISBN码调用云函数，在请求云函数的时候，云函数会请求豆瓣的API，获取豆瓣图书信息。 3.图书信息请求到之后，会将其中无用的信息返回给小程序中，小程序中再拿出获取到的信息，创建图书条目。 4.将对应的数据直接存储到云开大的数据库里面。

具体步骤

下面对该项目的步骤进行一些具体的讲解以及部分关键代码的呈现。

一、扫一扫获取图书ISBN码
二、准备环境、安装依赖
1.安装Node.js准备环境
2.在cmd打开云函数目录中，安装依赖
三、编写云函数代码
1.在云函数中用获取到的ISBN传参
2.编写用户端（小程序端代码）
3.编写云函数端代码
四、调用豆瓣API获取具体数据
五、将获取到的API数据存入云数据库里面
1.初始化
2.添加数据
六、云数据库读取的数据显示在小程序端列表里
1.获取res.data
2.设置界面相关数据
3.显示和布局
4.小程序wxml界面（主要demo）
七、【云开发】首页列表跳转详情页
1.新建一个详情页
2.按钮跳转事件
3.跳转到具体详情页
4.关于详情页的一些代码

一、扫一扫获取图书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，获取到信息：

二、准备环境、安装依赖

1.安装Node.js准备环境

安装nodejs,准备好环境，这一步就不细说了，没有安装的可以自行百度，不知道有没有安装的可以输入 node -v 查看一下。

2.在cmd打开云函数目录中，安装依赖

输入命令：

npm install --production
复制代码

依赖安装成功之后，文件里面多会出现 package-lock.json这个文件：

三、编写云函数代码

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：

四、调用豆瓣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))
复制代码

看到了整本图书上面的所有信息，修改这些信息，存入云数据库之中即可。

五、将获取到的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);
  }
})
  }
})
复制代码

六、云数据库读取的数据显示在小程序端列表里

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，云数据库读取的数据显示在小程序端列表里：

七、【云开发】首页列表跳转详情页

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码并获取图书各种信息的全部步骤啦~

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

weixin_33676492