想了解微信小程序的开发过程,请参看我之前的帖子:《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 实现效果
小程序码
识别手机号自动发信息
可以用到快递单上
这个非常实用