基于小程序开发的藏书馆
1、小程序的发展
jsbridge -> js-sdk -> 小程序
- 腾讯内部使用的jsbridge,被外部发现,并使用,逐渐成为微信中网页的事实标准。后提供了外部使用的js-sdk,之后为了提供更丰富的能力,提供小程序。
- 小程序中js的组成:
小程序的逻辑层和渲染层是分开的,逻辑层运行在 JSCore 中,并没有一个完整浏览器对象,因而缺少相关的DOM API和BOM API。
2、后端技术
后端可通过微信提供的云服务和自己搭建服务端来实现,两者的区别如下:
可以看到,使用自己搭建的服务端,需要一定的运维能力,需要提供数据库、https接口等,成本比较大。对于个人开发者,或者没有相关服务器、运维能力的团队,可以使用云服务。
3、云开发的流程
在下面的demo事例中,将提供相应云开发具体操作方式。
4、藏书馆demo体验
demo功能说明:
提供了书本的扫码、查询录入功能,将家中的图书管理起来。其中由于豆瓣的书本查询api关闭,最终通过网页爬虫,实现在线书本信息收集的工作。通过将书本信息存入提取,录入到数据库中,形成自己的在线书库。
功能部分:
- 1、微信扫码识别条形码 or 手动输入作者、书名、isbn查询
- 2、亚马逊网页爬虫
- 3、数据录入数据库中
本示例提供了两种服务端,nodejs + mongodb自建;及云服务。将提供两者的实现方法。
上截图:
4.1、微信扫码识别条形码
wx.scanCode({success (res) {that.searchBookList(res.result);},fail(err) {console.log('fail', err);}
});
微信提供条形码识别的api,直接调用即可~~生成以后,通过亚马逊网页爬虫爬取信息。
4.2、亚马逊网页爬虫
由于豆瓣的图书api禁用,只能通过网页爬虫的方式去获取相关的信息,对比了豆瓣、当当、京东、亚马逊、几个在线图书馆,最终选择了亚马逊。区别对比:
从对比表格可以看出,仅仅亚马逊可以作为图书信息收集的渠道,但也会出现不稳定的情况,有时候需要多次请求才可取到。豆瓣做了相应的规避爬虫的处理,书本信息无法读取到(爬了几次,ip被豆瓣放入了黑名单。。。)。当当、京东比较尴尬的点是,它的查询结果包含其他第三方书店的结果信息,导致一个isbn对应很多的结果记录,在后面做作者、书名的查询扩展时,比较难过滤,所以丢弃。在线图书馆情况就更多,信息杂乱,书目不全等,丢弃。综合以上,最终选用亚马逊网页来实现书本信息的收集。
包含两个爬虫:
- 1、根据作者、书名、isbn查询书目列表;
- 2、step1 里的亚马逊详情链接,跳转到详情页,读取具体书本详细信息。
step1: 搜索结果爬虫
// 需要使用encodeURI进行编码,处理中文问题
const bookInfoDomain = 'https://www.amazon.cn';
rp(bookInfoDomain + '/s?k=' + encodeURI(event.params.searchValue + '&i=stripbooks')).then(html => {return getBookBaseInfo(html);
}).catch(err => {console.log(err)
});
书本查询结果列表的搜索结果,(搜索书名“自立”的结果)如图所示:
左边为亚马逊的图书列表,其中红线框中的信息为需要提取的图书信息;右边为提取相关信息后,在小程序端展现的搜索结果列表。
通过分析结果页的dom结构,来提取相关信息,代码:
let bookHtmlList = [];
if (htmlString) {var $ = cheerio.load(htmlString);$('.s-search-results .s-result-item').each((i, e) => {var href = $(e).find("[data-component-type='s-product-image'] a").attr('href');var logo = $(e).find(".s-image").attr('src');var name = $(e).find("h2").text();var price = ($(e).find(".a-spacing-top-small .a-offscreen").text() || '').replace(/[^0-9|\.]/ig,"");bookHtmlList.push({......}); // 省略})
}
return bookHtmlList;
使用cheerio来解析html串,其使用jquery的核心实现,可在服务端,直接像jquery一样使用。在列表页提取了href,为书本详情页的跳转做准备。
step2:详情页爬虫
书本详情的结果如图所示:
左图为亚马逊的图书列表,右图为小程序收集到相关信息的展示页:
总结:爬虫的重点为 找到核心、有效信息的网页,再使用cheerio进行解析,最后按照需要,使用类jquery api提取信息即可。
4.3、数据录入数据库中
这里提供了两种服务提供方式:
- a、本地nodejs + mongodb
- b、小程序自带云服务
本地nodejs + mongodb
如上图,为nodejs + mongodb的服务端代码结构,通过提供api的方式,提供数据服务。当然,上线之后,需要提供ssh证书,仅https协议的访问才被允许;在小程序的配置当中,需要将相关的服务域名进行配置(另外,小程序没有cookie、session的机制,如果服务端是做迁移的,需要在这方面做下融合)。
小程序自带云服务
云服务的部署、运维,现在就看看具体如何操作:
step1:生成云开发的账号,通过小程序的devtools,点击"云开发"去生成,如下图所示;
step2:创建云开发目录,一般与小程序项目同级;
step3:新建云函数,在生成的云函数目录内(该目录为云函数的名称),进行npm install,安装相关的组件;(小程序通过云函数,与云服务进行交互)
step4:进行相关云开发的配置,配置方法如下:
a、project.config.json里添加:
{"cloudfunctionRoot": "cloudfunctions/",}
b、app.js的配置
// 进行云服务的初始化 onLaunch: function () {if (!wx.cloud) {console.error('请使用 2.2.3 或以上的基础库以使用云能力')} else {wx.cloud.init({traceUser: true,})}...... }
step5: 云函数使用
a、调用云函数
// 亚马逊查找相应的书本 wx.cloud.callFunction({name: 'bookinfo',data: {type: 'search',params: {searchValue}},success: data => {......},fail: err => {......} })
b、云函数接收
// 云函数入口函数exports.main = async (event, context) => {......return rst;}
其中event的属性与data一样,可通过event,使用data中传递的值信息。
step6: 数据库的使用
const bookStoreDb = cloud.database();const bookCollection = bookStoreDb.collection('book');const _ = bookStoreDb.commandlet whereInfo = {};if (event.params.searchValue) {whereInfo = _.or([{author: {$regex: '.*'+ event.params.searchValue}},{isbn: {$regex: '.*'+ event.params.searchValue}},{name: {$regex: '.*'+ event.params.searchValue}},])}// 一次最多查询100个记录,total大于100,需要多次请求,拼合rst = await bookCollection.where(whereInfo).get().then(res => {......});return rst;
5、非前端开发可关注以下部分:(后续补充)
基础布局方法flex
- js事件循环机制
样式库
转载于:https://www.cnblogs.com/hity-tt/p/11171355.html
基于小程序开发的藏书馆相关推荐
- 基于小程序开发的宝可梦图鉴小程序源码课程设计毕业设计
源码地址:基于小程序开发的宝可梦图鉴小程序源码课程设计毕业设计 宝可梦是一款备受喜爱的游戏,其丰富的剧情和可爱的角色深受玩家们的喜欢.而对于宝可梦爱好者来说,一款好的宝可梦图鉴是必不可少的.今天,我来 ...
- 从环境部署到运营推广,蚂蚁特色的一站式小程序开发体验
**摘要**:以"数字金融新原力(The New Force of Digital Finance)"为主题,蚂蚁金服ATEC城市峰会于2019年1月4日于上海如期举办.ATEC移 ...
- 基于h5的跳一跳游戏的开发与实现_「南宁小程序开发」企业开发小程序有哪些好处?...
现如今微信小程序成为了许多企业推广自身产品的一个平台,为什么他们会选择小程序呢?小程序到底有哪些好处?接下来,南宁小程序开发公司--视点网络告诉您开发小程序的好处有哪些. 轻量性:平时APP的转化过程 ...
- 基于微信小程序开发的仿微信demo
(本文参考自github/liujians,地址:https://github.com/liujians/weApp) 作者声明: 基于微信小程序开发的仿微信demo 整合了ionic的样式库和we ...
- 小程序 | 基于WAMP的新闻网小程序开发(体验全栈式开发微信小程序)
之前学习微信小程序开发,主要是基于JS.WXML.WXSS的前端开发,对于后端技术不精的我也是使用了微信开发者工具中的云开发功能,但是今天突发奇想,特别想体验一下全栈式开发微信小程序,学习了一下基于W ...
- 基于Python Django框架后端的微信小程序开发
刚做完一个股票信息服务类的微信小程序(小程序名字"博股论基",大家有兴趣可以搜一下),也有一些心得,在这里记录一下开发过程,算是个开发笔记,同时也希望能给需要的同学一些帮助. -- ...
- 微信小程序开发工具结合腾讯云开发AI人脸识别和身份证识别——基于腾讯云开发者实验项目
微信小程序开发工具结合腾讯云开发AI人脸识别和身份证识别--基于腾讯云开发者实验项目 开通腾讯云相关权限(AI人脸识别,文字识别-身份证识别) 查看API密钥 部署微信小程序 成功演示 代码包 开通腾 ...
- 基于小程序云开发的在线答题小程序源码含答题分类答题记录错题集适合学习适合毕业设计使用
基于小程序云开发开发的在线答题小程序源码 核心功能: 1.答题分类 2.开始答题 3.答题评分 4.答题记录 5.错题集 部分界面截图: 如有疑问,可联系博主!
- 微信小程序|基于小程序+云开发制作一个菜谱小程序
今天吃什么?这是一个让强迫症左右为难的问题,跟随此文基于小程序+云开发制作一个菜谱小程序,根据现有食材一键生成菜谱,省心又省力. 一.小程序 1. 创建小程序
最新文章
- JavaScript事件使用指南
- c# bindingsource mysql,Navicat for MySQL 使用教程:在.NET中如何连接MySQL数据库
- djangoORM语句
- Missing URI template variable 'XXXX' for method parameter of type String
- github git.exe位置
- 感觉最近有多个机器人给吾博客评论
- oracle参数文件与启动过程
- matlab仿真高斯脉冲,高斯脉冲comsol仿真
- 计算机管理五大功能,操作系统五大管理功能包括哪些介绍大全
- 子域名劫持漏洞详解、挖掘和防护
- Centos7安装普罗米修斯(Prometheus)监控
- 分布式系统设计模式,你用过哪些?
- 3G门户Android面试题(2013年)
- python脚本下载百度或必应图片
- 中国移动光宽带 光猫 超级用户管理员账号密码
- 电气制图的首选?CAD还是EPLAN?
- Glide 渐变圆形边框实现
- MySQL中的自动增长
- c语言程序设计工资纳税系统,c语言程序设计,纳税工资系统(29页)-原创力文档...
- 流程定义和部署管理——流程定义列表