微信小程序编程（1）——使用百度API编写文字识别小程序

Tricia ·

更新时间:2024-09-20

· 547 次阅读

编写思路

要使用百度等第三方API，我们得使用微信小程序提供的wx.request来向第三方平台发起请求，我们看到wx.request的参数属性里面url是必填项，接着我们打开和百度AI平台里面的通用文字识别技术文档https://ai.baidu.com/ai-doc/OCR/zk3h7xz52，里面提供一个url：https://aip.baidubce.com/rest/2.0/ocr/v1/general_basic，而文档里要求有一个叫access-token的参数，接着我们点开如何获取这个参数的网址https://ai.baidu.com/ai-doc/REFERENCE/Ck3dwjhhu，接着可以向https://aip.baidubce.com/oauth/2.0/token发送请求来获取access-token。

因而现在把文字识别API调用分成两个部分，首先是access-token的获取接着是向百度平台发送照片进行识别。在获取access-token的时候需要在https://aip.baidubce.com/oauth/2.0/token这个链接里添加两个参数client_id和client_secret，这两个参数要在API控制台里面创建文字识别应用后获取。填入参数后向其发起请求，我们就可以成功获取access-token进行第二步了。

在填写完成请求接口的网址后，我们需要根据百度的技术文档在小程序request里面添加一个header属性，其参数及值为Content-Type和application/x-www-form-urlencoded；接着把请求方法（method）改成POST（因为默认请求方法为GET，而GET的url长度有限制），会导致请求失败）；而在请求参数里面（也就是request里面的data）需要添加一个image或者url参数，我们选择image参数，因为这个便于在微信小程序里面进行处理，我们详细看一下image的说明（图像数据，base64编码后进行urlencode，要求base64编码和urlencode后大小不超过4M，最短边至少15px，最长边最大4096px,支持jjpg/jpeg/png/bmp格式，当image字段存在时url字段失效），我们发现微信小程序提供一个叫wx.getFileSystemManager()的功能可以直接将照片进行base64编码使用，这样编写一个文字识别小程序的所需参数就都找到了，接着就是进行实践编码和处理返回的参数（也就是识别之后的文字）。

两个重要的链接
1.access-token获取：https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=【百度云应用的AK】&client_secret=【百度云应用的SK】
2.文字识别接口调用：https://aip.baidubce.com/rest/2.0/ocr/v1/general_basic?access_token=【调用鉴权接口获取的token】

参考的技术文档
微信小程序wx.request：https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html
百度API通用文字识别：https://ai.baidu.com/ai-doc/OCR/zk3h7xz52
百度APIaccess-token：https://ai.baidu.com/ai-doc/REFERENCE/Ck3dwjhhu

编写代码

Wxml：
我们需要一个放图像的框、一个放文字的框和来实现以上功能的三个按钮（一个添加照片按钮，一个获取access-token的按钮，一个发起请求完成识别的按钮）





  {{item.words}}

Js：
我们可以在添加图像的时候把图像进行base64编码，因而把编码代码添加在添加图片按钮里面

putimg: function(){
    // 添加照片
    let that=this;
    let img=that.data.img;
    let word=that.data.word;
    let word1=that.data.word1;
    wx.chooseImage({
      success: function(res) {
        that.setData({
          img:res.tempFilePaths[0], //赋予img图片地址（img）
          word: wx.getFileSystemManager().readFileSync(res.tempFilePaths[0], "base64"), //将图片转为base64（word）
          word1: encodeURIComponent(wx.getFileSystemManager().readFileSync(res.tempFilePaths[0], "base64"))
          //将base46转为urlencode
        })
      },
      count: 1,
    });
  },

在test按钮里面获取access-token

  test: function(){
    //获取百度api的access-token
    let that = this;
    let key =that.data.key;
    wx.request({
      url: 'https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=【填你自己的id】&client_secret=【填你自己的密钥】',
      header: { 'Content-Type': 'application/x-www-form-urlencoded' },
      success: function (res) {
       that.setData({ key: res.data.access_token}) //获取access-token赋值为key
      },
      fail: function(){
        console.log(fail)
      }
    })
  },

在test2按钮里面实现调用接口的功能

  test2: function(){
    let that =this;
    let key =that.data.key;
    let word = that.data.word;
    let word1 = that.data.word1;
    let book = that.data.book;
    wx.request({
      url: "https://aip.baidubce.com/rest/2.0/ocr/v1/general_basic?access_token="+key,
      method: "POST",
      data:{
        image:word
      },
      header: { 'Content-Type': 'application/x-www-form-urlencoded' },
      success: function (res) {
        that.setData({ book: res.data.words_result})
      },
    })
  },

常见问题

地址的合法性问题：可以在你自己小程序合法地址里面添加百度API的地址，或者在测试里面把检验地址合法性勾掉。
如果出现其他问题可以常用console来发现自己到底哪里出问题。如果还有什么疑问可以评论，我大概会看到。

作者：DrMush

百度api 程序文字识别小程序微信小程序 api

1024 个赞