微信小程序｜使用小程序制作一个世界杯球员识别工具

news2024/10/1 3:28:14

    • 一、前言
    • 二、实现流程
    • 三、功能开发
    • 四、代码块

一、前言

四年一次的世界杯正在卡塔尔进行着，不同的社交圈也在疯狂的刷着世界杯的动态，来自全球各地的三十二支队伍的球员是否让你看的眼花缭乱呢？

在这里插入图片描述

当朋友跟你聊起昨晚那场比赛某某某球员的精彩表现，你却对这名球员的信息一无所知时，你也不想你的朋友一脸失望的看着你吧，为什么不制作一个简易的小工具帮助你快速认识球员信息呢。

二、实现流程

  1. 准备百度以及微信公众平台账号。
  2. 准备微信Web开发者工具。

三、功能开发

  1. 打开微信开发者工具，新建项目，依次选择不使用模板、不使用云服务。

在这里插入图片描述

  1. 在pages文件夹下面创建一个文件夹并新建对应的page文件。

在这里插入图片描述

  1. 注册百度开放平台账号
  1. 在控制台点击左侧菜单，选择产品服务，搜索图像识别
  1. 创建一个新的应用并存储好对应的API Key和Secret Key
  1. 应用创建好后，回到小程序所创建的page中，找到onLoad函数。

在这里插入图片描述

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },
  1. 在onLoad函数中将上面所创建的API Key以及Secret Key进行定义拼接，调用接口获取Access Token。
    let that = this;
    let grant_type = 'client_credentials';
    let client_id = '这里放你申请的ApiKey';
    let client_secret = '这里放你申请的Secret Key';
    wx.request({
      url: 'https://aip.baidubce.com/oauth/2.0/token?grant_type=' + grant_type + '&client_id=' + client_id + '&client_secret=' + client_secret,
      method: 'get',
      header: {
        'content-type': 'application/json'
      },
      success: function (res) {
        that.setData({
          token: res.data.access_token
        });
      }
    })
  1. 将代码进行保存编译，看一下Network的接口数据返回。如果API Key或者SecretKey填写错误接口调用都会失败，这时候需要重新检查是否正确。

在这里插入图片描述
在这里插入图片描述

  1. 接口正确返回如下，我们主要用到的是exprres_in 以及 access_token两个字段，一个是过期时间一个是token，在JS全局data中定义字段将其进行接收。

在这里插入图片描述

that.setData({
  token: res.data.access_token
});
  1. token能够正常获取后，接下来需要实现图片上传并转换base64的步骤。

在这里插入图片描述

<view class="containerBox">
  <view class="leftBtn" bindtap="loadImage">
    <image src="../../image/xj.png" class="btnImg"></image>
    球员照片
  </view>
  <view class="rightBtn" bindtap="identify">
    <image src="../../image/face.png" class="btnImg"></image>
    信息检测
  </view>
</view>
  1. 定义好页面上传图片的按钮后，在JS中实现对应的函数，这里需要用到chooseImage以及getFileSystemManager两个函数，实现效果图如下。

在这里插入图片描述

  //上传图片并转换
  loadImage() {
    let that = this;
    wx.chooseImage({
      count: 0,
      sizeType: ['original', 'compressed'], //原图 / 压缩
      sourceType: ['album', 'camera'], //相册 / 相机拍照模式
      success(res) {
        that.setData({
          reproduction: res.tempFilePaths[0]
        });
        //将图片转换为Base64格式
        wx.getFileSystemManager().readFile({
          filePath: res.tempFilePaths[0],
          encoding: 'base64',
          success(data) {
            let baseData = data.data; //'data:image/png;base64,' + data.data;
            that.setData({
              baseData: baseData
            });
          }
        });
      }
    })
  },

在这里插入图片描述

  1. 将转换后的图片数据进行存储，拼接到参数中，调用识别接口，这里只需要传转换后的图像数据过去即可。

在这里插入图片描述

 wx.request({
      url: 'https://aip.baidubce.com/rest/2.0/image-classify/v2/advanced_general?access_token=' + that.data.token,
      method: 'POST',
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      data: {image:that.data.baseData},
      success: function (identify) {
        console.log(identify);
      }
    })
  1. 将接口返回的数据进行输出，这个数组形式的result就是识别的结果。

在这里插入图片描述

  1. 将返回的结果定义到全局data并在页面进行展示，实现效果如下。

在这里插入图片描述

<view class="cu-list menu sm-border card-menu margin-top">
  <view class="cu-item arrow" wx:for="{{list}}">
    <view class="content">
      <text class="cuIcon-tagfill text-red"></text>
      <text class="text-grey">{{item.keyword}}</text>
    </view>
    <view class="action">
        <text class="text-grey text-sm">{{item.root}}</text>
      </view>
  </view>
</view>
  1. 这样就能迅速得到一个球员的信息了，再也不用担心有不认识球员的情况了，快拿去朋友面前显摆一下吧。

在这里插入图片描述

四、代码块

WXML部分

<view class="containerBox">
  <view class="leftBtn" bindtap="loadImage">
    <image src="../../image/xj.png" class="btnImg"></image>
    球员照片
  </view>
  <view class="rightBtn" bindtap="identify">
    <image src="../../image/face.png" class="btnImg"></image>
    信息检测
  </view>
</view>
<view>
  <image src="{{reproduction}}" class="showImg" mode="widthFix"></image>
</view>

<view class="cu-list menu sm-border card-menu margin-top">
  <view class="cu-item arrow" wx:for="{{list}}">
    <view class="content">
      <text class="cuIcon-tagfill text-red"></text>
      <text class="text-grey">{{item.keyword}}</text>
    </view>
    <view class="action">
        <text class="text-grey text-sm">{{item.root}}</text>
      </view>
  </view>
</view>

WXSS部分

/* pages/pubu/index.wxss */
.containerBox{
  width:750rpx;
  display:flex;
  height:62rpx;
  margin-top:20rpx;
}
.leftBtn{
  display: flex;
  width:181rpx;
  height:62rpx;
  color:white;
  border:1rpx solid #4FAFF2;
  background:#4FAFF2;
  border-radius:10rpx;
  text-align: center;
  line-height:62rpx;
  font-size:28rpx;
  margin-left: 108rpx;
}
.rightBtn{
  display: flex;
  width:181rpx;
  height:62rpx;
  color:white;
  border:1rpx solid #4FAFF2;
  border-radius:10rpx;
  text-align: center;
  line-height:62rpx;
  font-size:28rpx;
  margin-left: 172rpx;
  background:#4FAFF2;
}
.btnImg{
  width:50rpx;height:50rpx;margin-top:6rpx;margin-left:6rpx;
}
.showImg{
  width:600rpx;
  height:400rpx;
  margin-left:75rpx;
  margin-top:50rpx;
  border-radius:10rpx;
}
.resultImg{
  width:300rpx;
  height:300rpx;
  margin-left:50rpx;
  margin-top:25rpx;
  border-radius:50%;
}
.result{
  margin-top:20rpx;
}
.resultTitle{
  margin-left:75rpx;
  margin-top:10rpx;
  color:#2B79F5;
  font-size:25rpx;
}
.productTableTr{
  height: 80rpx;line-height: 80rpx;border-bottom: 5rpx solid #F8F8F8;display:flex;
}
.leftTr{
  width: 583rpx;height: 80rpx;line-height: 80rpx;
}
.rightTr{
  width: 119rpx;height: 80rpx;line-height: 80rpx;color: #FF2525;font-size: 26rpx;
}
.leftTrText{
  color: #2B79F5;font-size: 28rpx;margin-left: 15rpx;width: 283rpx;
}
.productDetailTable{
  width: 702rpx;margin-left: 24rpx;border:5rpx solid #F8F8F8;border-radius: 6rpx;
}
.copyBtn{
  color:white;background:#2B79F5;border-radius:8rpx;width:100rpx;height:50rpx;margin-top:15rpx;
}

JS部分

 wx.request({
      url: 'https://aip.baidubce.com/rest/2.0/image-classify/v2/advanced_general?access_token=' + that.data.token,
      method: 'POST',
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      data: {image:that.data.baseData},
      success: function (identify) {
        console.log(identify);
        that.setData({
          list:identify.data.result
        });
      }
    })

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/54833.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

WPS中配置MathType及mathtype实现论文公式一键改大小

WPS中配置MathType及mathtype实现论文公式一键改大小

目录 0 概述 1 WPS中配置MathType 1.1 步骤1&#xff1a; 1.2 步骤2&#xff1a; 1.3 步骤3&#xff1a; 1.4 步骤4&#xff1a; 1.5 步骤5&#xff1a; 2 mathtype实现论文公式一键改大小 2.1 步骤1&#xff1a; 2.2 步骤2&#xff1a; 2.3 步骤3&#xff1a; 2.4…
阅读更多...
大数定律与中心极限定理

大数定律与中心极限定理

给大家讲个有趣的故事 明天概统小测哦可惜了 我的智商还停留在小学时代可惜了&#xff0c;我需要努力学习Physice Doctor in FutureChebyshev 不等式 &#xff08;弱&#xff09;大数定律 Markov 大数定律 Chebyshev 大数定律 独立同分布大数定律 Bernoulli 大数定律 Khinchin …
阅读更多...
npm打包整个过程

npm打包整个过程

将自己写的代码包上传到npm&#xff0c; 方便后续下载安装&#xff0c; 步骤如下&#xff1a; 上传 打开npm官方网站&#xff1a; www.npmjs.com; 进行注册 注册需要用户名&#xff0c;密码和邮箱&#xff0c; 当注册完成后需打开邮箱进行验证&#xff08;邮箱不验证无法上传&…
阅读更多...
JUC系列(九) CAS 与锁的理解

JUC系列(九) CAS 与锁的理解

&#x1f4e3; &#x1f4e3; &#x1f4e3; &#x1f4e2;&#x1f4e2;&#x1f4e2; ☀️☀️你好啊&#xff01;小伙伴&#xff0c;我是小冷。是一个兴趣驱动自学练习两年半的的Java工程师。 &#x1f4d2; 一位十分喜欢将知识分享出来的Java博主⭐️⭐️⭐️&#xff0c;擅…
阅读更多...
DZ-51/220【中间继电器】

DZ-51/220【中间继电器】

系列型号 DZ-51中间继电器; DZ-52中间继电器; DZ-53中间继电器; DZ-54中间继电器; JY-16A中间继电器; 一、用途 DZ-51/220;DZ-51/400中间继电器​ (以下简称继电器)用于自动控制装置中&#xff0c;以扩大被控制的电路和提高接通能力。 二、主要技术参数 额定电压&#xff1a;D…
阅读更多...
Spring(存储Bean对象五大类注解,获取Bean对象三种注入方式)

Spring(存储Bean对象五大类注解,获取Bean对象三种注入方式)

目录 1. 先进行配置扫描路径 2. 存储 Bean 对象 ( 添加注解存储 Bean 对象) 2.1 Controller [控制器存储] 2.2 Service [服务存储] 2.3 Repository [仓库存储] 2.4 Configuration [配置存储] 2.5 Component [组件存储] 2.6 五大类注解的作用和关系 2.7 Bean的命名规则…
阅读更多...
基于文化算法优化的神经网络预测研究（Matlab代码实现）

基于文化算法优化的神经网络预测研究（Matlab代码实现）

目录 1 文化优化算法 2 人工神经网络 3 基于文化算法优化的神经网络预测研究&#xff08;Matlab代码实现&#xff09;运行结果 4 参考文献 5 Matlab代码实现 1 文化优化算法 大自然里的各种生物在生存环境中相互竞争&#xff0c;优胜劣汰&#xff0c;不断进化&#xff0…
阅读更多...
股票编程交易接口怎样自动设置止损？

股票编程交易接口怎样自动设置止损？

目前随着国内二级股市已处于相对较高的水平&#xff0c;但是对于高净值的用户来说&#xff0c;在量化投资市场上使用股票编程交易接口系统上具有低波动性和自动交易的定量对冲投资模型体系&#xff0c;包括了一些高性价比、大型基金和长期投资的资产品种&#xff0c;所以大家在…
阅读更多...
瑞吉外卖-B站最火的新手入门SpringBoot+Mybatis+Redis项目详细教程来了

瑞吉外卖-B站最火的新手入门SpringBoot+Mybatis+Redis项目详细教程来了

&#x1f531;项目介绍 项目地址 GitHub&#xff1a;https://github.com/codermast/Takeout-food 对你有用的话&#xff0c;希望能给项目点个Star&#xff0c;非常感谢。 对于项目的任何问题&#xff0c;或者你在本地部署时遇到的无法解决的问题&#xff0c;都可以提交issues…
阅读更多...
迭代器模式

迭代器模式

文章目录思考迭代器模式1.迭代器模式的本质2.何时选用迭代器模式3.优缺点4.实现手动实现迭代器模式java迭代器模式思考迭代器模式 迭代器模式(Iterator Pattern)是常用的设计模式&#xff0c;属于行为型模式。如果我们的集合元素是用不同的方式实现的&#xff0c;有数组&#…
阅读更多...
利用EasyDL制作一个简单的图片识别小项目

利用EasyDL制作一个简单的图片识别小项目

主要是利用EasyDL制作一个简单的傻瓜式猫狗图片识别&#xff0c;利用EasyDL&#xff0c;只需要几步简单的点击即可 *主要的步骤&#xff1a; 1.准备数据 2.训练模型 3.部署 4.H5 * 1.首先创建两个文件夹cat和dog分别搜集至少20张以上的猫和狗的图片&#xff08;如果不足20张&…
阅读更多...
【High 翻天】Higer-order Networks with Battiston Federico （1）

【High 翻天】Higer-order Networks with Battiston Federico （1）

目录前言高阶网络的表示高阶相互作用的初等表示表示之间的关系总结前言 Ginestra Bianconi 的一篇综述1和一本书2展开的故事。 书还没有开始看&#xff0c;先看看综述吧。综述提供了一个关于超越成对交互的网络新兴领域的概述。 讨论了高阶网络的表示&#xff0c;主要是其中…
阅读更多...
HBase Shell 基本操作

HBase Shell 基本操作

首先确保你的hbase集群已经开启 进入 HBase 客户端命令行 namespace 使用help查看命令用法&#xff0c;并创建命名空间 查看所有命名空间 DDL 在 bigdata 命名空间中创建表格 student&#xff0c;两个列族。info 列族数据维护的版本数为 5 个&#xff0c; 如果 VERSIONS …
阅读更多...
Arduino UNO通过SPI串行方式驱动LCD12864液晶屏

Arduino UNO通过SPI串行方式驱动LCD12864液晶屏

LCD12864液晶屏简介 LCD12864带中文字库图形点阵式液晶显示器&#xff0c;可配合各种单片机可完成中文汉字、英文字符和图形显示&#xff0c;可构成全中文人机交互图形界面&#xff0c;模块具有功耗低、显示内容丰富等特点而应用广泛。它是利用液晶经过处理后能改变光线的传播…
阅读更多...
前端面试八股文（详细版）—上

前端面试八股文（详细版）—上

本文将详细讲解 HTML 、CSS 、JavaScript 、计算机网络知识等方面的内容&#xff0c;Vue 、React 、git 、项目开发实例等内容放在下篇&#xff0c;预祝各位成功上岸&#xff01; 第一板块&#xff1a;JavaScript ES6 新增内容 1、模板字符串 变量名写在 ${} 中&#xff0c;$…
阅读更多...
可用性测试的理解

可用性测试的理解

可用性测试是通过观察有代表性的用户&#xff0c;完成产品的典型任务&#xff0c;从而界定出可用性问题并解决的过程。通俗地讲就是“观察用户使用产品”。 可用性测试到底测的什么? a 有效性(独立完成任务的比例) b 完成任务的时间 c 满意度(用户主观评价操作难易/好感/是否再…
阅读更多...
回归预测 | MATLAB实现贝叶斯优化门控循环单元(BO-GRU)多输入单输出

回归预测 | MATLAB实现贝叶斯优化门控循环单元(BO-GRU)多输入单输出

回归预测 | MATLAB实现贝叶斯优化门控循环单元(BO-GRU)多输入单输出 目录回归预测 | MATLAB实现贝叶斯优化门控循环单元(BO-GRU)多输入单输出基本介绍背景回顾模型介绍程序设计学习总结参考资料致谢基本介绍 本次运行测试环境MATLAB2020b&#xff1b; 本次预测基本任务是回归&a…
阅读更多...
【JavaEE】JavaScript（基础语法）2

【JavaEE】JavaScript（基础语法）2

努力经营当下&#xff0c;直至未来明朗&#xff01; 文章目录前言四、【运算符】五、条件、三元、switch、循环语句六、数组七、函数八、 对象THINK前言 一个人最大的痛苦来自于对自己无能的愤怒&#xff01; Hi&#xff0c;这里依旧是秃头宝贝儿&#xff01; 本文依旧是介绍…
阅读更多...
win10录屏功能怎么打开，详细图文教学，轻松学会

win10录屏功能怎么打开，详细图文教学，轻松学会

在生活中&#xff0c;有不少人的电脑&#xff0c;都是WIN10系统&#xff0c;在学习工作或者娱乐的过程中想要录下视频&#xff0c;就需要使用win10录屏功能。Win10录屏功能怎么打开&#xff1f;Windows自带的屏幕录制功能如何使用&#xff1f;不要着急&#xff0c;今天小编将向…
阅读更多...
尚医通-微信支付

尚医通-微信支付

流程梳理 依赖和工具类 <dependency><groupId>com.github.wxpay</groupId><artifactId>wxpay-sdk</artifactId><version>0.0.3</version> </dependency><dependency><groupId>com.example</groupId><ar…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023