最后编辑于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”。
请求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
个赞
请登录后评论
TOP
切换版块
小程序码
识别手机号自动发信息
可以用到快递单上
这个非常实用