useChooseAddress

获取用户收货地址。调起用户编辑收货地址原生界面，并在编辑完成后返回用户选择的地址。

何时使用

当需要使用用户地址时

提示

注意: h5端仅在公众号内可使用. 须在jsApiList中显式的将openAddress纳入.

API

const choose = useChooseAddress();

参数说明

无

返回值说明

参数	类型	说明
chooseAddress	PromiseWithoutOptionAction<Taro.chooseAddress.SuccessCallbackResult>	获取用户收货地址

代码演示

React

wechat/useChooseAddress/index

import React from 'react';
import { useState } from '@taro-hooks/core';
import { useChooseAddress, useModal } from 'taro-hooks';
import DemoContent from '@src/components/DemoContent';
import { Button, Cell } from '@taroify/core';

export default () => {
  const choose = useChooseAddress({});
  const show = useModal({ mask: true, title: '获取结果', showCancel: false });
  const [address, setAddress] =
    useState<Taro.chooseAddress.SuccessCallbackResult>();

  const handleChoose = async () => {
    let content = '获取成功';
    try {
      const result = await choose();
      setAddress(result);
    } catch (e) {
      content = e.errMsg || e.message;
    }
    show({ content });
  };

  return (
    <DemoContent>
      <Button
        block
        color="primary"
        className="gap"
        onClick={handleChoose}
        shape="square"
      >
        获取收货地址
      </Button>
      {Object.keys(address).length ? (
        <Cell.Group clickable title="地址信息">
          {Object.entries(address).map(([key, value]) => (
            <Cell key={key} title={key}>
              {JSON.stringify(value)}
            </Cell>
          ))}
        </Cell.Group>
      ) : (
        <Cell>暂无信息</Cell>
      )}
    </DemoContent>
  );
};

Vue

wechat/useChooseAddress/index

<template>
  <demo-content>
    <nut-button
      class="gap"
      shape="square"
      type="primary"
      block
      @click="handleChoose()"
      >获取收货地址</nut-button
    >
    <nut-cell-group title="地址信息">
      <nut-cell
        v-for="(value, key) in address"
        :key="key"
        :title="key"
        :desc="value"
      ></nut-cell>
    </nut-cell-group>
  </demo-content>
</template>

<script setup lang="ts">
import { useState } from '@taro-hooks/core';
import { useChooseAddress, useModal } from 'taro-hooks';

const choose = useChooseAddress();
const show = useModal({ mask: true, title: '获取结果', showCancel: false });
const [address, setAddress] =
  useState<Taro.chooseAddress.SuccessCallbackResult>();

const handleChoose = async () => {
  let content = '获取成功';
  try {
    const result = await choose();
    setAddress(result);
  } catch (e) {
    content = e.errMsg || e.message;
  }
  show({ content });
};
</script>

Hook 支持度

微信小程序	H5	ReactNative
✔️	✔️