【干货#015】小程序收货地址

这是晓程序干货店第15篇干货分享

小程序在1.1.0版本开始原生支持获取微信本身的用户地址,并支持调起微信的地址编辑界面,不仅给开发者省却了重复造轮子的麻烦(特别是不用再造地址选择器轮子了),而且提升了用户的使用体验。


今天我们就介绍下收货地址API:wx.chooseAddress(OBJECT),可返还地址信息如下所示:

【干货#015】小程序收货地址


下面我们以一个更完整的例子介绍该API的使用,该例子为一个收货地址页面,后台使用的是Bmob后端云。流程如下:在用户进入时,如后台已经保存过地址,则显示该默认地址,如未设置过或单击“更换地址”按钮,则调用收货地址API进入地址编辑界面,完成后保存新地址到服务器后台,并返回该页面。

【干货#015】小程序收货地址

地址页面

页面直接显示收货地址,底部为“更换地址”按钮,注意按钮的事件绑定为地址修改函数。

【干货#015】小程序收货地址

地址显示

首先从Bmob后台获取用户地址,如果没有地址,则进入新建地址函数。

【干货#015】小程序收货地址

新建地址

通过收货地址API获取地址信息(会弹出用户授权许可),然后保存到Bmob后台数据表AddressBook。

【干货#015】小程序收货地址

Bmob后台数据表AddressBook数据如下所示

【干货#015】小程序收货地址

更换地址

通过收货地址API编辑地址信息(会弹出用户授权许可),然后保存到Bmob后台数据表AddressBook。

【干货#015】小程序收货地址

编辑(长按)或增加地址信息页面需要使用真机才能调起,开发工具模拟器没有该功能,地区信息中自动调起地址选择器【干货#015】小程序收货地址【干货#015】小程序收货地址

【干货#015】小程序收货地址

以上,就完成收货地址页面设计,比起以前自己造轮子方便太多了【干货#015】小程序收货地址【干货#015】小程序收货地址


更多实战干货,可查看:

小程序页面滚动实现广告条隐藏

细解小程序自适应单位rpx

小程序实现地址自动解析和导航

小程序"页面滚动"与"滚动视图区域"区别

小程序使用有赞ZanUI

小程序开发最佳图标库:阿里图标库


更多常见错误,可查看:

解决 Page[pages/XXX/XXX] not found错误

解决"Failed to load image"错误


关注晓程序干货店,分享小程序开发干货知识

【干货#015】小程序收货地址