【使用攻略】【地标识别】快速接入微信小程序
756665228 发布于2019-05-08 22:30 浏览:12304 回复:36
3
收藏
最后编辑于2019-07-13

致所有开发者:

我们是开发者 不是 程序员。开发者是最具活力的创新者,是勤恳的践行者,是敏捷的困难解决者,是胸怀梦想,

不忘初心的 又具有开发能力的一群人。

-----------------------------------------------------------------------------------------

图片看的不是很清楚?请移步https://my.oschina.net/xshuai/blog/3047234

 前期准备

创建应用获取相关信息

应用名称&应用描述

名字方便自己区分应用使用即可,注意查看是否勾选地标识别。应用描述简单编写即可

获取应用相关信息
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)

创建项目

把上一步的appid粘贴到AppID中即可

创建好的项目截图

小程序目录结构 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.wxss
.image {
  width: 100%;
  height: 360rpx;
}
.container {
  margin-top: -110px;
  background-image: url("https://www.xsshome.cn/timg.jpg");
  background-repeat: no-repeat;
  background-size: auto;
  background-position: bottom;
  background-position-x: right;
}

button {
  font-family: 微软雅黑;
}
.baikeform{
  font-size: 20rpx;
  color: #c0c0c0;
  border-top: 1rpx solid #eeeeee;
  margin:30rpx 40rpx 0rpx 40rpx;
  padding: 20rpx;
}

.page-body-info {
  display: flex;
  box-sizing: border-box;
  padding: 30rpx;
  height: 420rpx;
  border-top: 1rpx solid #d9d9d9;
  border-bottom: 1rpx solid #d9d9d9;
  align-items: center;
  justify-content: center;
}

.up {
  color: rgb(255, 255, 255);
  font-size: 20px;
  font-family: 微软雅黑;
  width: 200px;
  height: 50px;
  vertical-align: middle;
  text-align: center;
  line-height: 45px;
  border-radius: 25px;
  background-color: rgb(26, 160, 225);
}
.img_wrap {
    margin-bottom: 10px;
    width: 750rpx;
    height: 700rpx;
    background: #ececec;
}
image {
    width: 100%;
    height: 100%;
    max-height: 1
}
.msg {
    margin: 10px 0;
    text-align: center;
}
.table {
  margin-top: 10rpx;
  border: 0px solid darkgray;
  width: 100%;
}
.tr {
  display: flex;
  width: 100%;
  justify-content: center;
  height: 80rpx;
  
}
.td {
  font-family: 微软雅黑;
    font-size: 28rpx;
    width:100%;
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
}
.bg-g{
  background: white;
}
.baikeform{
  font-size: 20rpx;
  color: #c0c0c0;
  border-top: 1rpx solid #eeeeee;
  margin:30rpx 40rpx 0rpx 40rpx;
  padding: 20rpx;
}
.th {
  font-size: 28rpx;
  width: 48%;
  justify-content: center;
  background: #3366FF;
  color: #fff;
  display: flex;
  height: 80rpx;
  align-items: center;
}
  • landmark.wxml


    

拍照/选取图片识别
By 小帅丶
 

封装一个工具方法
方便调用地标识别接口而封装一个工具方法。后续可以根据自己需求再次增加额外接口。这样不会影响具体某个模块功能更改代码。放在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"> 拍照/选取图片识别 
对应的业务逻辑代码在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代码



    

拍照/选取图片识别
  
      
        地标名称:{{landmark}}
      
  
By 小帅丶
 

完善功能后的结果截图

收藏
点赞
3
个赞
共36条回复 最后由goJhou回复于2019-07-13 15:52
#37goJhou回复于2019-07-13 15:52:15
#36 rose20135188回复
楼主好厉害

不要夸别人啦,快自己写两篇~

0
#36rose20135188回复于2019-07-13 10:31:24

楼主好厉害

0
#35wangwei8638回复于2019-05-18 15:27:26
#34 goJhou回复
这可是帅总的文,哈哈

厉害厉害

0
#34goJhou回复于2019-05-18 13:07:25
#33 才能我浪费99回复
写的很详细,不错

这可是帅总的文,哈哈

0
#33才能我浪费99回复于2019-05-18 11:38:21

写的很详细,不错

0
#32wangwei8638回复于2019-05-14 20:56:36
#31 756665228回复
个人开发者不收费。企业认证是300一年貌似。可以和公众号相关关联认证。这个具体找微信官方吧。 图片被我转了一次。导致在社区上传的图片看的不是很清晰。看清晰的可以去开源中国地址看。地址在文始已经给出
展开

感谢分享

0
#31756665228回复于2019-05-14 18:49:35
#30 177******01回复
微信小程序不收费吧

个人开发者不收费。企业认证是300一年貌似。可以和公众号相关关联认证。这个具体找微信官方吧。

图片被我转了一次。导致在社区上传的图片看的不是很清晰。看清晰的可以去开源中国地址看。地址在文始已经给出

1
#30177******01回复于2019-05-14 17:26:04

微信小程序不收费吧

0
#29177******01回复于2019-05-14 17:25:34

图片看的不是很清楚?

0
#28蓝色的风339回复于2019-05-13 13:38:00
#25 177******01回复
个人开发者不存在认证。

好的,谢谢了

0
#27蓝色的风339回复于2019-05-13 13:37:06
#16 756665228回复
个人开发者不存在认证。除非是企业呀机构才能花钱认证。一年300.这样的问题建议去看微信官方文档更好哦
展开

好的谢谢,我看一下

0
#26756665228回复于2019-05-13 12:39:34
#25 177******01回复
个人开发者不存在认证。

是的亲

1
#25177******01回复于2019-05-13 10:26:34

个人开发者不存在认证。

0
#24756665228回复于2019-05-11 22:42:18
#22 wangwei8638回复
landmark.wxml中少了一句输出: <text class="user-names" wx:if="{{landmark}}">地标景区名称:{{landmark}}</text> 加上就ok了,赞!
展开

感谢提醒

1
#23daipeng_hi回复于2019-05-11 21:07:55
#5 756665228回复
个人开发者写的哦。小程序是用的微信小程序。百度小程序接入更简单。不过目前没有地标封装的服务可以用。
展开

不过百度小程序貌似现在不对个人开放,试用不了

0
#22wangwei8638回复于2019-05-10 16:55:33

landmark.wxml中少了一句输出:

地标景区名称:{{landmark}}

加上就ok了,赞!

0
#21756665228回复于2019-05-10 12:51:42
#20 wangwei8638回复
[图片] 按你说的改配置,现在没有错误了,但识别没有输出结果,楼主怎么配置的?
展开

你加我QQ 783021975 我看看。确定小程序代码都是本帖内容吧?

0
#20wangwei8638回复于2019-05-10 12:13:42
#19 756665228回复
配置了域名以后。开发工具尝试重启一下。 看你的截图 你还少配置了一个域名。腾讯云那个。也加到request里面
展开

按你说的改配置,现在没有错误了,但识别没有输出结果,楼主怎么配置的?

0
#19756665228回复于2019-05-10 11:13:15
#18 wangwei8638回复
报错信息 [图片]

配置了域名以后。开发工具尝试重启一下。

看你的截图 你还少配置了一个域名。腾讯云那个。也加到request里面

1
#18wangwei8638回复于2019-05-10 10:58:39
#17 wangwei8638回复
域名校验出错,没有返回结果,应该怎样配置? [图片]

报错信息

0
TOP
切换版块