作者:祈澈姑娘
接触到云函数已经有一段时间了,之前一直在看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.关于详情页的一些代码
用户端小程序调用 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,获取到信息:
安装nodejs,准备好环境,这一步就不细说了,没有安装的可以自行百度,不知道有没有安装的可以输入 node -v 查看一下。
输入命令:
npm install --production
依赖安装成功之后,文件里面多会出现 package-lock.json
这个文件:
通过看文档可以学会,在云函数里,我们可以通过传递一份data来获取这里面的数据,然后再通过event来拿到对应的数据:
复制这个api里面的方法:
打开实战一里面写的小程序端的扫码的js界面,把这个方法放在 success
里面。 要调用的云函数的名称 name
要改成成实战二教程里面建立的云函数bookinfo
:
传递的参数是 isbn
,结果是扫码得到的result
:
将 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);
}
})
}
})
打开 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: https://api.douban.com/v2/book/isbn/:9787111128069
打开云函数文件夹,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))
看到了整本图书上面的所有信息,修改这些信息,存入云数据库之中即可。
使用数据库的时候,首先要进行初始化:
云开发数据库文档: https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/init.html
打开云开发控制台创建一个集合books:
打开小程序端js,初始化数据库:
//云数据库初始化
const db = wx.cloud.database({});
const book = db.collection('books');
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);
}
})
}
})
参考的读取api,请点击: https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/read.html
初始化实例和book方法:
//云数据库初始化
const db = wx.cloud.database({});
const book = db.collection('books')
复制API这段代码获取多个记录的数据的方法,放在项目到onload方法之中:
打印在控制台:
拿到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:
使用组件库引入,可以省略自己写很多代码的样式,简单方便,当然也可以自己写:https://youzan.github.io/vant-weapp/#/card 因为数据不止一条,循环,所以要用到小程序框架的列表渲染: https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/list.html
写好之后 wxml如下:
<text>私家书柜</text>
<view wx:for="{{book\\_list}}">
<van-card num="2" price="2.00" desc="描述信息" title="商品标题" />
</view>
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,云数据库读取的数据显示在小程序端列表里:
打开app.json, "pages/details/details",
,自动生成了一个详情页:
打开首页列表页代码,绑定详情按钮跳转事件。
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)
}
要在云开发里面写一个特定的id,打开云开发控制台,数据库,需要用到这个下划线是_id的字段:
给这个字段设置一个值,data-id="{{item._id}}"
:
点击按钮,可以看到,点击不同的列表,打印的是不同的id,通过不同的id就可以看到不同的内容了:
初始化db的实例:
const db = wx.cloud.database({});
打开云函数文档里面的读取数据api:
https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/read.html
复制此段读取数据记录的代码,放在onload里面:
可以看到,具体数据已经打印过来了:
这个时候还没有将数据传递到一个具体的页面实例中:
所以,success开始改成使用箭头函数,进入页面的时候,可以看到appdata里面的book:
具体展示:在wxml里面写上想要拿到的数据,ok,详情页面展示的数据:
效果如下:
这样,我们就完成了利用云开发扫码读取ISBN码并获取图书各种信息的全部步骤啦~
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。