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

admin • 2022-12-11 20:55 • 移动开发

一、前言

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

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

二、实现流程

准备百度以及微信公众平台账号。

准备微信Web开发者工具。

三、功能开发

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

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

注册百度开放平台账号

在控制台点击左侧菜单，选择产品服务，搜索图像识别

创建一个新的应用并存储好对应的API Key和Secret Key

应用创建好后，回到小程序所创建的page中，找到onLoad函数。

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

  },

在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
        });
      }
    })

将代码进行保存编译，看一下Network的接口数据返回。如果API Key或者SecretKey填写错误接口调用都会失败，这时候需要重新检查是否正确。

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

that.setData({
  token: res.data.access_token
});

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>

定义好页面上传图片的按钮后，在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
            });
          }
        });
      }
    })
  },

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

 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);
      }
    })

将接口返回的数据进行输出，这个数组形式的result就是识别的结果。

将返回的结果定义到全局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>

这样就能迅速得到一个球员的信息了，再也不用担心有不认识球员的情况了，快拿去朋友面前显摆一下吧。

四、代码块

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
        });
      }
    })

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

THE END

原力计划图像识别小程序微信小程序程序人生

二维码

)">

Python小游戏自己动手编写，你能写出几个（分享版）

< <上一篇

)">

结构方程模型调整

下一篇>>

搜索内容

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

一、前言

二、实现流程

三、功能开发

四、代码块

最新文章

分类

标签云