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

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

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

具体是这样的一个流程,后面会一步步的实现。


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

1:用户端小程序调用 wx.scanCode接口,获取到ISBN码

2:使用ISBN码调用云函数,在请求云函数的时候,云函数会请求豆瓣的API,获取豆瓣图书信息。

3:图书信息请求到之后,会将其中无用的信息返回给小程序中,小程序中再拿出获取到的信息,创建图书条目

4:将对应的数据直接存储到云开大的数据库里面


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

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


demo的示例:

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

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

相关文章
|
4月前
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
756 0
|
7月前
|
小程序 安全 搜索推荐
【微信小程序开发实战项目】——个人中心页面的制作
本文介绍了如何设计和实现一个网上花店的微信小程序,包括个人中心、我的订单和我的地址等功能模块。个人中心让用户能够查看订单历史、管理地址和与客服互动。代码示例展示了`own.wxml`、`own.wxss`和`own.js`文件,用于构建个人中心界面,包括用户信息、订单链接、收藏、地址、客服和版本信息。我的订单部分展示了订单详情,包括商品图片、名称、销量、价格和订单状态,用户可以查看和管理订单。我的地址功能允许用户输入和编辑收货信息,包括联系人、性别、电话、城市和详细地址。每个功能模块都附有相应的WXML和WXSS代码,以及简洁的样式设计。
389 0
【微信小程序开发实战项目】——个人中心页面的制作
|
7月前
|
小程序 开发者
uniapp实战 —— 开发微信小程序的调试技巧
uniapp实战 —— 开发微信小程序的调试技巧
619 1
|
7月前
|
前端开发 小程序
【微信小程序-原生开发】实用教程20 - 生成海报(实战范例为生成活动海报,内含生成指定页面的小程序二维码,保存图片到手机,canvas 系列教程)
【微信小程序-原生开发】实用教程20 - 生成海报(实战范例为生成活动海报,内含生成指定页面的小程序二维码,保存图片到手机,canvas 系列教程)
456 0
|
7月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的前后台图书商城系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的前后台图书商城系统附带文章源码部署视频讲解等
41 0
|
7月前
|
小程序
【微信小程序】实战案例 -- 向订阅用户发送消息(范例:报名提醒)
【微信小程序】实战案例 -- 向订阅用户发送消息(范例:报名提醒)
345 0
|
27天前
|
小程序 前端开发 关系型数据库
基于Uniapp+php校园小程序,校园圈子论坛系统功能,校园跑腿二手交流功能设计
校园圈子论坛及综合服务平台集成了校园跑腿、兼职信息、外卖团购、闲置交换、租赁服务、表白墙等多功能模块,提供一站式校园生活解决方案。系统采用uniapp前端和PHP后端开发,支持多城市、多学校切换,配备分站式后台管理,确保稳定性和安全性。通过融云IM SDK实现即时通讯功能,增强用户互动与粘性。适用于大学校园、城市及社区圈子,满足多样化需求,提升便捷体验。
|
1月前
|
移动开发 小程序 前端开发
超详细攻略!uniapp陪玩系统,打包陪玩小程序、H5需要注意什么?
陪玩系统的打包过程涵盖APP、小程序和H5平台。APP打包需使用uni-app开发工具,配置项目信息并选择云打包;小程序打包需在微信公众平台注册账号并提交审核;H5打包则直接通过uni-app生成文件并上传至服务器。各平台需注意权限配置、代码规范及充分测试,确保应用稳定性和兼容性。
|
30天前
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
27 0
|
3月前
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
82 0
在线课堂+工具组件小程序uniapp移动端源码

热门文章

最新文章

  • 1
    微信小程序云开发的开通
    101
  • 2
    后端开发零负担!揭秘支付宝小程序云开发的高效与安全,你的项目也能飞速上线?
    140
  • 3
    小程序开发问题之使用小程序云服务开发个人相册小程序如何解决
    57
  • 4
    好的商业模式-----小程序定制资料,加一张好看的海报,在推广中就可以找到用户中了,云服务部署收5000,部署是一种服务,定制化,游戏开发创者,仲裁劳务会剪视频好,提供服务,想增加一些新功能收费,会说
    54
  • 5
    【微信小程序-原生开发】转发给好友/群,分享到朋友圈(含单页模式访问云开发数据库的方法)
    269
  • 6
    【微信小程序-原生开发】实用教程15 - 列表的排序、搜索(含云数据库常用查询条件的使用方法,t-search 组件的使用)
    164
  • 7
    【微信小程序-原生开发+云开发+TDesign】修改用户头像(含wx.chooseMedia,wx.cloud.uploadFile,wx.cloud.deleteFile的使用)
    105
  • 8
    【微信小程序-原生开发】实用教程10 - 动态的新增、修改、删除(含微信云数据库的新增、修改、删除,表单弹窗、确认弹窗、日期选择器、单行输入框、多行输入框、滑动组件的使用)
    266
  • 9
    【微信小程序-原生开发】实用教程08 - 开通微信云开发,操作云数据库新增数据(含修改数据权限),初始化云服务(含获取微信云环境 id),获取云数据,滚动公告栏
    109
  • 10
    小程序云函数从云数据下载excal
    133