【使用攻略】地标识别功能快速接入小程序（腾讯/百度）

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

前期准备

创建应用获取相关信息

应用名称

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

应用描述

简述一下应用场景即可

获取应用相关信息

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 根据实际情况可以进行封装 自动获取tokenlet landmarkUrl = 'https://aip.baidubce.com/rest/2.0/image-classify/v1/landmark';//地标识别接口地址//地标识别接口 图片base64 只是简单示例 别的参数如何封装建议自己学习一下JavaScriptlet 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>

转载于:https://my.oschina. net /xshuai/blog/3047234

免责声明：本文系网络转载或改编，未找到原创作者，版权归原作者所有。如涉及版权，请联系删