npm install @uxda/appkit小程序应用开发包
向诸小程序提供供用的组件及基础设施
模块:
* payment 支付
* balance 账户、代币(云豆)余额
* auth 登录及会话状态 (待定)
``bash`
git clone git@10.1.108.137:fed/appkit.git
cd appkit
yarn link
然后 cd 到(周转)小程序根目录执行:
`bash`
yarn link @uxda/appkit
完成 npm link
typescript
import AppKit from '@uxda/appkit'
import '@uxda/appkit/appkit.css'
`
AppKit 初始化
在应用入口页调用(示例)
`typescript
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组件
$3
`typescript
import { RechargeView } from '@uxda/appkit'
``html
app="crm"
tenant="1"
@complete="onRechargeComplete" />
`#### 属性 props
#### 事件 emits
* @complete: 充值完成时发生
$3
`
import { AccountView } from '@uxda/appkit'
`
`html
`#### 事件 emits
* @recharge 点击充值按钮时发生
$3
`typescript
import { BalanceCard } from '@uxda/appkit'
``html
`#### 事件 emits
* app 配置到组件上的 app code
* @drill 点击账户详情时发生
* @recharge 点击充值按钮时发生
场景端需定义以上跳转逻辑:
`typescript
function onBalanceCardDrill () {
//...
}function onBalanceCardRecharge () {
//...
}
`$3
* reload() 刷新数据$3
`typescript
import { BalanceReminder } from '@uxda/appkit'
``html
@recharge="onBalanceReminderRecharge" />
`#### 事件 emits
* @recharge 点击充值按钮时发生
公共API
$3
`typescript
import { useAppKit } from '@uxda/appkit'
const $app = useAppKit()
$app.invokeRecharge({
app: 'crm',
tenant: '1',
})
`$3
`typescript
import { useAppKit } from '@uxda/appkit'
const $app = useAppKit()
$app.requestPayment({
app: 'crm',
tenant: '1',
amount: 100,
user: '' // wx.login 之后得到的用户临时凭证
})
`Hooks (Vue Composables)
$3
用于获取或设置 custom tab bar`typescript
import { useTabbar } from '@uxda/appkit-next'onMounted(() => {
const { setTab } = useTabbar()
setTab('home')
})
`
以上代码用于切换到 /pages/home/index 时, 设置 tab bar 选中项为 'home'
在 custom-tab-bar/index.vue 需要做以下设置`typescript
import { useSafeArea, useTabbar } from '@uxda/appkit-next'const { onTabChange } = useTabbar()
onTabChange((value: string) => {
selected.value = value
})
``