【语言与知识主题月】AI小程序之地址识别
wangwei8638 发布于2019-12 浏览:3796 回复:4
0
收藏
最后编辑于2022-04

想了解微信小程序的开发过程,请参看我之前的帖子:《UNIT接入小程序》https://ai.baidu.com/forum/topic/show/953022

想了解地址识别的调用过程,请参看我之前的帖子:《驾驶证识别》https://ai.baidu.com/forum/topic/show/943036

1 系统框架

用到的技术主要有:百度地址识别和微信小程序。小程序将快递单地址提交给百度地址识别服务,返回快递单文本中的姓名、电话、地址信息。全部功能都在小程序客户端完成,不需要服务器,适合个人开发者学习调试使用,同时也为商业应用提供相应解决方案。

2创建小程序项目

在根目录的全局配置文件app.json中增加:"pages/ address/ address" ,会自动创建相关页面文件,结构如下:

address.js:功能逻辑模块

address.wxss:页面样式文件

address.wxml:页面布局文件

address.json:页面配置文件

3 调用地址识别API

3.1 首先要在控制台创建应用,调用地址识别API,“获取API Key/Secret Key”。

接口文档地址:https://ai.baidu.com/ai-doc/NLP/vk3pmn49r#%E5%9C%B0%E5%9D%80%E8%AF%86%E5%88%AB%E6%8E%A5%E5%8F%A3%EF%BC%88%E9%82%80%E6%B5%8B%EF%BC%89

请求URL: https://aip.baidubce.com/rpc/2.0/nlp/v1/address

Body中放置请求参数,参数详情如下:

返回参数:

3.2 地址识别功能实现

(1)发送URL请求核心代码

//在baiduai.js中发送URL请求,并进行封装。

//地址识别接口请求,此处添加

let addressUrl = "https://aip.baidubce.com/rpc/2.0/nlp/v1/address?charset=UTF-8&access_token=";

let addressRequest = (input, arg) => {

  var accessToken = app.globalData.access_token;

  //拼接接口body参数

  let params = {

    "text": input

  }

  var rqparams = JSON.stringify(params);

  //发送接口请求

  wx.request({

    url: addressUrl + accessToken,

    data: rqparams,

    header: {

      'content-type': 'application/json'

    },

    method: 'POST',

    success: function (res) {

      var resData = res.data;

      //var t0 = decodeURI(resData);

      var nli = JSON.stringify(resData);

      // 回调函数,解析数据

      typeof arg.success == "function" && arg.success(resData);

    },

    fail: function (res) {

      console.log("[Console log]:NewsRequest() failed...");

      console.error("[Console log]:Error Message:" + res.errMsg);

      typeof arg.fail == "function" && arg.fail();

    },

    complete: function () {

      //  console.log("[Console log]:NewsRequest() complete...");

      typeof arg.complete == "function" && arg.complete();

    }

  })

}

//暴露出去的接口

module.exports = {

addressRequest: addressRequest,

 }

(2)定义按钮点击事件

//在address.js中定义定义按钮点击事件

//按钮点击事件

 uploads: function () {

    var that = this;



    curIndex++;

    if (curIndex >= this.data.chatList.length) {

      curIndex = 0;

    }

    this.setData({

      output: this.data.chatList[curIndex].text

    })

    that.sendaddressRequest(this.data.output);

  },



  // 发送请求

  sendaddressRequest(input) {

    var that = this;

    api.addressRequest(input, {

      'success': function (res) {

        console.log(res);

        var text = '地址识别结果:'+'\n';

        var province = res.province;

        text += '省:'+province + '\n';

        var city = res.city;

        text += '市:' + city + '\n';

        var county = res.county;

        text += '区:' + county + '\n';

        var town = res.town;

        text += '镇/街道:' + town + '\n';

        var detail = res.detail;

        text += '详细地址:' + detail + '\n';

        var person = res.person;

        text += '联系人:' + person + '\n';

        var phonenum = res.phonenum;

        text += '电话:' + phonenum + '\n';       

        that.setData({ result: text });

        if (res.status == "error") {

          wx.showToast({

            title: '返回数据有误!',

          })

          return;

        }

      },

      'fail': function (res) {

        wx.showToast({

          title: '请求失败!',

        })

        return;

      }

    });

  },

 (3)修改页面样式文件

/* pages/address/address.wxss */

.atbottom {

  width: 100%;

  height: 50px;

  display: flex;

  flex-direction: row;

  justify-content: center;

  position: fixed;

  background: #3366FF;

  bottom: 0;

}



.result{

  font-size: 32rpx;

  color: #0c0200;

  border-top: 1rpx solid #eeeeee;

  margin:10rpx 10rpx 0rpx 20rpx;

  padding: 20rpx;

}



.card {

  display: flex;

  flex-direction: column;

  justify-content: left;

  align-items: left;

    border: 2px solid #807474e5;

    border-radius: 5px;

    height: 150px;

    background-color: rgb(239, 250, 175);

    box-shadow: 4px 1px 1px #cccccc;

    margin: 8px;

    position: relative;

}



.image {

    width: 10%;

    height: 20px;

    background-color: #eeeeee;

}



.input{

text-align: center;

width: 80%;

height: 50px;

border: 1px solid lightgray;

border-radius: 5px;

margin-left: 35px;

margin-top: 20px;

font-size: 64rpx;

color: #7c716f;

}

 4 实现效果

收藏
点赞
0
个赞
共4条回复 最后由用户已被禁言回复于2022-04
#5wangwei8638回复于2020-06

小程序码

0
#4wangwei8638回复于2020-05

识别手机号自动发信息

0
#3wangwei8638回复于2020-01
#2 小雨青青润无声回复
这个非常实用

可以用到快递单上

0
#2小雨青青润无声回复于2019-12

这个非常实用

0
TOP
切换版块