当前位置:   article > 正文

微信小程序调用百度智能云API(菜品识别)_微信小程序调用百度搜索

微信小程序调用百度搜索

一、注册后生成应用列表创建应用

在这里插入图片描述

二、找到当前所需使用的api菜品识别文档

在这里插入图片描述

三、点链接看实例代码

在这里插入图片描述
这里需要使用到如下几个参数(如下),其他的参数可以不管

  1. client_id : 就是创建应用后的API Key
  2. client_secret: 就是创建应用后的Secret Key
  3. image: 需要用图片转换后的base64
  4. url : 需要用到图片的线上地址,不能使用本地ip地址

在这里插入图片描述
调用成功后会如下图返回数据,当前使用以下三个数据

   calorie: "",//卡路里
   name: "",   //菜名
   probability: ""//置信度值
  • 1
  • 2
  • 3

在这里插入图片描述
四、实例调用分布代码
调用代码分解

  1. 先上传图片后获取本地图片路径
async afterRead(event) {
 wx.showLoading()
    const {
        file
    } = event.detail
    const {
        personPhoto = []
    } = this.data;
    personPhoto.push({   
        ...file,
        url: file.url
    });
    this.setData({
        personPhoto: personPhoto  //照片回显在页面上显示
    });
    const data = await this.getBase64URL(event.detail.file.url)    //调用获取base64

}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  1. 后去上传的图片后获取base64图片地址
    //获取bas464地址
    getBase64URL(file) {
        return new Promise((resolve, reject) => {
            wx.getFileSystemManager().readFile({
                filePath: file, //要读取的文件的路径 (本地路径)
                encoding: "base64", //指定读取文件的字符编码,如果不传 encoding,则以 ArrayBuffer 格式读取文件的二进制内容
                success(res) {
                    // encodeURIComponent 可把字符串作为URI 组件进行编码。其返回值URIstring 的副本,其中的某些字符将被十六进制的转义序列进行替换
                    resolve( encodeURIComponent(res.data))   //这里记得把base64转换一遍,否则会报错
                },
                fail(error) {
                    console.log(error);
                }
            })
        })


    },
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  1. 去获取token
    //根据参数获取token
    getAccessToken() {
        const params = {
            grant_type: 'client_credentials',
            client_id: 'q9NvyRRPAAWtEnUQGYztWIoY',
            client_secret: 'wGbmuZmSiMUKuoZsCrj7xbLJPeigivUR'
        }
        return new Promise((res, rej) => {
            wx.request({
                url: getImgToken,
                method: "POST",
                data: params,
                header: {
                    'content-type': 'application/x-www-form-urlencoded',
                },
                success(obj) {
                    if (obj.statusCode == 200) {
                        res(obj.data.access_token)
                    }
                },
                fail(err) {
                    rej({
                        msg: '网络错误',
                        detail: null
                    });
                }
            })
        })
    },
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  1. 去调用获取数据的接口
  const _this = this
        wx.request({
            url: 'https://aip.baidubce.com/rest/2.0/image-classify/v2/dish?access_token=' + await _this.getAccessToken(),
            method: "POST",
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            data: `image=${data}`,
            success(obj) {
                if (obj.statusCode == 200) {
                    if (obj.data.result && obj.data.result.length > 0) {
                        obj.data.result.forEach( item =>{
                            item.probability = (item.probability*100).toFixed(2)
                        })
                        _this.setData({
                            result: obj.data.result
                        })
                    } else {
                        wx.showToast({
                          title: '未识别出菜品',
                          icon:'none'
                        })
                        _this.setData({
                            result:[]
                        })
                    }
                }
                 wx.hideLoading()
            },
            fail(err) {
                rej({
                    msg: '网络错误',
                    detail: null
                });
                wx.hideLoading()
            }
        })
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37

五、上实图效果

预览图

数据

六、完整实例调用代码

    //图片上传回调函数
    async afterRead(event) {
        wx.showLoading()
        const {
            file
        } = event.detail
        const {
            personPhoto = []
        } = this.data;
        personPhoto.push({   
            ...file,
            url: file.url
        });
        this.setData({
            personPhoto: personPhoto  //照片回显在页面上显示
        });
        const data = await this.getBase64URL(event.detail.file.url)    //调用获取base64
        const image = 'https://picnew9.photophoto.cn/20141014/cuijiaozhuertupian-12936350_1.jpg' //测试使用地址
        const _this = this
        wx.request({
            url: 'https://aip.baidubce.com/rest/2.0/image-classify/v2/dish?access_token=' + await _this.getAccessToken(),
            method: "POST",
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            data: `image=${data}`,
            success(obj) {
                if (obj.statusCode == 200) {
                    if (obj.data.result && obj.data.result.length > 0) {
                        obj.data.result.forEach( item =>{
                            item.probability = (item.probability*100).toFixed(2)
                        })
                        _this.setData({
                            result: obj.data.result
                        })
                    } else {
                        wx.showToast({
                          title: '未识别出菜品',
                          icon:'none'
                        })
                        _this.setData({
                            result:[]
                        })
                    }
                }
                 wx.hideLoading()
            },
            fail(err) {
                rej({
                    msg: '网络错误',
                    detail: null
                });
                wx.hideLoading()
            }
        })
    },
    //获取bas464地址
    getBase64URL(file) {
        return new Promise((resolve, reject) => {
            wx.getFileSystemManager().readFile({
                filePath: file, //要读取的文件的路径 (本地路径)
                encoding: "base64", //指定读取文件的字符编码,如果不传 encoding,则以 ArrayBuffer 格式读取文件的二进制内容
                success(res) {
                    // encodeURIComponent 可把字符串作为URI 组件进行编码。其返回值URIstring 的副本,其中的某些字符将被十六进制的转义序列进行替换
                    resolve( encodeURIComponent(res.data))   //这里记得把base64转换一遍,否则会报错
                },
                fail(error) {
                    console.log(error);
                }
            })
        })


    },
    //根据参数获取token
    getAccessToken() {
        const params = {
            grant_type: 'client_credentials',
            client_id: 'q9NvyRRPAAWtEnUQGYztWIoY',
            client_secret: 'wGbmuZmSiMUKuoZsCrj7xbLJPeigivUR'
        }
        return new Promise((res, rej) => {
            wx.request({
                url: getImgToken,
                method: "POST",
                data: params,
                header: {
                    'content-type': 'application/x-www-form-urlencoded',
                },
                success(obj) {
                    if (obj.statusCode == 200) {
                        res(obj.data.access_token)
                    }
                },
                fail(err) {
                    rej({
                        msg: '网络错误',
                        detail: null
                    });
                }
            })
        })
    },
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103

l

七:其他说明

  1. 在概览中查看使用量服务列表

在这里插入图片描述

  1. 接口报错可查看错误码表错误码表
    在这里插入图片描述
    制作不易,觉得用的上的还请麻烦点个关注,赞一个呗
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/705268
推荐阅读
相关标签
  

闽ICP备14008679号