一款小程序的诞生

开局一张图，故事全靠编

在某次逛论坛的时候,看到帖子下方有这样的留言;

当时刚好也想做个小程序练练手，为避免重复造轮子先去微信搜索也没有相关的小程序，于是乎撸起袖子就干了;

经过域名备案和小程序审核，一款简单的小程序就诞生了;

技术实现思路

废话就不多少了,下面大概讲下实现过程和遇到的相关难点;

总的来说分为下面几点:

-获取大量图片数据

-解析图片中文字作为搜索关键字

-将图片上传图床进行保存

-相关字段存入数据库并搭建后台服务提供Api

-小程序搭建前台页面展示

-部署相关

1.如何获取图片数据

关于获取图片数据,相信大家第一反应当然是用爬虫了啦。说到爬虫大家肯定想到python啦。不错，用python当然没有问题，但是抱着前端一统天下的目的，我决定用node来爬取数据。

puppteer是一款google开源的一款无头浏览器，可以用来模拟浏览器一系列操作，很好很强大。

// 下面代码表示的是将某个页面进行截图保存着本地。

constpuppeteer=require('puppeteer');

(async()=>{

constbrowser=awaitpuppeteer.launch();

constpage=awaitbrowser.newPage();

awaitpage.goto('https://example.com');

awaitpage.screenshot({path:'example.png'});

awaitbrowser.close();

})();

总之，我是通过它获取数据，大家可以去github上看它的api进行学习，这里不展开讲了。

2.解析图片中的文字

图片获取回来了，要怎么获取图片中的文字呢？我使用的百度的AI开发平台文字识别功能。

我用的是免费的解析接口，所以我看了有些可能没有解析出来，但是90%可以正常解析

百度上也有各种语言的api接口，我这里列出的Node的调用方式，这里也不做多叙述了。

// 调用通用文字识别, 图片参数为远程url图片

varclient=newAipOcrClient(APP_ID,API_KEY,SECRET_KEY);

module.exports=functiongetWord(url){

varurl="xxxxx";

letdata;

client.generalBasicUrl(url).then(function(result) {

data=JSON.stringify(result);

returndata;

}).catch(function(err) {

// 如果发生网络错误

console.log(err);

});

}

3.将图片上传图床进行保存

单单爬取回来的图片链接可能一时有用，过几天也许就失效了，所以最有效的方式将图片保存到图床上去。可以选择的图床有很多，我这里选择的七牛云进行图片的保存。

当然了七牛云也有一系列的api可以调用，这样你就可以将爬回来的图片，通过百度解析拿到文字，再通过七牛云上传拿到url，如此一来，你就能获取图片的相关信息了。

constcfg=newqiniu.conf.Config()

varclient=newqiniu.rs.BucketManager(mac,cfg);

module.exports=uploadToQiniu=async(url,key)=>{

returnnewPromise((resolve,reject)=>{

client.fetch(url,bucket,key, (err,respBody,respInfo)=>{

if(err) {

reject(err);

}else{

if(respInfo.statusCode==200) {

resolve({key})

}else{

reject(err);

}

}

});

})

}

4. 相关字段存入数据库并搭建后台服务提供Api

前面最重要的数据准备工作做好了，后面的话就相对简单了

后端这一块我选用的是Koa+MongoDB的组合，为小程序提供Api接口

这一块的知识网上一搜一大片,我也不想重复讲多一遍，我就简单介绍下我在项目用到一个库--ioredis

ioredis是一款基于node的redis客户端，我为了防止恶意请求或者请求过于频繁的操作，就对单个ip的请求进行访问限制，可以间接的提高服务器的性能,相关的简单代码如下：

app.use(ratelimit({

db:newRedis(),

duration:5000,

errorMessage: {

error:'sometimes you just need to slow down'

},

id: (ctx)=>ctx.ip,

headers: {

remaining:'Rate-Limit-Remaining',

reset:'Rate-Limit-Reset',

total:'Rate-Limit-Total'

},

max:2,

disableHeader:true,

}));

5. 小程序搭建前台页面展示

小程序这块遇到的问题主要是不同尺寸的图片如何自适应到不同的尺寸的手机当中。

还好微信提供了一些的api，可以先获取手机的屏幕宽度，然后计算图片的宽高比，通过这两者就可以得出图片的该有高度。具体代码如下

// 获取图片真实宽高

varpicWidth=e.detail.width,

picHeight=e.detail.height,

// 获取图片比例

ratio=picWidth/picHeight,

// 获取图片所在索引

// 计算真实高度

// 获取图片高度数组

image[idx]={

height:viewHeight

}

this.setData({

images:image,

})

顺带一提，由于小程序无法直接操作dom，本来找了一个typed的插件不能用，于是乎自己手写，然后写着写着发现用promise还得用递归，继而想引入async/await，由于小程序暂不支持ES7,网上也有教程

https://www.jianshu.com/p/270f129e5af3

6.部署相关

部署这一块只针对第一次碰服务器的前端来说，注意的点：

-购买域名并且申请备案

-域名解析和申请Https

-安装Nginx和Node,MongoDB等服务

-配置Https[自行部署小程序](https://github.com/tencentyun/wafer2-startup/wiki/%E8%87%AA%E8%A1%8C%E9%83%A8%E7%BD%B2)

-配置七牛云CDN加速

总结

做完回过头来看，其实真正的难点是没有的，但作为初级前端工程师来说，业余时间我觉得有必要去实现一款属于自己的小程序，提高自己的编程水平，也有利于拓宽自己的广度和深度。关于源码，后续有空整理了再发出来吧，写的乱没脸见人。