# Preface
This tutorial is based on the "apifm-wxapi" module and teaches you how to quickly implement small program development, so you may need to understand the following knowledge points first:
["Creating HelloWorld Project"](https://www.yuque.com/apifm/doc/hezlrm)
["Use "apifm-wxapi" to quickly develop small programs"](https://www.yuque.com/apifm/doc/mdldsd)
["Register for free to open the backend and obtain an exclusive domain name"](https://www.yuque.com/apifm/doc/qr6l4m)
In this case, some functions require the user to log in before they can be operated, which means token authorization is required. Please understand first:
["WeChat Mini Program login to obtain openid and third-party tokens"](https://www.yuque.com/apifm/doc/kaygbw)
# Function introduction
An essential module for the development of mall mini-programs, which allows users to fill in and manage their multiple delivery addresses, making it easy to directly select an address as the delivery address of the order when placing an order.
# enable module
Log in to the "First Step" registration background, left menu --> Factory settings --> Module management
Find and enable the following modules:
Shipping address management
After opening this module, you will be able to manage the user's shipping address in the background:
# apifm-wxapi method description
### Get all shipping addresses
```javascript
WXAPI.queryAddress(token)
```
### Add shipping address
```javascript
WXAPI.addAddress(Object object)
```
> You can also combine the mini program’s own interface for reading delivery addresses to quickly add delivery addresses.
>
### Update shipping address
```javascript
WXAPI.updateAddress(Object object)
```
### Get the default address
```javascript
WXAPI.defaultAddress(token)
```
### Read address details
```javascript
WXAPI.addressDetail(token, id)
```
### Delete shipping address
```javascript
WXAPI.deleteAddress(token, id)
```
# Mini program development
## Effect screenshot
## Mini program code
### Shipping address management
```javascript
{{ item.linkMan }}
{{ item.mobile }}
{{ item.provinceStr }}{{ item.cityStr }}{{ item.areaStr }}{{ item.address }}
```
```javascript
const WXAPI = require('apifm-wxapi')
Page({
data: {
addressList: undefined
},
onLoad: function (options) {
},
onShow: function () {
const loginToken = wx.getStorageSync('loginToken')
if (!loginToken) {
wx.showToast({
title: 'Please log in first',
icon: 'none'
})
this.goRegist()
return
}
WXAPI.queryAddress(loginToken.token).then(res => {
console.log(res)
if(res.code == 0){
this.setData({
addressList: res.data
})
}
})
},
goRegist() {
wx.navigateTo({
url: '/pages/auth/index'
})
},
addAddress() {
wx.navigateTo({
url: '/pages/shipping-address/add'
})
},
addressDetail(e){
const id = e.currentTarget.dataset.id
const loginToken = wx.getStorageSync('loginToken')
WXAPI.addressDetail(loginToken.token, id).then(res => {
console.log(res)
if (res.code == 0) {
wx.showToast({
title: 'View console',
icon: 'success'
})
} else {
wx.showToast({
title: res.msg,
icon: 'none'
})
}
})
},
deleteAddress(e){
const id = e.currentTarget.dataset.id
const loginToken = wx.getStorageSync('loginToken')
WXAPI.deleteAddress(loginToken.token, id).then(res => {
if (res.code == 0) {
wx.showToast({
title: 'Delete successfully',
icon: 'success'
})
this.onShow()
} else {
wx.showToast({
title: res.msg,
icon: 'none'
})
}
})
},
defaultAddress(){
const loginToken = wx.getStorageSync('loginToken')
WXAPI.defaultAddress(loginToken.token).then(res => {
console.log(res)
if (res.code == 0) {
wx.showToast({
title: 'View console',
icon: 'success'
})
} else {
wx.showToast({
title: res.msg,
icon: 'none'
})
}
})
},
updateAddress(e){
const id = e.currentTarget.dataset.id
wx.showToast({
title: 'Leave it to you~',
icon: 'none'
})
},
})
```
### Add shipping address
```javascript
```
```javascript
const WXAPI = require('apifm-wxapi')
Page({
data: {
provinces: undefined,//province data array
pIndex: 0, //Selected provincial subscript
cities: undefined,//city data array
cIndex: 0, //Selected city index
areas: undefined,// Array of district and county numbers
aIndex: 0, //Selected area index
btnName: 'Add shipping address',
},
onLoad: function (options) {
WXAPI.province().then(res => {
if (res.code == 0) {
this.setData({
provinces: res.data,
})
}
})
},
provinceChange(e) {
const index = e.detail.value
this.setData({
pIndex: index
})
const pid = this.data.provinces[index].id
WXAPI.nextRegion(pid).then(res => {
console.log(res)
if (res.code == 0) {
this.setData({
cities: res.data
})
}
})
},
cityChange(e) {
const index = e.detail.value
this.setData({
cIndex: index
})
const pid = this.data.cities[index].id
WXAPI.nextRegion(pid).then(res => {
console.log(res)
if (res.code == 0) {
this.setData({
areas: res.data
})
}
})
},
areaChange(e) {
const index = e.detail.value
this.setData({
aIndex: index
})
const pid = this.data.areas[index].id
WXAPI.nextRegion(pid).then(res => {
console.log(res)
if (res.code == 0) {
this.setData({
streets: res.data
})
}
})
},
goRegist() {
wx.navigateTo({
url: '/pages/auth/index'
})
},
bindSave(e) {
const loginToken = wx.getStorageSync('loginToken')
if (!loginToken) {
wx.showToast({
title: 'Please log in first',
icon: 'none'
})
this.goRegist()
return
}
if (!this.data.cities) {
wx.showToast({
title: 'Please select a city',
icon: 'none'
})
return
}
WXAPI.addAddress({
token: loginToken.token,
provinceId: this.data.provinces[this.data.pIndex].id,
cityId: this.data.cities[this.data.cIndex].id,
districtId: this.data.areas ? this.data.areas[this.data.aIndex].id : '',
linkMan: e.detail.value.linkMan,
address: e.detail.value.address,
mobile: e.detail.value.mobile,
code: e.detail.value.code,
}).then(res => {
console.log(res)
if (res.code == 0) {
wx.showToast({
title: 'Added successfully',
icon: 'success'
})
wx.navigateBack()
} else {
wx.showToast({
title: res.msg,
icon: 'none'
})
}
})
},
})
```
**For more detailed parameter usage and more advanced advanced usage methods, please refer to the API interface documentation: **
["api interface document"](#)
_More usage methods about apifm-wxapi: _
["apifm-wxapi Instructions for Use"](https://github.com/gooking/apifm-wxapi/blob/master/instructions.md)
_Download the Demo code of this case: _
["apifm-wxapi using Demo program"](https://github.com/gooking/apifm-wxapi-demo)
Looking forward to your progress!
grateful!