2024年开发实战分享 小程序扫码获取图书信息(内附详细教程)

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示例:

还有兄弟不知道网络安全面试可以提前刷题吗?费时一周整理的160+网络安全面试题,金九银十,做网络安全面试里的显眼包!

王岚嵚工程师面试题(附答案),只能帮兄弟们到这儿了!如果你能答对70%,找一个安全工作,问题不大。

对于有1-3年工作经验,想要跳槽的朋友来说,也是很好的温习资料!

【完整版领取方式在文末!!】

93道网络安全面试题

内容实在太多,不一一截图了

黑客学习资源推荐

最后给大家分享一份全套的网络安全学习资料,给那些想学习 网络安全的小伙伴们一点帮助!

对于从来没有接触过网络安全的同学,我们帮你准备了详细的学习成长路线图。可以说是最科学最系统的学习路线,大家跟着这个大的方向学习准没问题。

1️⃣零基础入门
① 学习路线

对于从来没有接触过网络安全的同学,我们帮你准备了详细的学习成长路线图。可以说是最科学最系统的学习路线,大家跟着这个大的方向学习准没问题。

image

② 路线对应学习视频

同时每个成长路线对应的板块都有配套的视频提供:

image-20231025112050764

网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。

需要这份系统化资料的朋友,可以点击这里获取

一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!

  • 30
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值