小程序现在可以说非常火爆了,流量入口非常多。尤其是出了流量主功能以后,普通开发者也能在自己的个人小程序里植入官方广告来获取收入。程序员想赚点外快再合适不过了。今天教大家写一个颜值打分的小程序,利用现成的免费接口,做到0成本上线。
所用技术:多端统一框架Taro. 写起来和react是一样的。官方网站在这:https://taro-docs.jd.com/taro/docs/README.html
有小伙伴不会react但是会vue怎么办,不影响看今天的教程。会Vue推荐使用mpvue框架,vue react都不会可以尝试官方的wepy框架。核心的代码都是一样的。
前置
前置环境: node,小程序个人号,微信开发者工具下载。face++账号
微信开发者工具下载官方地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
face++账号注册地址:https://console.faceplusplus.com.cn/register
小程序注册
小程序个人注册比较简单,进入 https://mp.weixin.qq.com/ 选择小程序注册,注意资质选“个人”
face++准备
face++账号注册号以后进入控制台 https://console.faceplusplus.com.cn/dashboard,新建一个应用,选择“试用”。(这里亲测试用没有时间限制,而且也是免费的)。建好以后把apikey 和 apisecret 都复制出来备用。
项目搭建
根据Taro文档,首先安装Taro cli 以下三种方式选一个就行。推荐cnpm
# 使用 npm 安装 CLI
$ npm install -g @tarojs/cli
# OR 使用 yarn 安装 CLI
$ yarn global add @tarojs/cli
# OR 安装了 cnpm,使用 cnpm 安装 CLI
$ cnpm install -g @tarojs/cli
安装执行完以后,进入到想要新建项目的文件夹,执行初始化命令.这里的myApp就是项目名
taro init myApp
在命令行逐步选择就可以。这里模板我选择了mobx,如果不会mobx,选择默认就行,mobx完全可以不用
建好项目以后,项目的根目录下修改project.config.json文件的appid字段。登陆https://mp.weixin.qq.com,找到开发设置,复制appid到project.config.json
在下面服务器域名里,修改 request合法域名 uploadFile合法域名,添加一个 https://api-cn.faceplusplus.com
项目开发
首先需求比较简单就一句话概括了:用户上传照片后获取颜值评分。
原型图:
这里为了避免篇幅过长,放关键性代码。
首先一个按钮,用户可以点击上传
<Button className="btn" onClick={()=>{this.chooseImg()}}>
<Text className="btn-text">测颜值</Text>
</Button>
点击事件里获取到图片的临时目录
chooseImg=()=>{
let {faceStore} = this.props
wx.chooseImage({
count:1,
sizeType:['compressed'],
sourceType:['album','camera'],
success:function(res){
var tempFilePaths = res.tempFilePaths
faceStore.currentImg=tempFilePaths
faceStore.detectFace(tempFilePaths[0])
},
})
}
拿到这个临时目录,上传到face++ api获取结果
Taro.uploadFile({
url: config.faceDetectUrl,
filePath,
name: 'image_file',
formData: {
"api_key": config.faceApiKey,
"api_secret": config.faceApiSecret,
"return_attributes": "beauty,age,gender,skinstatus,emotion",
"beauty_score_min":"40"
},
success: (res) => {
Taro.hideLoading()
if (res.statusCode == '200') {
let data = JSON.parse(res.data)
console.log(data)
} else {
}
console.log(res)
},
complete(){
Taro.hideLoading()
}
})
里面的地址在这里 faceApiKey faceApiSecret是刚才face++控制台那里复制过来的
export const faceDetectUrl="https://api-cn.faceplusplus.com/facepp/v3/detect"
export const faceApiKey='0Om-'
export const faceApiSecret="RKF9GT_eVDUn-"
拿到data以后,把结果里面的beauty字段解析一下,在前端展示出来就可以了。
演示项目等我今天晚上回家上传到git给到大家
这里是我上线的小程序,大家可以参考一下,有帮助的话顺便点点广告啦
有问题或者小程序感兴趣加我微信,一起交流