美文网首页小程序程序员小程序
小程序云开发实战一:小程序扫一扫获取到图书ISBN码(图书条形码

小程序云开发实战一:小程序扫一扫获取到图书ISBN码(图书条形码

作者: 祈澈菇凉 | 来源:发表于2018-12-29 18:28 被阅读128次

    接触到云函数已经有一段时间了,之前一直在看api,现在自己跟着网络上的资料和视频学习,做了一个小项目,类似于豆瓣读书系列。
    具体是这样的一个流程,后面会一步步的实现。

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

    之前用过微信扫一扫功能,调用二维码,扫描自己生成的二维码,并将二维码的内容显示在界面的两个例子:

    微信小程序扫一扫的功能实现:https://www.jianshu.com/p/e00b44293fe0
    小程序扫码成功后带着参数跳转到指定页面:https://www.jianshu.com/p/413c5831ddd6

    现在是用户端小程序调用 wx.scanCode接口,获取到图书ISBN码(图书条形码),在办公室找了一圈,找到了一本图书ISBN码,可以自动忽略我这渣渣的像素。

    demo的示例:

    在下面的示例代码里面,我是使用了小程序的组件库的,如果有遇到引入库的问题的可以查看:小程序动端组件库Vant Weapp的使用https://www.jianshu.com/p/10d75a3ca3d0

    1:wxml

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

    2:json

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

    3:js(page自动生成默认的各个函数,可以自己手动删除)

    // 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,获取到信息


    关于参考的视频资料:可以跟着视频后面学习一下:https://cloud.tencent.com/developer/edu/learn-100005-1244/3154

    原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1
    90后前端妹子,爱编程,爱运营,爱折腾。
    坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,对于博客上面有不会的问题,可以加入qq群聊来问我:473819131。

    相关文章

      网友评论

        本文标题:小程序云开发实战一:小程序扫一扫获取到图书ISBN码(图书条形码

        本文链接:https://www.haomeiwen.com/subject/edzslqtx.html