您的位置: 首页  >  文章  >  小程序云开发：私家书柜

小程序云开发：私家书柜

分类: 文章 • 2023-12-22 13:28:04

原教学视频：
https://cloud.tencent.com/edu/learning/learn-100005-1244/3154
由于豆瓣获取图书ISBN的API已暂停开放，故本文采用极速数据提供的免费API：
https://www.jisuapi.com/
整个文档结构如下：
小程序云开发：私家书柜
共有三个页面，index页面内以卡片的形式展示所有书目；scanCode页面用于扫码；bookDetail页面展示图书的详细信息。

一、云函数的使用

（1）新建云函数
1、新建一个云函数，命名为‘bookinfo’，用于调用API接口获取图书的ISBN码，并将图书信息储存至云数据库；
2、安装依赖：右击该云函数，选择在终端打开，输入命令：

npm install --production

依赖安装成功之后，文件里面多会出现package-lock.json这个文件。
3、由于要请求网络，所以要安装请求网络的库，请求网络的库可以使用node.js中的request库。
在终端中输入：

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

（2）编写云函数代码
bookinfo下的index.js:

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

var rp = require('request-promise')

// 云函数入口函数
exports.main = async (event, context) => {
  var res = rp('https://api.jisuapi.com/isbn/query?appkey=44898c9b893f35ce&isbn=' + event.isbn).then(html => {
    return html;
  }).catch(err => {
    console.log(err)
  })

  return res;
}

其中https://api.jisuapi.com/isbn/query?appkey=44898c9b893f35ce&isbn=xxx 是一个免费的查询图书ISBN的接口，该云函数就实现了调用这个接口并返回图书数据。

（3）调用云函数
我们在scanCode页面调用bookinfo云函数，在scanCode中放一个扫码按钮：

    <van-button type="primary" bind:click="scanCode">扫码加书</van-button>

样式采用有赞UI组件。有赞UI组件的使用详见https://blog.csdn.net/weixin_42195593/article/details/90270436
需要在scanCode.json中添加依赖：

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

该按钮的点击事件：

  scanCode: function (event) {
    wx.scanCode({
      onlyFromCamera: true,
      scanType: ['barCode'],
      success: res => {
        console.log(res.result);//图书的ISBN码
        wx.cloud.callFunction({
          // 要调用的云函数名称
          name: "bookinfo",
          // 传递给云函数的参数
          data: {
            isbn: res.result
          },
          success: res => {
            var bookString = res.result;
            console.log("调用接口成功");
            //console.log(res);
            console.log(JSON.parse(bookString).result);

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

            db.collection('mybook').add({
              // data 字段表示需新增的 JSON 数据
              data: JSON.parse(bookString).result
            })
              .then(res => {
                console.log("储存成功！")
              }).catch(err => {
                console.log(err)
              })
          },
          fail: err => {
            console.log(err);
          },
        })
      },
      fail: err => {
        console.log(res);
      }
    })
  }

点击按钮，即调用云函数bookinfo，返回图书数据，并接着把数据上传至云数据库。

二、从云数据库读取数据

在index页要显示所有图书的信息，因此需要从数据库读取图书数据。
在index.js中：

const db = wx.cloud.database({});//首先获得数据库实例
Page({

  /**
   * 页面的初始数据
   */
  data: {
    booklist: [],
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    db.collection('mybook').get({
      success: res =>{
        console.log(res.data[0]);
        this.setData({
          booklist: res.data
        })
      }
    })
  }

index.wxml:

<view wx:for="{{booklist}}">
  <van-card price="{{item.price}}" desc="{{item.author}}" title="{{item.title}}" thumb="http://www.books88.com/Books_Pic/20080508/L9787507828313.jpg">
    <view slot="tags">
      <van-tag type="primary">{{item.keyword}}</van-tag>
    </view>
    <view slot="footer">
      <van-button data-id="{{item._id}}" size="small" type='primary' plain bind:click='viewItem'>详情</van-button>
    </view>
  </van-card>
</view>

其中要用到有赞UI组件中的card组件，https://youzan.github.io/vant/#/zh-CN/card
并且在每个card上添加‘详情’按钮，用于跳转至每本书的详情页面。

三、云数据库的增删改查

可以在小程序端对云数据库进行增删改查。
当在index页点击某本书的详情按钮时，会跳转到相应图书的详情页面，因此需要传递所点击的图书的id。
首先为详情按钮写点击事件：

  viewItem:function(event){
      //console.log(event);
      var id = event.currentTarget.dataset.id;
      wx.navigateTo({
        url: '../bookDetail/bookDetail?id='+id,
      })
  }

跳转到bookDetail页后，会根据所携带的id号去云数据库查询该id所对应的所有数据，保存并显示在详情页。
在bookDetail的onload函数里：

onLoad: function (options) {
    //console.log(options);
    db.collection('mybook').doc(options.id).get({
      success: res => {
        // res.data 包含该记录的数据
        this.setData({
          book: res.data,
          id: options.id
        });
      },
      fail: err => {
        console.error(err);
      }
    })
  }

对于更新和删除操作，
首先在bookDetail页面新建两个按钮，用于更新和删除操作：
bookDetail.wxml:

<van-button type="warning" bind:click="update">更新</van-button>
<van-button type="danger" bind:click="delete">删除</van-button>

在bookDetail.js编写相应的点击函数：

更新数据：

  update:function(event){
    console.log(event);
    db.collection('mybook').doc(this.data.id).update({
      // data 传入需要局部更新的数据
      data: {
        // 表示将 done 字段置为 true
        title: "啦啦啦"
      },
      success(res) {
        console.log(res)
      }
    })
  }

删除操作：

 delete: function(event){
    db.collection('mybook').doc(this.data.id).remove({
      success(res) {
        console.log(res)
      }
    })
  }

相关推荐