扫码加书

2：json

{ "usingComponents": { "van-button": "../../vant/button/index"}}

3：js（页面会自动生成默认功能，您可以手动将其删除）

// pages/scanCode/scanCode.jsPage({ /** * 页面的初始数据 */ 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); } }) }})

好，获取信息

关于参考视频资料：您可以通过视频来学习：

小程序云开发实战2：小程序云开发云功能安装相关步骤

1：安装nodejs并准备环境。此步骤将不详细介绍。如果没有，可以自己百度。如果您不知道是否拥有它，则可以输入节点-v进行检查。

2：创建一个新的云功能模板，并在cloudfunctions目录下创建一个新的云功能文件bookinfo。

3：右键单击新创建的文件上的文件，然后选择在终端中打开它。

这时，将弹出一个cmd窗口。

4：在cmd中打开云功能目录并安装依赖项。输入命令：

npm install --production

成功安装依赖项后，文件package-lock.json将出现在文件中。

5：因为要请求网络，所以需要安装请求网络的库。请求网络的库可以使用node.js中的请求库，这既方便又快捷：

小程序中使用的云函数是同步的，因此使用了promise，因为无法使用传统的回调在控制台中返回数据。

安装方法：通过这两行命令进行安装，复制命令

npm install --save requestnpm install --save request-promise

好吧，完整，相关性已放置在package.json文件中

好的，当文件上传到云中时，相关的依赖项将自动安装。

小程序云开发实战3：编写云功能代码

1：在云功能中，当我获得小程序的代码并对其进行扫描时，如何传输参数？

云功能API：

您可以通过阅读文档来学习。在云功能中，我们可以通过传递一条数据来获取内部数据，然后通过事件获取相应的数据。

2：复制此api中的方法：

Picture.png

打开用“实际战斗一号”编写的小程序扫描代码js接口，并将此方法置于成功状态。要调用的云功能的名称：更改为在实战第二教程中建立的云功能bookinfo

3：继续修改我们要传递的参数。传递的参数是isbn，结果是通过扫描代码获得的结果

4：打印出结果的结果，好的，写入用户端（小程序端）的代码。

用户端（小程序端）代码完成了，就是这样：

// pages/scanCode/scanCode.jsPage({ /** * 页面的初始数据 */ 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); } }) }})

5：然后开始编写云函数结束代码

在bookinfo中打开index.js，打印出事件结果，请求cloud函数，然后在cloud函数中返回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, // }}

右键单击，上传和部署云功能

对其进行测试，成功调用cloud函数，并且返回的结果（打印在控制台上）为isbn。

好的，云功能代码编写已经完成。下一步是实战四，调用豆瓣的API来实现特定数据。

小程序云开发之战四：调用豆瓣API获取特定数据

我在互联网上进行搜索，找到了可用的豆瓣API ：: 9787111128069

1：打开云函数文件夹，在index.js中编写代码，并引用请求保证。

var rp = require('request-promise')

2：自定义isbn，使用+号进行连接，并传递一个catch来处理错误情况。

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

3：return resres是相应的html，它会传递给客户端。

Picture.png

// 云函数入口文件// 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, // }}

4：编写后上传云功能。

Picture.png

好的，继续测试，获取条形码信息（书籍信息）。

5：有关这些信息，请进一步处理，以获取所需信息：打开小程序侧scanCode.js。

//进一步的处理方法 var bookString=res.result; console.log(JSON.parse(bookString))

查看整本书中的所有信息，修改信息并将其保存在云数据库中。

小程序云开发实战5：如何将获取的API数据存储在云数据库中

在上一篇文章中，我详细介绍了在云数据库中插入数据的方法，现在我将在实际项目中再次编写。

1：使用数据库时，首先初始化云开发数据库文档：

2：打开云开发控制台，旧规则并创建书籍集

3：打开小程序 js并初始化数据库

//云数据库初始化 const db = wx.cloud.database({}); const book = db.collection('books');

4：添加数据（插入数据）js代码流

// pages/scanCode/scanCode.jsPage({ 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); } }) }})

5：代码逻辑1：单击按钮后，调用scanCode 2：读取相机传递的图片，获取barCode的代码3：将获取的barCode代码传递给cloud函数中的bookinfo，传递给它后，获取本地结果4：使用云数据库示例创建新字段并将其添加到数据库中

6：测试一下，好吧，小程序获得的豆瓣API数据存储在云数据库中。

附加：

主要思路：1：通过调用小程序的扫码的api2：调用云函数获取到图书的信息，并将图书信息传递到小程序3：在小程序中 调用云数据库来添加可能会有很多人有问，为啥不直接在云函数中完成添加？会更加简单方便啊，暂时留个悬念啊啊哈。

小程序云开发实战6：在小程序侧边列表中显示云数据库读取的数据

我以前写过一个读取数据的详细案例。现在，它已在项目中使用，并且很容易理解。

有关参考阅读API，请单击：

1：初始化实例和预订方法

//云数据库初始化 const db = wx.cloud.database({}); const book = db.collection('books')

2：复制API代码的方法以获取多个记录的数据并将其放在项目的onload方法中

const db = wx.cloud.database({});const cont = db.collection('books');Page({ data: {}, onLoad: function(options) { db.collection('books').get({ success(res) { console.log(res.data) } }) },})

3：在控制台上打印

4：获取res.data后，需要将其分配给页面实例中的数据，因此请在数据中设置默认的空数组

5：创建一个变量以将其保存在页面示例中，以备后用。您还可以使用箭头功能来打印此图片，以查看是否为页面示例

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); } }) },})

6：直接使用它来设置数据

7：显示和布局：使用组件库进行介绍，您可以省略自己编写大量代码的风格，这既简单又方便，当然您也可以自己编写。

因为有多个数据在循环，所以使用了小程序帧的列表渲染