手把手教你写一个没有服务器的颜值打分小程序，可直接上线

最新推荐文章于 2022-01-21 12:56:56 发布

JesseYang_

最新推荐文章于 2022-01-21 12:56:56 发布

阅读量2.2k

点赞数

分类专栏：小程序文章标签：小程序

本文链接：https://blog.csdn.net/weixin_43168260/article/details/100878661

版权

小程序专栏收录该内容

1 篇文章 0 订阅

订阅专栏

小程序现在可以说非常火爆了，流量入口非常多。尤其是出了流量主功能以后，普通开发者也能在自己的个人小程序里植入官方广告来获取收入。程序员想赚点外快再合适不过了。今天教大家写一个颜值打分的小程序，利用现成的免费接口，做到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给到大家

这里是我上线的小程序，大家可以参考一下，有帮助的话顺便点点广告啦
在这里插入图片描述