使用饬令创建模版项目,这里选用的是云开发的模版
taro init myBook
cd 到项目文件夹,安装依靠
npm install
cd 到项目文件夹下的client文件夹,再编译成微信小程序
npm run dev:weapp
swan:百度小程序 alipay:付出宝小程序 tt:字节跳动小程序 qq:qq小程序 jd:京东小程序
开发工具调试
打开微信小程序开发工具,导入当前项目myBook,细致导入的项目根目录要有project.config.json; 导入后在vscode编辑器打开项目编辑时,可以在小程序开发工具上查看实时的结果并进行调试;
项目创建完成后手机app,我们可以参考index的模版再创建一个页面,语法上与react开发是一样的,这里我们看一下扫码函数的实现:
@withWeapp({
...
scanCode: function () {
Taro.scanCode({// 微信扫码API
onlyFromCamera: true,
scanType: [],
success: result => {
Taro.showLoading({
title: '加载中...'
})
// result是扫码获取的效果其中含有isbn码
Taro.cloud.callFunction({// 调取微信云函数耐高温标签,必要在微信开发者工具的云开发中添加并部署云函数
name: 'book',
data: {
isbn: result.result
},
success: res => {
console.log('success', res.result)
res.result.create_time = new Date().getTime()
this.setData({
detail: res.result
})
// 得到爬取效果后存入到数据库四川成都人事考试网,此处也必要在云开发下的云数据库创建collection
db.collection('book').add({
data: res.result
})
Taro.hideLoading()
},
fail: err => {
console.log(err)
}
})
},
fail: res => { },
complete: res => { }
})
},
})
复制代码
爬虫功能(云函数)
上面提到的通过isbn码,爬取豆瓣图书信息的云函数“book”dc dc电源模块,如下:
// cloud>book>index.js
const { default: axios } = require('axios');
const doubanbook = require('doubanbook');
const cheerio = require('cheerio');
// 获取豆瓣图书的信息
async function getDoubanBook(isbn) {
const url = "https://search.douban3564/book/subject_search?search_text="+isbn;
const res = await axios.get(url);
const reg = /window\.__DATA__ = \"(.*)\"/;
if (reg.test(res.data)) {
const searchData = doubanbook(RegExp.$1)[0];//解密
//再通过详情URL获取图书简介
const introduce = await axios.get(searchData.url);
const $ = cheerio.load(introduce.data);
const summary = $("#link-report 5841ro").text();
console.log(summary);
return {...searchData,summary}
}else{
return {}
}
}
// 云函数入口文件
const cloud = require('wx-server-sdk');
cloud.init()
// 云函数入口函数
exports.main = async (event, context) => {
// event 接收传递的参数
const {isbn} = event;
console.log(isbn);
const info = await getDoubanBook(isbn);
return {
cover_url:info.cover_url,
abstract:info.abstract,
title:info.title,
rating:info.rating,
summary:info.summary
}
}
复制代码
数据库操作
前面提到的入库功能代码如下:
// 得到爬取效果后存入到数据库,此处也必要在云开发下的云数据库创建collection
db.collection('book').add({
data: res.result
})
复制代码
细致必要在云开发下的数据库界面创建一个对应的荟萃才能正常使用,存入数据库成功时可以刷新看到效果;
此处涉及到数据库查询,核心代码如下:
@withWeapp({
data: {
books: [],
pageSize: 5,
page: 1
},
getList: function () {
const { pageSize, page } = this.data;
db.collection('book').skip((page - 1) * pageSize).limit(pageSize).get({
success: res => {
console.log(res)
this.setData({
books: [...this.data.books, ...res.data]
})
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.getList();
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
this.setData({
page: this.data.page + 1
}, () => {
this.getList();
})
}
})
复制代码
代码库地址
仓库地址如下,迎接交流学习: github3564/Amy-Tong126…
中国 · 北京
电话:4000-960-360
企业QQ:800-118-118
邮箱:800118118@b.qq.com