支付寶小程序API 選擇城市

2020-09-14 13:57 更新

my.chooseCity

簡介

my.chooseCity 是打開城市選擇列表的 API。

掃碼體驗(yàn)

選擇城市.jpeg

示例代碼

<!-- API-DEMO page/API/choose-city/choose-city.axml-->
<view class="page">
  <view class="page-description">選擇城市 API</view>
  <view class="page-section">
    <view class="page-section-title">my.chooseCity</view>
    <view class="page-section-demo">
      <button type="primary" onTap="chooseCity">選擇城市</button>
    </view>
  </view>
  <view class="page-description">修改當(dāng)前定位城市的名稱 API</view>
  <view class="page-section">
    <view class="page-section-title">my.setLocatedCity</view>
    <view class="page-section-demo">
      <button type="primary" onTap="setLocatedCity">修改當(dāng)前定位城市的名稱</button>
    </view>
  </view>
</view>
// API-DEMO page/choose-city/choose-city.js
Page({
  chooseCity() {
    my.chooseCity({
      showLocatedCity: true,
      showHotCities: true,
      success: (res) => {
        my.alert({
          title: 'chooseCity response: ' + JSON.stringify(res),
        });
      },
    });
  },
  setLocatedCity() {
    my.onLocatedComplete({
      success: (res) => {
        my.setLocatedCity({
          locatedCityId:res.locatedCityId,//res.locatedCityId
          locatedCityName:'修改后的城市名', 
          success: (res) => {
            my.alert({ content: '修改當(dāng)前定位城市成功' + JSON.stringify(res), });
          },
          fail: (error) => {
            my.alert({ content: '修改當(dāng)前定位城市失敗' + JSON.stringify(error), });
          },
        });
      },
      fail: (error) => {
        my.alert({ content: 'onLocatedComplete失敗' + JSON.stringify(error), });
      }
    });
    my.chooseCity({
      showLocatedCity: true,
      showHotCities: true,
      setLocatedCity: true,
      success: (res) => {
        my.alert({
          title: 'chooseCity response: ' + JSON.stringify(res),
        });
      },
    });
  },
});

入?yún)?/h4>

Object 類型，屬性如下：

屬性 類型 必填 描述
showLocatedCity Boolean 否 是否顯示當(dāng)前定位城市，默認(rèn) false。
showHotCities Boolean 否 是否顯示熱門城市，默認(rèn) true。
setLocatedCity Boolean 否 是否修改當(dāng)前定位城市，默認(rèn) false，如果 showLocatedCity 為 false，此設(shè)置無效。
cities Object Array 否 自定義城市列表，列表內(nèi)對象字段見下方 自定義城市列表 cities 表。
hotCities Object Array 否 自定義熱門城市列表，列表內(nèi)對象字段同 cities。
customHistoryCities Object Array 否 自定義歷史訪問城市列表，列表內(nèi)對象字段同 cities。
success Function 否 調(diào)用成功的回調(diào)函數(shù)。
fail Function 否 調(diào)用失敗的回調(diào)函數(shù)。
complete Function 否 調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）。

自定義城市列表 cities

cities 內(nèi)對象字段如下所示：

屬性 類型 必填 描述
city String 是 城市名。
adCode String 是 行政區(qū)劃代碼。不同行政區(qū)域?qū)?yīng)的代碼可參見 中華人民共和國縣以上行政區(qū)劃代碼。
spell String 是 城市名對應(yīng)拼音拼寫，方便用戶搜索。

示例代碼：

//.js
my.chooseCity({
  cities: [
    {
      city: '朝陽區(qū)',
      adCode: '110105',
      spell: 'chaoyang'
    },
    {
      city: '海淀區(qū)',
      adCode: '110108',
      spell: 'haidian'
    },
    {
      city: '豐臺區(qū)',
      adCode: '110106',
      spell: 'fengtai'
    },
    {
      city: '東城區(qū)',
      adCode: '110101',
      spell: 'dongcheng'
    },
    {
      city: '西城區(qū)',
      adCode: '110102',
      spell: 'xicheng'
    },
    {
      city: '房山區(qū)',
      adCode: '110111',
      spell: 'fangshan'
    }
  ],
  hotCities: [
    {
      city: '朝陽區(qū)',
      adCode: '110105'
    },
    {
      city: '海淀區(qū)',
      adCode: '110108'
    },
    {
      city: '豐臺區(qū)',
      adCode: '110106'
    }
  ],
  success: (res) => {
    my.alert({
      content: res.city + ':' + res.adCode
    });
  },
});
success 回調(diào)函數(shù)

說明：如果用戶沒有選擇任何城市，直接點(diǎn)擊了返回，將不會觸發(fā)回調(diào)函數(shù)。

屬性 類型 描述
city String 城市名。
adCode String 行政區(qū)劃代碼。
longitude Number 經(jīng)度（注意：僅用戶選擇當(dāng)前定位城市才會返回）。支付寶客戶端 10.1.32 及以上版本開始支持。
latitude Number 緯度（注意：僅用戶選擇當(dāng)前定位城市才會返回）。支付寶客戶端 10.1.32 及以上版本開始支持。

my.onLocatedComplete

簡介

my.onLocatedComplete 是自定義 onLocatedComplete 函數(shù)，可以監(jiān)聽該頁面地理位置定位完的回調(diào)，只針對 my.chooseCity 中屬性 setLocatedCity 為 true 的情況。

使用限制

IDE 模擬器暫不支持調(diào)試，請以真機(jī)調(diào)試結(jié)果為準(zhǔn)。

掃碼體驗(yàn)

image

示例代碼

<!-- API-DEMO page/API/choose-city/choose-city.axml-->
<view class="page">
  <view class="page-description">選擇城市 API</view>
  <view class="page-section">
    <view class="page-section-title">my.chooseCity</view>
    <view class="page-section-demo">
      <button type="primary" onTap="chooseCity">選擇城市</button>
    </view>
  </view>
  <view class="page-description">修改當(dāng)前定位城市的名稱 API</view>
  <view class="page-section">
    <view class="page-section-title">my.setLocatedCity</view>
    <view class="page-section-demo">
      <button type="primary" onTap="setLocatedCity">修改當(dāng)前定位城市的名稱</button>
    </view>
  </view>
</view>

// API-DEMO page/choose-city/choose-city.js
Page({
  chooseCity() {
    my.chooseCity({
      showLocatedCity: true,
      showHotCities: true,
      success: (res) => {
        my.alert({
          title: 'chooseCity response: ' + JSON.stringify(res),
        });
      },
    });
  },
  setLocatedCity() {
    my.onLocatedComplete({
      success: (res) => {
        my.setLocatedCity({
          locatedCityId:res.locatedCityId,//res.locatedCityId
          locatedCityName:'修改后的城市名', 
          success: (res) => {
            my.alert({ content: '修改當(dāng)前定位城市成功' + JSON.stringify(res), });
          },
          fail: (error) => {
            my.alert({ content: '修改當(dāng)前定位城市失敗' + JSON.stringify(error), });
          },
        });
      },
      fail: (error) => {
        my.alert({ content: 'onLocatedComplete失敗' + JSON.stringify(error), });
      }
    });
    my.chooseCity({
      showLocatedCity: true,
      showHotCities: true,
      setLocatedCity: true,
      success: (res) => {
        my.alert({
          title: 'chooseCity response: ' + JSON.stringify(res),
        });
      },
    });
  },
});

入?yún)?/h4>
屬性 類型 描述
success Function 調(diào)用成功的回調(diào)函數(shù)。
fail Function 調(diào)用失敗的回調(diào)函數(shù)。
complete Function 調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）。

返回值

屬性 類型 描述
longitude Number 當(dāng)前定位城市經(jīng)度。
latitude Number 當(dāng)前定位城市經(jīng)度。
locatedCityId String 當(dāng)前定位城市 id，setLocatedCity 的時(shí)候帶上。

返回值示例代碼

{
    longitude:100.3,
    latitude:30.1,
    locatedCityId:""
}

my.setLocatedCity

簡介

my.setLocatedCity 是用于修改 my.chooseCity 中的默認(rèn)定位城市的名稱的 API。

使用限制

IDE 模擬器暫不支持調(diào)試，請以真機(jī)調(diào)試結(jié)果為準(zhǔn)。

掃碼體驗(yàn)

image

示例代碼

<!-- .axml -->
<view class="page">
  <view class="page-description">選擇城市</view>
  <view class="page-section">
    <view class="page-section-title">chooseCity</view>
    <view class="page-section-demo">
      <button type="primary" onTap="chooseCity">選擇城市</button>
      <button type="primary" onTap="noChooseCity">沒有熱門/當(dāng)前城市</button>
      <button type="primary" onTap="selfChooseCity">自定義選擇的城市</button>
      <button type="primary" onTap="self_chooseCity">自定義選擇的城市</button>
      <button type="primary" onTap="setLocatedCity">setLocatedCity</button>
    </view>
  </view>
</view>
// .js
Page({
  data: {
    localcity: '天津',
  },
  chooseCity() {
    my.chooseCity({
      showLocatedCity: true,
      showHotCities: true,
      success: (res) => {
        my.alert({ title: `chooseAlipayContact response: ${JSON.stringify(res)}` })
      },
      fail: (error) => {
        my.alert({ content: `選擇失敗${JSON.stringify(error)}` })
      },
      complete: () => {
        my.showToast({ content: 'complete回調(diào)' })
      },
    })
  },
  noChooseCity() {
    my.chooseCity({
      showLocatedCity: false,
      showHotCities: false,
      success: (res) => {
        my.alert({ title: `操作成功: ${JSON.stringify(res)}` })
      },
      fail: (error) => {
        my.alert({ content: `選擇失敗${JSON.stringify(error)}` })
      },
    })
  },
  selfChooseCity() {
    my.chooseCity({
      cities: [
        {
          city: '朝陽區(qū)',
          adCode: '110105',
          spell: 'chaoyang',
        },
        {
          city: '海淀區(qū)',
          adCode: '110108',
          spell: 'haidian',
        },
        {
          city: '豐臺區(qū)',
          adCode: '110106',
          spell: 'fengtai',
        },
        {
          city: '東城區(qū)',
          adCode: '110101',
          spell: 'dongcheng',
        },
        {
          city: '西城區(qū)',
          adCode: '110102',
          spell: 'xicheng',
        },
        {
          city: '房山區(qū)',
          adCode: '110111',
          spell: 'fangshan',
        },
      ],
      hotCities: [
        {
          city: '朝陽區(qū)',
          adCode: '110105',
        },
        {
          city: '海淀區(qū)',
          adCode: '110108',
        },
        {
          city: '豐臺區(qū)',
          adCode: '110106',
        },
      ],
      success: (res) => {
        my.alert({ title: `操作成功: ${JSON.stringify(res)}` })
      },
      fail: (error) => {
        my.alert({ content: `選擇失敗${JSON.stringify(error)}` })
      },
    })
  },


  self_chooseCity() {
    my.chooseCity({
      showLocatedCity: true,
      showHotCities: true,
      cities: [
        {
          city: '朝陽區(qū)',
          adCode: '110105',
          spell: 'chaoyang',
        },
        {
          city: '海淀區(qū)',
          adCode: '110108',
          spell: 'haidian',
        },
        {
          city: '豐臺區(qū)',
          adCode: '110106',
          spell: 'fengtai',
        },
        {
          city: '東城區(qū)',
          adCode: '110101',
          spell: 'dongcheng',
        },
        {
          city: '西城區(qū)',
          adCode: '110102',
          spell: 'xicheng',
        },
      ],
      hotCities: [
        {
          city: '朝陽區(qū)',
          adCode: '110105',
        },
        {
          city: '海淀區(qū)',
          adCode: '110108',
        },
        {
          city: '豐臺區(qū)',
          adCode: '110106',
        },
      ],
      success: (res) => {
        my.alert({ title: `操作成功: ${JSON.stringify(res)}` })
      },
      fail: (error) => {
        my.alert({ content: `選擇失敗${JSON.stringify(error)}` })
      },
    })
  },


  multiLevelSelect() {
    my.multiLevelSelect({
      title: '請選擇城市', // 級聯(lián)選擇標(biāo)題
      list: [
        {
          name: '杭州市', // 條目名稱
          subList: [
            {
              name: '西湖區(qū)',
              subList: [
                {
                  name: '文一路',
                },
                {
                  name: '文二路',
                },
                {
                  name: '文三路',
                },
              ],
            },
            {
              name: '濱江區(qū)',
              subList: [
                {
                  name: '濱河路',
                },
                {
                  name: '濱興路',
                },
                {
                  name: '白馬湖動漫廣場',
                },
              ],
            },
          ], // 級聯(lián)子數(shù)據(jù)列表
        },
      ],
      success: (result) => {
        console.log(result)
        my.alert({ content: `級聯(lián)${JSON.stringify(result)}` })
      },
      fail: (error) => {
        my.alert({ content: `調(diào)用失敗${JSON.stringify(error)}` })
      },
    })
  },


  setLocatedCity() {
    my.chooseCity({
      showLocatedCity: true,
      showHotCities: true,
      setLocatedCity: true,
      success: (res) => {
        this.setData({
          localcity: res.city,
        })
        my.alert({ title: `chooseAlipayContact response: ${JSON.stringify(res)}` })
      },
      fail: (error) => {
        my.alert({ content: `選擇失敗${JSON.stringify(error)}` })
      },
      complete: () => {
        my.showToast({ content: 'complete回調(diào)' })
      },
    })
    my.onLocatedComplete({
      success: (res) => {
        my.setLocatedCity({
          locatedCityId: res.locatedCityId,
          locatedCityName: this.data.localcity,
          success: (result) => {
            console.log(result)
          },
          fail: (error) => {
            my.alert({
              content: `修改當(dāng)前定位城市失敗${JSON.stringify(error)}`,
            })
          },
        })
      },
      fail: (error) => {
        my.alert({
          content: `onLocatedComplete失敗${JSON.stringify(error)}`,
        })
      },
    })
  },
})

入?yún)?/h4>
屬性 類型 必填 描述
locatedCityId String 是 當(dāng)前定位城市 ID，my.chooseCity 接口的 onLocatedComplete 返回。
locatedCityName String 是 當(dāng)前定位城市的名稱。
locatedCityAdCode String 否 當(dāng)前定位城市的行政區(qū)劃代碼，不傳值時(shí)以控件默認(rèn)拿到的為準(zhǔn)。
locatedCityPinyin String 否 當(dāng)前定位城市的拼音，不傳值時(shí)以控件默認(rèn)拿到的為準(zhǔn)。
success Function 否 調(diào)用成功的回調(diào)函數(shù)。
fail Function 否 調(diào)用失敗的回調(diào)函數(shù)。
complete Function 否 調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）。

success 返回值
屬性 類型 描述
locatedCityName String 當(dāng)前定位城市的名稱。

fail 返回值
屬性 類型 描述
error String 錯誤碼。
errorMessage String 錯誤描述。

錯誤碼

錯誤碼 描述 解決方案
11 參數(shù)類型錯誤。 檢查參數(shù)類型是否正確。
12 必填參數(shù)為空。 請確認(rèn)參數(shù) locatedCityId、locatedCityName 是否已填寫。
13 locatedCityId 不匹配。 請確保與 my.chooseCity 接口的 onLocatedComplete 的 locatedCityId 保持一致。

my.regionPicker

簡介

my.regionPicker 是多級省市區(qū)選擇器 API，自帶省市區(qū)數(shù)據(jù)源。

使用限制

  • 基礎(chǔ)庫 1.23.0 或更高版本；支付寶客戶端 10.1.90 或更高版本，若版本較低，建議采取 兼容處理。
  • IDE 模擬器暫不支持調(diào)試，請以真機(jī)調(diào)試結(jié)果為準(zhǔn)。

示例代碼

<!-- .axml -->
<view class="page">
  <view class="page-description">多級省市區(qū)選擇器</view>
  <view class="page-section">
    <view class="page-section-title">regionPicker</view>
    <view class="page-section-demo">
      <button type="primary" onTap="regionPicker">選擇城市</button>
    </view>
  </view>
</view>
Page({
    regionPicker() {
        my.regionPicker({
            mergeOptions: {


                // 新增
                add: [{
                    "pid": "1",
                    "name": "新省",
                    "nextId": "1111",
                    "id": "110000",
                    "subList": [{
                        "name": "北京市",
                        "id": "110100",
                        "subList": [{
                            "name": "東城區(qū)",
                            "id": "110101"
                        }]
                    }]
                }],


                // 刪除
                remove: [{
                    "id": "110000"
                }],


                // 更新
                update: [{
                    "name": "北京",
                    "id": "110000",
                    "subList": [{
                        "name": "北京市",
                        "id": "110100",
                        "subList": [{
                            "name": "東城區(qū)",
                            "id": "110101"
                        }]
                    }]
                }]
            },
            success: (res) =>{
                my.alert({
                    title: 'regionPicker response: ' + JSON.stringify(res),
                })
              },
        });
      }
    })

入?yún)?/h4>
名稱 類型 必填 描述
title String 否 標(biāo)題。
customItem String 否 可為每一列的頂部添加一個自定義的選項(xiàng)。
mergeOptions Object 否 自定義修改城市數(shù)據(jù)，支持刪除、添加和更新城市信息。
selectedItem Array 否 表示選中的省市區(qū)，默認(rèn)選中每一列的第一個值
success Function 否 調(diào)用成功的回調(diào)函數(shù)
fail Function 否 調(diào)用失敗的回調(diào)函數(shù)

mergeOptions 對象

說明： mergeOptions 對城市信息的刪除、添加、更新操作不會全局生效，僅單次生效。

屬性 類型 描述
remove Array 刪除城市信息。
add Array 添加城市信息。
update Array 更新城市信息

remove 對象
屬性 類型 描述
id String 需要移除的省份 ID。

add 對象
屬性 類型 描述
pid String 插入點(diǎn)之上的省份 ID。
nextId String 插入點(diǎn)之下的省份 ID。
id String 增加對象的 ID。
name String 增加對象的名稱。
subList Array 省內(nèi)完整的市和區(qū)信息。示例："subList": [{"name": "北京市","id": "110100","subList": [{"name": "東城區(qū)","id": "110101"}]

update 對象
屬性 類型 描述
id String 更新對象的 ID。
name String 增加對象的名稱。
subList Array 省內(nèi)完整的市和區(qū)信息。示例："subList": [{"name": "北京市","id": "110100","subList": [{"name": "東城區(qū)","id": "110101"}]

success 返回值
屬性 類型 描述
data Array 選擇的省市區(qū)名稱數(shù)組。

fail 返回值
屬性 類型 描述
error String 錯誤碼。
errorMessage String 錯誤描述。

錯誤碼

錯誤碼 說明 解決方案
11 用戶取消選擇 重新選擇即可。
10001 用戶沒有選擇數(shù)據(jù) 重新選中數(shù)據(jù)即可。
以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號