sqb-wx-invoice-title-picker

微信小程序发票抬头选择器，提供组件和 API 两种使用方式。

基于 wx.chooseInvoiceTitle 接口封装，选择发票抬头后自动将抬头信息（名称、税号、地址、电话、银行、账号等）合并到目标 URL 参数中，并支持 web-view 跳转。

安装

npm install [email protected]

在微信开发者工具中：工具 → 构建 npm

使用方式

组件方式

在页面或自定义组件的 JSON 配置中引入：

{
  "usingComponents": {
    "sqb-wx-invoice-title-picker": "sqb-wx-invoice-title-picker"
  }
}

在 WXML 中使用：

<sqb-wx-invoice-title-picker
  query="{{invoiceUrl}}"
  bind:complete="onComplete"
/>

bind:complete 为可选监听，不需要回调时可以省略：

<sqb-wx-invoice-title-picker query="{{invoiceUrl}}" />

Page({
  data: {
    invoiceUrl: 'https://example.com/#/invoice?token=123'
  },
  onComplete(e) {
    const { type, url, invoiceInfo, message, shouldNavigate } = e.detail;
    if (type === 'success') {
      console.log('选择成功，合并后URL:', url);
      console.log('抬头信息:', invoiceInfo);
    } else if (type === 'cancel') {
      console.log('用户取消选择');
    } else {
      console.log('选择失败:', message);
    }
  }
});

组件属性

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | query | String | '' | 目标 URL（选择抬头后会将信息合并到该 URL 参数中 |

组件事件

| 事件名 | 说明 | 回调参数 | |--------|------|----------| | complete | 选择流程结束时触发 | e.detail 见下方说明 |

complete 事件 detail

interface CompleteDetail {
  type: 'success' | 'cancel' | 'error';
  url: string;           // 合并抬头信息后的 URL（成功时）或原始 URL
  invoiceInfo: object | null;  // 发票抬头信息（成功时返回）
  message: string;       // 结果描述
  shouldNavigate: boolean; // 是否建议跳转到 url
}

组件行为说明

• 传入 query 后自动调用微信发票抬头选择接口
• 选择成功：将抬头信息合并到 URL 参数，通过 web-view 展示合并后的页面
• 用户取消：通过 web-view 展示原始页面
• 发生错误：通过 web-view 展示原始页面

API 方式

适用于不需要 web-view 展示，只需要获取合并后 URL 的场景。

url 参数支持编码或未编码的 URL，内部会自动调用 decodeURIComponent 解码。

Promise + callback 模式（推荐）

const { chooseInvoiceTitle } = require('sqb-wx-invoice-title-picker/utils');

chooseInvoiceTitle({
  url: 'https://example.com/#/invoice?token=123',
  callback: ({ code, data, message }) => {
    if (code === 'success') {
      console.log('选择成功，返回URL:', data.returnUrl);
    } else if (code === 'cancel') {
      console.log('用户取消选择');
    } else if (code === 'error') {
      console.log('选择失败:', message);
    }
  },
});

纯 Promise 模式

const { chooseInvoiceTitle } = require('sqb-wx-invoice-title-picker/utils');

chooseInvoiceTitle({
  url: 'https://example.com/#/invoice?token=123'
}).then(({ code, data, message }) => {
  if (code === 'success') {
    console.log('合并后URL:', data.returnUrl);
  }
});

API 返回结果

interface Result {
  code: 'success' | 'cancel' | 'error';
  message: string;
  data: {
    returnUrl: string;
  };
}

| code | 说明 | |------|------| | success | 用户完成选择，data.returnUrl 为合并抬头信息后的 URL | | cancel | 用户取消选择，data.returnUrl 为原始 URL | | error | 发生错误（微信 API 不可用、网络错误等），data.returnUrl 为原始 URL |

URL 合并规则

选择发票抬头后，以下字段会自动追加到 URL 的查询参数中：

| 参数名 | 说明 | |--------|------| | type | 发票抬头类型 | | title | 发票抬头名称 | | taxNumber | 税号 | | bankName | 银行名称 | | bankAccount | 银行账号 | | companyAddress | 公司地址 | | telephone | 电话（若为空则取 phoneNumber） |

对于包含 hash（#）的 URL，参数会合并到 hash 部分；否则合并到查询字符串部分。

许可证

MIT