【使用攻略】之【地标识别】-快速接入小程序

致所有开发者: 我们是开发者 不是 程序员。开发者是最具活力的创新者,是勤恳的践行者,是敏捷的困难解决者,是胸怀梦想,不忘初心的 又具有开发能力的一群人。

前期准备

百度云账号(有账号请忽略注册)

https://passport.baidu.com/v2/?reg

创建一个图像识别应用(已创建请忽略)

https://console.bce.baidu.com/ai/?fromai=1#/ai/imagerecognition/overview/index

创建一个微信小程序账号(有账号请忽略注册)

https://mp.weixin.qq.com/cgi-bin/registermidpage?action=index&lang=zh_CN&token=

微信小程序开发工具安装

https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/getstart.html#安装开发工具

创建应用获取相关信息

应用名称

名字方便自己区分应用使用即可,注意查看是否勾选地标识别

应用描述

简述一下应用场景即可

获取应用相关信息

AppID、API Key、Secret Key三个值保存备用。最后一值不要随便泄露哦。

注册微信小程序

选择微信小程序填写信息激活即可(开发者们注册个人即可)

开始码起来

开发文档

需要简单阅读一下哦。不会编程的也要看一下哦

http://ai.baidu.com/docs#/ImageClassify-API/2c607890

可以看到有一个URL参数,access_token的获取官方文档 http://ai.baidu.com/docs#/Auth/75d80ed1

快速获取access_token

API_KEY、SERCET_KEY替换为获取应用相关信息中的值,在任意浏览器地址栏输入并点击回车键

https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=API_KEY&client_secret=SERCET_KEY 结果如下图。大家要注意哦。只是拿access_token后面对应的值哦。并不是第一行的值哦。 获取access_token的值保存。后续会用到

创建一个小程序项目

获取小程序appid

开发-开发设置-开发者ID-AppID(小程序ID)

创建项目

创建好的项目截图

小程序目录结构 https://developers.weixin.qq.com/miniprogram/dev/framework/structure.html 最好是看一下哦

开始改造项目

新建landmark文件夹

在根目录的app.json文件夹中增加: "pages/landmark/landmark" 会自动创建相关文件夹和相关文件哦。小程序默认进去即是landmark页面

{
  "pages": [
    "pages/landmark/landmark",
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json"
}

给页面增加功能

拍照或选择图片识别 那我们就需要一个按钮来调起相册或相机选取图片文件。为了能让用户看到自己选择或拍的照片。那我们还需要一个图片组件 按钮组件文档 https://developers.weixin.qq.com/miniprogram/dev/component/button.html 选取图片文件API文档 https://developers.weixin.qq.com/miniprogram/dev/api/wx.chooseImage.html 图片组件文档 https://developers.weixin.qq.com/miniprogram/dev/component/image.html 具体使用说明看官方即可,小帅这里就不废话了

加完页面内容,再增加一些样式。代码&效果如下

landmark.css代码参考地址

https://gitee.com/xshuai/easydlsmartappdemo/blob/master/pages/index/index.wxss

landmark.wxml代码

<view class="container">
<view class="img_wrap">
    <image src="{{ img }}" mode='aspectFit'/>
</view>
<button class="up">拍照/选取图片识别</button>
<text class='baikeform'>By 小帅丶</text>
 </view>

封装一个工具方法

方便调用地标识别接口而封装一个工具方法。后续可以根据自己需求再次增加额外接口。这样不会影响具体某个模块功能更改代码。放在util/baiduai.js

使用之前记得 accessToken 替换为前面获取保存的access_token哦

/**
 * 调用百度地标识别示例代码
 * 其他接口可以根据自己的需求封装即可
 */
let accessToken = ''//自己的accessToken 根据实际情况可以进行封装 自动获取token
let landmarkUrl = 'https://aip.baidubce.com/rest/2.0/image-classify/v1/landmark';//地标识别接口地址
//地标识别接口 图片base64 只是简单示例 别的参数如何封装建议自己学习一下JavaScript
let landmarkRequest = (base64Img, callback) => {
  //拼接接口body参数
  let params = {
    image: base64Img
  }
  //发送接口请求
  wx.request({
    url: landmarkUrl + '?access_token=' + accessToken,
    data: params,
    header: {
      'content-type': 'application/x-www-form-urlencoded'
    },
    method: 'POST',
    success: function (res) {
      callback.success(res.data)
    },
    fail: function (res) {
      if (callback.fail)
        callback.fail()
    }
  })
}
//暴露出去的接口
module.exports = {
  landmarkRequest: landmarkRequest
}

给按钮增加事件并完善功能

对按钮增加事件,选择图片或拍照后传递给地标识别接口。并显示接口返回的识别结果。 按钮修改后的代码 < button bindtap = "uploads" class = "up"> 拍照/选取图片识别 </ button > 对应的业务逻辑代码在landmark.js编写。完善代码如下

var app = getApp();
//读取封装的工具方法
var api = require('../../utils/baiduai.js');
Page({
  data: {
    motto: 'LandMark',
    landmark:'',
    images: {},
    img: '',
    base64img: ''
  },
  //分享
  onShareAppMessage: function () {
    return {
      title: '地标识别小程序',
      path: '/pages/landmark/landmark',
      success: function (res) {
        if (res.errMsg == 'shareAppMessage:ok') {
          wx.showToast({
            title: '分享成功',
            icon: 'success',
            duration: 500
          });
        }
      },
      fail: function (res) {
        if (res.errMsg == 'shareAppMessage:fail cancel') {
          wx.showToast({
            title: '分享取消',
            icon: 'loading',
            duration: 500
          })
        }
      }
    }
  },
  clear: function (event) {
    console.info(event);
    wx.clearStorage();
  },
  //事件处理函数
  bindViewTap: function () {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  //按钮点击事件
  uploads: function () {
    var that = this
    wx.chooseImage({
      count: 1, // 默认9
      sizeType: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
      success: function (res) {
        // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
        if (res.tempFiles[0].size > 4096 * 1024) {
          wx.showToast({
            title: '图片文件过大哦',
            icon: 'none',
            mask: true,
            duration: 1500
          })
        } else {
          that.setData({
            img: res.tempFilePaths[0]
          })
        }
        wx.showLoading({
          title: "分析中...",
          mask: true
        })
        //根据上传的图片读取图片的base64
        var fs = wx.getFileSystemManager();
        fs.readFile({
          filePath: res.tempFilePaths[0].toString(),
          encoding: 'base64',
          success(res) {
            //获取到图片的base64 进行请求接口
            api.landmarkRequest(res.data,{
              success(res) {
                if (typeof (res.error_code) != "undefined") {
                  wx.hideLoading();
                  wx.showModal({
                    showCancel: false,
                    title: '错误码:' + res.error_code,
                    content: '错误信息:' + res.error_msg
                  })
                } else {
                  if (res.result.landmark!='') {
                    wx.hideLoading();
                    let data = res.result.landmark;
                    that.setData({
                      landmark: data
                    })
                  } else {
                    wx.hideLoading();
                    wx.showModal({
                      showCancel: false,
                      title: '温馨提示',
                      content: '貌似没有识别出结果'
                    })
                  }
                }
              }
            })
          }
        })
      },
    })
  },
  onLoad: function () {
  }
});

完善功能后的结果截图

最终的wxml代码

<view class="container">
<view class="img_wrap">
    <image src="{{ img }}" mode='aspectFit'/>
</view>
<button bindtap="uploads" class="up">拍照/选取图片识别</button>
  <view wx:if="{{landmark}}" class="table">
      <view  class="tr bg-w">
        <view class="th" >地标名称:{{landmark}}</view>
      </view>
  </view>
<text class='baikeform'>By 小帅丶</text>
 </view>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券