• 2000多家国企医院年底前完成剥离 2019-04-25
  • 天津旅游嘉年华下周开幕 多项活动展现文旅融合--旅游频道 2019-04-15
  • (两会受权发布)中国人民政治协商会议全国委员会常务委员会工作报告 2019-04-13
  • A股市场具有较强估值支撑 机构看好政策受益板块 2019-04-13
  • 中国公司本地化运营蒙内铁路赢得肯尼亚民心 2019-04-10
  • 万达转型升级实体消费观念迭代 百货退出万达支柱性产业 ——凤凰网房产北京 2019-04-08
  • “精日亲美的真正原因”是中国的伪公知精英身上长了“洋奴依附之心”,“崇洋媚外之骨”,“汉奸文化之瘤”,这些人利用“和谐、包容”疯狂推行汉奸文化洗脑国人! 2019-04-08
  • 马克思主义哲学是帮助我们看清世界的一双“慧眼” 2019-03-30
  • 中国是亚洲和平的基石 2019-03-30
  • 三亚天涯区将率先在海南开设帆板帆船体育课 2019-03-28
  • 端午——网络中国节——黄河新闻网 2019-03-28
  • 不管怎么讲幸福,老百姓的愿望并不奢望,就是看病不难,不贵,不需要没钱就从手术台赶 下来,只能住医院过道,房子并不要太大,能避风挡雨,子女并不要万贯家财,能有一份 2019-03-28
  • 绍兴印染布质量比对成果发布 部分指标国际领先 2019-03-28
  • 长治警方破获利用网络平台贩毒案 2019-03-27
  • 5月份61城房价环比反弹 多地调控政策或再加码 ——凤凰网房产武汉 2019-03-23
  • 用户
     找回密码
     立即注册

    QQ登录

    只需一步,快速开始

    扫一扫,登录网站

    小程序社区 首页 教程 查看内容

    体彩湖北体彩11选五:开发实战分享|小程序扫码获取图书信息(内附详细教程)

    河北体彩11选5今天开奖 www.7vek.com Rolan 2019-3-11 00:34

    作者:祈澈姑娘小程序扫码实现读取isbn,获取图书的各种信息接触到云函数已经有一段时间了,之前一直在看api,现在自己跟着网络上的资料和视频学习,受到豆瓣读书系列的启发,决定用云函数做一个项目,获取图书信息 ...

    作者:祈澈姑娘

    河北体彩11选5今天开奖扫码实现读取isbn,获取图书的各种信息

    接触到云函数已经有一段时间了,之前一直在看api,现在自己跟着网络上的资料和视频学习,受到豆瓣读书系列的启发,决定用云函数做一个项目,获取图书信息并存入云数据库。

    基本流程

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

    具体步骤

    下面对该项目的步骤进行一些具体的讲解以及部分关键代码的呈现。

    一、扫一扫获取图书ISBN码

    二、准备环境、安装依赖

    1.安装Node.js准备环境

    2.在cmd打开云函数目录中,安装依赖

    三、编写云函数代码

    1.在云函数中用获取到的ISBN传参

    2.编写用户端(小程序端代码)

    3.编写云函数端代码

    四、调用豆瓣API获取具体数据

    五、将获取到的API数据存入云数据库里面

    1.初始化

    2.添加数据

    六、云数据库读取的数据显示在小程序端列表里

    1.获取res.data

    2.设置界面相关数据

    3.显示和布局

    4.小程序wxml界面(主要demo)

    七、【云开发】首页列表跳转详情页

    1.新建一个详情页

    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传参

    通过看文档可以学会,在云函数里,我们可以通过传递一份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)})
    复制代码

    returnres res就是对应的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示例:

    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);
    
            } 
    
        })
    
      },
    
    })
    复制代码

    直接使用this来设置data:

    3.显示和布局

    使用组件库引入,可以省略自己写很多代码的样式,简单方便,当然也可以自己写: youzan.github.io/vant-weapp/…

    因为数据不止一条,循环,所以要用到小程序框架的列表渲染:

    developers.weixin.qq.com/miniprogram…

    写好之后 wxml如下:

    <text>私家书柜</text>
    
    <view wx:for="{{book\\_list}}">
    
      <van-card num="2" price="2.00" desc="描述信息" title="商品标题" />
    
    </view>
    复制代码

    4.小程序wxml界面(主要demo)

    wxml:

    <view wx:for="{{book\\_list}}">
    
      <van-card num="2" 
    
      price="{{item.price}}" 
    
      desc="{{item.author}}" 
    
      title="{{item.title}}"  
    
      thumb="{{item.image }}" />
    
    </view>
    复制代码

    js:

    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[0]);
    
    this.setData({
    
      book_list:res.data
    
              })
    
            } 
    
         })
    
      },
    
    })
    复制代码

    ok,云数据库读取的数据显示在小程序端列表里:

    七、【云开发】首页列表跳转详情页

    1.新建一个详情页

    打开app.json, "pages/details/details", ,自动生成了一个详情页:

    2.按钮跳转事件

    打开首页列表页代码,绑定详情按钮跳转事件。

    wxml:

    <view wx:for="{{book\\_list}}">
    
      <van-card num="2" price="{{item.price}}" desc="{{item.author}}" title="{{item.title}}" thumb="{{item.image }}">
    
    <view slot="footer">
    
      <van-button size="mini" bind:click="viewitem">详情按钮</van-button>
    
    </view>
    
      </van-card>
    
    </view>
    复制代码

    继续写js里面的绑定事件,在控制台打印一下event,方便后续测试:

    viewitem: function(event) {    
    
        console.log(event)  
    
    }
    复制代码

    3.跳转到具体详情页

    要在云开发里面写一个特定的id,打开云开发控制台,数据库,需要用到这个下划线是_id的字段:

    给这个字段设置一个值, data-id="{{item._id}}" :

    点击按钮,可以看到,点击不同的列表,打印的是不同的id,通过不同的id就可以看到不同的内容了:

    4.关于详情页的一些代码

    初始化db的实例:

    const db = wx.cloud.database({});
    复制代码

    打开云函数文档里面的读取数据api:

    developers.weixin.qq.com/miniprogram…

    复制此段读取数据记录的代码,放在onload里面:

    可以看到,具体数据已经打印过来了:

    这个时候还没有将数据传递到一个具体的页面实例中:

    所以,success开始改成使用箭头函数,进入页面的时候,可以看到appdata里面的book:

    具体展示:在wxml里面写上想要拿到的数据,ok,详情页面展示的数据:

    效果如下:

    这样,我们就完成了利用云开发扫码读取ISBN码并获取图书各种信息的全部步骤啦~

    分享至 : QQ空间
    收藏
    原作者: 祈澈姑娘 来自: 掘金
  • 2000多家国企医院年底前完成剥离 2019-04-25
  • 天津旅游嘉年华下周开幕 多项活动展现文旅融合--旅游频道 2019-04-15
  • (两会受权发布)中国人民政治协商会议全国委员会常务委员会工作报告 2019-04-13
  • A股市场具有较强估值支撑 机构看好政策受益板块 2019-04-13
  • 中国公司本地化运营蒙内铁路赢得肯尼亚民心 2019-04-10
  • 万达转型升级实体消费观念迭代 百货退出万达支柱性产业 ——凤凰网房产北京 2019-04-08
  • “精日亲美的真正原因”是中国的伪公知精英身上长了“洋奴依附之心”,“崇洋媚外之骨”,“汉奸文化之瘤”,这些人利用“和谐、包容”疯狂推行汉奸文化洗脑国人! 2019-04-08
  • 马克思主义哲学是帮助我们看清世界的一双“慧眼” 2019-03-30
  • 中国是亚洲和平的基石 2019-03-30
  • 三亚天涯区将率先在海南开设帆板帆船体育课 2019-03-28
  • 端午——网络中国节——黄河新闻网 2019-03-28
  • 不管怎么讲幸福,老百姓的愿望并不奢望,就是看病不难,不贵,不需要没钱就从手术台赶 下来,只能住医院过道,房子并不要太大,能避风挡雨,子女并不要万贯家财,能有一份 2019-03-28
  • 绍兴印染布质量比对成果发布 部分指标国际领先 2019-03-28
  • 长治警方破获利用网络平台贩毒案 2019-03-27
  • 5月份61城房价环比反弹 多地调控政策或再加码 ——凤凰网房产武汉 2019-03-23
  • 广东时时彩11选五结果 太湖钓叟字谜官方网站 竞彩篮球大小分赚钱 广州市花都区体育彩票中心 福彩3d字谜图谜总汇 北京pk10全天闯关计划 河南481开奖视频直播 老时时彩图五星 欢乐生肖 pc28北京神测网 山东时时彩是什么意思是什么 大乐透开奖查询 北京赛车pk10开奖直播 体彩排列5中2个数字 足球任选9场玩法 彩票销售管理软件