当前位置:首页 > JS逆向 > 2024年最新开发实战分享 小程序扫码获取图书信息(内附详细教程)(3),2024年最新原理讲解

2024年最新开发实战分享 小程序扫码获取图书信息(内附详细教程)(3),2024年最新原理讲解

一叶知秋2024-05-12 14:19:28JS逆向3

给大家的福利

零基础入门

对于从来没有接触过网络安全的同学,我们帮你准备了详细的学习成长路线图。可以说是最科学最系统的学习路线,大家跟着这个大的方向学习准没问题。

同时每个成长路线对应的板块都有配套的视频提供:

在这里插入图片描述

因篇幅有限,仅展示部分资料

网络安全面试题

绿盟护网行动

还有大家最喜欢的黑客技术

网络安全源码合集+工具包

所有资料共282G,朋友们如果有需要全套《网络安全入门+黑客进阶学习资源包》,可以扫描下方二维码领取(如遇扫码问题,可以在评论区留言领取哦)~

网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。

需要这份系统化资料的朋友,可以点击这里获取

一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!

})

}

})
复制代码


#### 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…](https://bbs.csdn.net/topics/618540462)
> 
> 
> 


打开云函数文件夹,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…](https://bbs.csdn.net/topics/618540462)
> 
> 
> 


打开云开发控制台创建一个集合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…](https://bbs.csdn.net/topics/618540462)
> 
> 
> 


初始化实例和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/…](https://bbs.csdn.net/topics/618540462)  
> 因为数据不止一条,循环,所以要用到小程序框架的列表渲染:  
> [developers.weixin.qq.com/miniprogram…](https://bbs.csdn.net/topics/618540462)
> 
> 
> 


写好之后 wxml如下:



私家书柜

复制代码 ```
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.关于详情页的一些代码

给大家的福利

零基础入门

对于从来没有接触过网络安全的同学,我们帮你准备了详细的学习成长路线图。可以说是最科学最系统的学习路线,大家跟着这个大的方向学习准没问题。

同时每个成长路线对应的板块都有配套的视频提供:

在这里插入图片描述

因篇幅有限,仅展示部分资料

网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。

需要这份系统化资料的朋友,可以点击这里获取

一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!

扫描二维码推送至手机访问。

版权声明:本站部分文章来自互联网采集,请查看免责申明

本文链接:https://blog.yyzq.team/post/338358.html

标签: 小程序
分享给朋友:

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。