七、【云开发】首页列表跳转详情页
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)})
复制代码
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示例：
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：
给大家的福利
零基础入门
对于从来没有接触过网络安全的同学，我们帮你准备了详细的学习成长路线图。可以说是最科学最系统的学习路线，大家跟着这个大的方向学习准没问题。
同时每个成长路线对应的板块都有配套的视频提供：
因篇幅有限，仅展示部分资料
网络安全面试题
绿盟护网行动
还有大家最喜欢的黑客技术
网络安全源码合集+工具包
所有资料共282G，朋友们如果有需要全套《网络安全入门+黑客进阶学习资源包》，可以扫描下方二维码领取（如遇扫码问题，可以在评论区留言领取哦）~
网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。
一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
353
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
