@uxda/appkit

AppKit

小程序应用开发包

向诸小程序提供供用的组件及基础设施

模块:

• payment 支付
• balance 账户、代币(云豆)余额
• auth 登录及会话状态 (待定)

将 AppKit 加入应用项目

git clone git@10.1.108.137:fed/appkit.git
cd appkit
yarn link

然后 cd 到(周转)小程序根目录执行:

yarn link @uxda/appkit

完成 npm link

用法

import AppKit from '@uxda/appkit'
import '@uxda/appkit/appkit.css'

AppKit 初始化

在应用入口页调用(示例)

const App = createApp({})
App.use(AppKit, {
  app: () => 'cloudkitPro',
  tenant: () => '1',
  token: () => localStorage.getItem('token'),
  baseUrl: () => process.env.TARO_APP_BASE_URL,
  401: () => {
    // 登录态丢失时的处理
  }
})

为 AppKit 的运行提供必需的 API 参数

• app: 当前的 app code (嵌入接口调用的 header 参数)
• tenant: 租户ID 需要提供以便调用接口
• token: 用户登录态 token
• baseUrl: 调用 API 的URL域名
• 401： 登录态丢失异常处理 (通常要跳转登录页)

UI组件

1️⃣ 充值用户界面 <recharge-view>

import { RechargeView } from '@uxda/appkit'

<template>
  <recharge-view
    app="crm"
    tenant="1"
    @complete="onRechargeComplete" />
</template>

属性 props

事件 emits

• @complete: 充值完成时发生

2️⃣ 账户页 <account-view>

import { AccountView } from '@uxda/appkit'

<template>
  <account-view app="crm" @recharge=onAccountViewRecharge />
<template>

事件 emits

• @recharge 点击充值按钮时发生

3️⃣ 账户卡片 <balance-card>

import { BalanceCard } from '@uxda/appkit'

<template>
  <balance-card app="crm" @drill="onBalanceCardDrill" @recharge="onBalanceCardRecharge" />
<template>

事件 emits

• app 配置到组件上的 app code
• @drill 点击账户详情时发生
• @recharge 点击充值按钮时发生

场景端需定义以上跳转逻辑:

function onBalanceCardDrill () {
  //...
}

function onBalanceCardRecharge () {
  //...
}

方法 methods

• reload() 刷新数据

4️⃣ 余额不足提示框 <balance-reminder>

import { BalanceReminder } from '@uxda/appkit'

<balance-reminder v-model="balanceReminderOpen" 
  @recharge="onBalanceReminderRecharge" />

事件 emits

• @recharge 点击充值按钮时发生

公共API

1️⃣ 唤起充值(跳支付中心小程序) $app.invokeRecharge()

import { useAppKit } from '@uxda/appkit'
const $app = useAppKit()
$app.invokeRecharge({
  app: 'crm',
  tenant: '1',
})

2️⃣ 唤起充值(小程序内直接支付、不跳) $app.requestPayment()

import { useAppKit } from '@uxda/appkit'
const $app = useAppKit()
$app.requestPayment({
  app: 'crm',
  tenant: '1',
  amount: 100,
  user: '' // wx.login 之后得到的用户临时凭证
})

Hooks (Vue Composables)

useTabbar

用于获取或设置 custom tab bar

import { useTabbar } from '@uxda/appkit-next'

onMounted(() => {
  const { setTab } = useTabbar()
  setTab('home')
})

以上代码用于切换到 /pages/home/index 时, 设置 tab bar 选中项为 'home' 在 custom-tab-bar/index.vue 需要做以下设置

import { useSafeArea, useTabbar } from '@uxda/appkit-next'

const { onTabChange } = useTabbar()
onTabChange((value: string) => {
  selected.value = value
})

以上代码设置响应页面内的 setTab() 动作