前言
2017年8月,我曾开发过一个小程序,叫懂你觅书
(谐音梗扣钱)。用户可以通过这个小程序管理自己家的书架/书房,然后通过图书的品位去匹配和你有相同喜好的人,并且在地图上显示出来。
当时开发完后在某乎疯狂自我推荐,机缘巧合之下还认识了愿意给这个产品做天使投资的投资人
这是当时写的BP的一部分
不过,由于没想清楚商业闭环,盈利模式,后来决定不继续做,我把投资款还给投资人了。
2017年共享经济很火,所以很多人在共享这事儿上动脑筋,也包括我。现在事实证明当时大部分的共享经济概念都死了。咱们国内图书价格非常便宜,共享借书连物流成本都负担不起,商业计划中的社交体系短期内也不可能搭建起来。
当时整个产品设计,策划,前端开发,后端PHP都是我一人搞完的...最近在深入学习uniCloud,所以把这个创意重新用uni-app
+uniCloud
复活一下,反正云开发也不需要什么服务器成本。
不想看啰嗦长文的可直接跳到文末下载源码
uniCloud云开发
事先声明,本人没有恰uniCloud
的饭,但uniCloud
确实好用,阿里云给的免费额度也高。我已经多次使用uniCloud
零成本搭了好几个应用了。甚至后端用uniCloud
,前端用Flutter
的事儿我也干过。
云开发的好处已经不用多讲了吧?FAAS = Functions as a Service
有了云开发,我们开发者只需要专注于业务逻辑代码的编写,以上那些和业务无关的知识都不需要掌握了。原先开发一个产品的业务流程也发生了很大的变化
传统流程
基于云开发的流程
uniCloud
提供以下这些服务,但这些基础服务其实是由阿里云
和腾讯云
提供的,使用前你要选择用哪个服务商。
在这里直接推荐大家使用
uniCloud
时选择阿里云,因为腾讯真抠啊~那点免费额度还是算了吧,不过选腾讯云的唯一好处是腾讯系生态可以免鉴权
获取微信用户信息
获取openid
uni.login({
provider:"weixin",
success:(res)=>{
uniCloud.callFunction({
name:"login",
data:{
code:res.code
}
})
}
})
复制代码
通过小程序后台获取到的AppId
和AppSecret
,在云函数里调用微信服务端APIcode2session
const { code } = event;
const res = await uniCloud.httpclient.request(
"https://api.weixin.qq.com/sns/jscode2session?appid="+appId+"&secret="+appSecret+"&js_code="+code+"&grant_type=authorization_code",
{
dataType:"json"
}
)
const openid = res.data.openid;
复制代码
这样我们就拿到了微信用户的openid
,已经可以用来建立识别用户,建立用户系统了。后续所有用户产品的数据,都会和这个openid
关联起来。
JWT实现用户凭证
在云开发里没有Session这回事,所以就不能使用Session那套机制来实现用户凭证
不过,有更先进的机制为我们所用。
- 服务端将用户的id或需要携带的信息加密成Token,加密使用的密钥仅在服务端保存。
- 通过登录接口返回给前端,前端自己缓存起来。
- 后续所有请求都携带这个
Token
作为参数,云函数里获取Token解密,并检查有效性
安装jsonwebtoken
依赖
npm install jsonwebtoken
复制代码
使用jwt签名,我这里就是为了不直接暴露openid,密钥自己随便写一个字符串就行,这里图省事儿,直接用了小程序的appSecret
const jwt = require('jsonwebtoken');
//生成token
//jwt.sign(携带数据,密钥,过期时间等选项);
jwt.sign({openid:openid},appSecret,{expiresIn:60*60*24});
复制代码
前端封装了网络请求的api,只要发现有缓存的token,后续请求都会自动携带。需要对用户进行校验的接口也通通会校验token的有效性,然后解密取出openid用于用户的数据操作。
jwt.verify(token,appSecret);
//校验成功的话会解密出 {openid:openid}
复制代码
获取昵称头像
小程序SDK也一直在迭代,今年很多小程序里的用户昵称都变成了微信用户
对不对,就是因为这个接口改掉了。
过去使用的getUserInfo
方法,改为使用getUserProfile
,我们就能获得微信用户的昵称头像等数据了。只是这个api每次都会有弹窗提示用户
uni.getUserProfile({
desc: '用于完善会员资料',//必填参数
success: (res) => {
res.userInfo;
}
})
复制代码
我个人的做法是先通过login换取openid。然后用户会看到自己没有昵称和头像,通过按钮提示用户同步微信用户信息。点击后调用getUserProfile获取信息显示并更新到用户数据库中。
//云函数取参
const { userInfo,token } = event;
//获取数据库对象
const db = uniCloud.database();
//校验并解密token
const payload = verifyToken(token);
//更新数据库中指定openid的用户信息
const dbRes = await db.collection("users").where({
openid:payload.openid
}).update({
nickName:userInfo.nickName,
avatarUrl:userInfo.avatarUrl,
gender:userInfo.gender,
country:userInfo.country,
province:userInfo.province,
city:userInfo.city
});
复制代码
云数据库操作
有了上面基于
jsonwebtoken
的用户凭证后,接下来的业务基本就是对其他数据集合的CRUD了,创建书架,上传图书,获取书架列表,获取图书列表,删除书架,删除图书...
书房/书架数据库
const payload = event.token?verifyToken(event.token):null;
const action = event.action;
let dbRes;
if(action=="create"){
//将书房的名字提交至内容安全审核
const res = await msgSecCheck(payload.openid,event.name);
if(res.result.suggest!="pass"){
return {err:1,msg:"内容不安全"};
}
//安全内容则写入数据库,建立书架数据
dbRes = await db.collection("bookshelfs").add({
owner:payload.openid,
name:event.name,
address:event.address,
geopoint:new db.Geo.Point(event.longitude, event.latitude),
totalbook:0
})
return dbRes;
}
复制代码
创建书房时,由于书房名称由用户自定义,并且其他用户可见。这就叫UGC的内容,必须通过内容安全审核
...
uniCloud里实现内容安全审查
const res = await uniCloud.httpclient.request("https://api.weixin.qq.com/wxa/msg_sec_check?access_token="+access_token,{
method:"POST",
dataType:"json",
headers:{
"Content-Type":"application/json"
},
data:{
version:"2",
openid:"内容产出者的openid",
scene:2,
content:"要审查的文本内容"
}
});
复制代码
我们的书架需要在地图上显示,所以必须让用户选择并提交一个地理位置。而云数据库还可以非常方便的添加基于地理位置的索引,让我们可以通过地理位置相关的查询方法来罗列书架数据
new db.Geo.Point(经度, 纬度)
复制代码
获取书房列表
和身份有关的数据都会通过token的校验获取openid
来进行
else if(action=="listmy"){
dbRes = await db.collection('bookshelfs').where({
owner:dbCmd.eq(payload.openid)
})
.orderBy("_id","desc")
.limit(10)
.get()
}
复制代码
寻找距离我最近的书房
else if(action=="listbygeo"){
dbRes = await db.collection('bookshelfs').field({owner:false}).where({
geopoint:dbCmd.geoNear({
geometry: new db.Geo.Point(event.longitude, event.latitude),
maxDistance: 3000,//单位米
minDistance: 0
})
})
.limit(100)//做个数量限制
.get()
}
复制代码
修改书房
else if(action=="update"){
const res = await msgSecCheck(payload.openid,event.name);
if(res.result.suggest!="pass"){
return {err:1,msg:"内容不安全"};
}
dbRes = await db.collection("bookshelfs").where({
"_id":dbCmd.eq(event._id),
"owner":dbCmd.eq(payload.openid)
}).limit(1).update({
name:event.name,
address:event.address,
geopoint:new db.Geo.Point(event.longitude, event.latitude)
})
return dbRes;
}
复制代码
删除书房
else if(action=="delete"){
dbRes = await db.collection("bookshelfs").where({
"_id":dbCmd.eq(event._id),
"owner":dbCmd.eq(payload.openid)
}).remove();
}
复制代码
图书数据库
通过ISBN爬取豆瓣图书信息
首先通过scanCode
api来扫描图书背后的条码,获取到条码信息后通过云函数向某瓣爬取图书标题和封面
let { isbn } = event;
let res = await uniCloud.httpclient.request("https://search.douban.com/book/subject_search?search_text="+isbn+"&cat=1001");
let reg = /window\.__DATA__ = "(.*)"/;
if(reg.test(res.data)){
let bookdata=RegExp.$1;//这是数据是被加密的,需要解密
}
复制代码
爬取到的信息需要解密,本文就不讲述解密过程了,小伙伴们可以自行看源码。
这个爬虫违法吗?我认为不违法,因为封面,标题信息属于公开信息,不从某瓣爬,我们也可以从别的地方获取,比如图书电商,比如付费API等。另外我们并没有收集某瓣对于图书的评分,评论等这些某瓣独有的数据。
不过有其他意见的小伙伴可以在评论区帮我普普法
建立自己的ISBN库
- 封面图上传至云存储
let coverImage = await uniCloud.httpclient.request(data.cover_url);
let uploadResult = await uniCloud.uploadFile({
cloudPath:isbn+".jpg",
fileContent:coverImage.data
})
复制代码
- 自己的ISBN数据库
let resData = {
isbn:isbn,
title:data.title,//图书标题
cover_url:uploadResult.fileID,//封面在云存储的url地址
abstract:data.abstract//图书附加信息
}
dbResult = await db.collection("isbnlib").add(resData);
复制代码
那么有了自己的ISBN数据库,下次再有用户扫描相同的图书时,信息就不用再去爬取了,直接从自己的ISBN数据库返回,这也是一种利用众包
的机制来建立数据库的方法
let dbResult = await db.collection("isbnlib").limit(1).where({
isbn:isbn
}).get();
//数据库里已有相同ISBN的话,则直接返回数据库里的信息
if(dbResult.affectedDocs>0){
return dbResult.data[0];
}
复制代码
书架图书数据库
放到书架上的图书,我们新建一个books的表来管理,并绑定书架id
和isbn
- 从ISBN库获取图书信息
const bookInfo = await db.collection("isbnlib").doc(event.isbnid).get();
复制代码
- 建立图书数据
绑定书架id,isbnid,openid等,确定图书是谁的,在哪个书架里。
dbRes = await db.collection("books").add({
owner:payload.openid,
shelfid:event.shelfid,
title:bookInfo.data[0].title,
cover_url:bookInfo.data[0].cover_url,
isbn:bookInfo.data[0].isbn,
isbnid:event.isbnid,
createtime:now,
updatetime:now,
});
复制代码
- 书架里图书总数字段更新
await db.collection("bookshelfs").where({
owner:payload.openid,
_id:event.shelfid,
}).update({
totalbook:dbCmd.inc(1)//inc就是在当前字段的数值基础上增加
})
return dbRes;
复制代码
- 图书的搜索
dbRes = await db.collection('isbnlib')
.where({
title=new RegExp(event.keyword, 'i')
})
.orderBy("_id","desc")
.orderBy("updatetime","desc")
.limit(12)
.get();
复制代码
生成书架海报
利用canvas
生成海报,canvas里的绘制细节大家看项目源码吧。这里我主要使用小程序码接口来获取带有参数的小程序码。
生成小程序码的API一共有三种,其中接口A和接口C是数量有限的,最多只能生成10w个。万一这个小程序用户量大了,书房书架数量超过10w个,那就不能用接口A了。所以我们要使用接口B
,数量无限。
- 云函数调用wxacode接口
const access_token = await getAccessToken();
const res = await uniCloud.httpclient.request("https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token="+access_token,{
method:"POST",
headers:{
"Content-Type":"application/json"
},
data:{
scene:"微信扫码后小程序里可以获取到的信息",
page:"扫码后进入的小程序页面"
}
});
复制代码
但这个接口B的局限是scene
字段最长32个字符,参数名只能叫scene。并且该接口只能用于已发布的小程序。
结语
这是我2017年共享图书项目的核心技术部分,用uniCloud重新实现,本文像记流水账一般把核心过程给分享了出来,阅读体验可能不佳,不过分享不易,还请大家多多点赞支持。
如果你喜欢大帅的教程,请收藏,点赞,关注吧
- 哔哩哔哩:
大帅老猿
- 微信公众号:
大帅老猿