小程序智能识别快递收货地址,自动解析出省市区等信息,让地址标准化格式的实现(使用腾讯云api)

源码直接使用,下载地址

---

1,下载源码后需要改两个editaddress.js中的参数即可使用.

//云市场分配的密钥Id
let appKey = "你自己的secretId";
//云市场分配的密钥Key
let appSecret = "你自己的secretKey";

2.使用前你需要自己订购一下api,这是我使用的那个连接

 

3,如果上线发布,需要添加腾讯云市场request请求的域名白名单.测试时不需要,项目我已经做了忽略域名检测.

 

之前写过一个地址解析格式化这种评测,感兴趣的可以看一下

中文地址识别api的使用测试,快递地址自动补全,自动识别省市区,地址清洗,到底哪个好用?

---

如下详情,直接使用者可不看

---

腾讯云api给出了很多编程语言的示例代码,我之前C#接入调通也就用了两三分钟.这次到小程序,由于官方没有代码,我入坑出坑大概一下午,其中有一些技术细节也是在网上没找到资料.所以最终把我的代码和效果分享给大家.

 

首先要说明一点,因为api调用需要用到appkey和appsecret,一旦这两个重要信息泄露,可能别人就会调用你的api.所以api的调用官方还是建议放在后端.有的人是因为小程序没有使用后台服务器,有的是使用云开发,我个人是因为懒得写一个服务器的跳板,而且我也相信小程序一旦发布,这个key和secret被逆向拿到的可能很小,所以我就不写后台接口了.大胆干了,怕什么呢

这样一来,由于小程序限制业务的域名,如果想访问哪个网站的api必须要在小程序管理后台添加白名单

在mp.weixin.qq.com 开发->开发设置->服务器域名中设置

 

如果你只是研究不准备发布,或者你也只是运行我的测试代码,那就把微信开发者工具中,详情->本地设置->不校验合法域名... 这个选项勾选即可. 

 

appKey和appSecret 换成你自己的.appKey对应得到的SecretId,appSecret对应SecretKey 我是习惯叫key和secret可能腾讯云习惯id和secret这俩词,这个不用纠结,就是变量名字差别.不喜欢你自己可以改

url不用换.就使用如下代码,如果你有其他的腾讯云api请求的需求,可以自己替换和修改.

//需要请求的api接口地址
let tencentCloudApiUrl = "https://service-7daeqy5n-1301652365.bj.apigw.tencentcs.com/release/address_parse";

如果你只是需要此地址自动识别模块,拿去用就可以了.如果想了解一下代码,我在这里简单罗列一下我的提示.

 

 

腾讯云使用HMACSHA1+BASE64的加密方式生成签名Sign,但是他的签名方式不是HMACSHA1后的最终16进制字符串再进行BASE64的,是在生成了HMACSHA1的原始数据(也就是像   byte[]   数组的意思)基础上再进行BASE64加密.所以如果你的签名最后结果如果错了,你要考虑是不是这方面的问题.

 

 

签名时候用到的这三个参数是缺一不可的,而且Authorization格式必须要用给定的方式拼接字符串,不能多也不能少,不需要加Bearer 空格这种信息.

header: {
                'Authorization': auth,
                'X-Source': source,
                'X-Date':dt,
            },

 

X-Date使用的时间是GMT格式的时间字符串类似:

Sun, 10 May 2020 06:13:13 GMT

别的格式的不行.

 

 

base64.js 中的三个方法

var base64 = {
        encode: enc,
        decode: dec,
        encodeArrayBuffer: aenc
    };

enc是编码,dec是解码,而aenc也是编码,但是使用byte的array来进行编码,该方法也可以用来传入string类型进行编码,但是得到的结果不是正确的

 

 

 

腾讯云的hmacsha1+base64编码方式  是使用hmacsha1的原始数据直接进行base64编码的形式.

 

sha1.js中的HmacSHA1编码后,得到的内容是一个十六进制的字符串,需要将得到的结果按照2个字符一分割,然后通过parseInt方法转换为base64的aenc需要的byte[]数组.

正常HmacSHA1返回结果是如ffaabbccdd这样的字符串,需要把ff解析成255这样的byte,然后装入数组中,将hmacsha1得到的40个字符按照2个一组分成20组,解析成byte的数组(20个byte)进行base64编码.

let sign = sha1.HmacSHA1(signStr, secretKey);
sign = sign.toString();
// console.log('sha1.hmacsha1 result = ', sign);
let count = sign.length/2;
let bytes=[];
for (let i=0;i<count;i++)
{
  let a = sign[i*2];
  let b = sign[i*2+1];
  let c = a+b;
    let byte = parseInt(c,16);
    // console.log('a is ', a, 'b is ', b , 'c is ', c, 'byte is ', byte);
    bytes.push(byte);
}

另外,如上代码的第一行,sign是对象而非字符串,需要使用其重载的toString()方法转换成16的进制字符串(40字符).

 

手动选择省市区时,小程序的picker控件支持省市区三级联动选择,但是这个控件默认不会把你选择完后的结果直接展示,需要把三级信息数组转换成你需要的格式的字符串然后使用

value="{{regionArr}}"

这个参数是为了保存已选择的值,并非显示的内容,显示内容需要用innerText的形式控制

    <picker class="region_picker" mode="region" bindchange="onRegionChange" value="{{regionArr}}" >{{region == undefined? "请选择省市区" : region}}</picker>

 

最后,因为我主要做后端开发,css写的不漂亮请各位见谅. 确认按钮事件需要你自己写,比如我是使用这种返回上一页前调用上一页面的回调函数onEditAddressSubmit

let pages = getCurrentPages();
            let currPage = null; //当前页面
            let prevPage = null; //上一个页面

            if (pages.length >= 2) {
                currPage = pages[pages.length - 1]; //当前页面
                prevPage = pages[pages.length - 2]; //上一个页面
            }
            if(prevPage){
                if (prevPage.onEditAddressSubmit)
                {
                    prevPage.onEditAddressSubmit(这里按照你自己的方式构建一个地址json结构对象返回给上一页面的回调函数);
                    wx.navigateBack();
                }
            }

或者是调用app.globalData设置全局变量传给上一页面,根据你自己的需求写就好.