@netty0911/tiny-app
v2.0.15
Published
tiny app
Downloads
7
Readme
核心库
安装
npm install @netty0911/tiny-app
应用注册
使用 app.routes()
注册应用。
app.routes()
接收两个参数:
name
:应用名称routes
:应用路由,即应用名称和应用页面的映射关系
应用路由本质上使用了react-router-dom的路由配置,因此可以使用react-router-dom的路由配置方式。
示例:
下列代码注册了一个名为 system
的应用,该应用包含两个页面:system/product
和 system/product/detail
。
import { app } from '@netty0911/tiny-app';
app.routes('system', {
'system/product': ProductIndexPage,
'system/product/detail': ProductDetailPage,
})
以上代码被实际处理为:
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Routes, Route } from 'react-router-dom';
import { history } from '@netty0911/tiny-app';
ReactDOM.render(
<Router basename="/" location={history.location} navigationType={history.action} navigator={history}>
<Routes>
<Route path="system/product" element={<ProductIndexPage />} />
<Route path="system/product/detail" element={<ProductDetailPage />} />
</Routes>
</Router>,
document.getElementById('tiny-app')
);
应用路由
使用 @netty0911/tiny-app
提供的 history
进行路由操作。
export interface History {
readonly action: Action;
readonly location: Location;
createHref(to: To): string;
push(to: To, state?: any): void;
replace(to: To, state?: any): void;
go(delta: number): void;
back(): void;
forward(): void;
listen(listener: Listener): () => void;
block(blocker: Blocker): () => void;
}
监听路由变化:
import { useEffect } from 'react';
import { history } from '@netty0911/tiny-app';
export default function ProductIndexPage() {
useEffect(() => {
const unListen = history.listen(({ location, action }) => {
// 这里可以做一些路由变化的操作
console.log(location.pathname, action);
});
return () => unListen();
}, [history]);
return (
<div>
<h1>ProductIndexPage</h1>
</div>
);
}
用户信息
- 获取用户信息:
app.user.current()
- 获取用户反CSRF凭据:
app.user.getCSRFToken()
- 检查用户是否在指定白名单中:
app.user.checkWhitelist()
- 清除用户登录态,并跳转到登录页:
app.user.redirectToLogin()
- 清除用户登录态,并跳转到登录页:
app.user.logout()
API请求
使用 app.cgi.request(body, options)
进行接口请求。
export interface RequestBody {
/** 服务名 */
service: string;
/** 接口名 */
action: string;
/** 请求数据 */
data?: any;
}
export interface RequestOptions {
/**
* 是否在顶部显示接口错误
* 默认为 true,会提示云 API 调用错误信息,如果自己处理异常,请设置该配置为 false
*/
tipErr?: boolean;
/**
* 请求时是否在顶部显示 Loading 提示
* 默认为 true
*/
tipLoading?: boolean;
/**
* 前端事务进行跟踪的请求头 X-TC-TraceId
*
* - 需满足标准uuid的正则 ` ^(\\w{8}(-\\w{4}){3}-\\w{12}?)`
* 例如:958cccac-ab2a-dcfe-6fc4-1456f8ddc3a9
*/
traceId?: string;
}
数据上报
点击流上报
方式1:
app.insight.reportHotTag("xxx.yyy.zzz")
方式2:
<a data-hot="xxx.yyy.zzz">链接</a>
事件上报
- 总字段个数(stringFields + integerFields)不能超过 20 个
- 字符串字段的长度,不能超过 4096
app.insight.stat({
ns: 'cvm',
event: 'restart',
stringFields: {
instance: 'ins-1d7x8C3s'
},
integerFields: {
instanceCount: 1
}
});
任务上报
上报任务适合需要统计任务成功率和耗时场景
const cvmRestartStat = app.insight.statTask('cvm-restart', 'cvm', 15000);
try {
await performCvmRestart(instanceIds);
// 上报成功,可以附带 int 和 string 变量
cvmRestartStat.success({
stringFields: {
instance: instanceIds.join(';'),
},
integerFields: {
instanceCount: instanceIds.length,
}
});
} catch(error) {
// 失败可以上报 stack
cvmRestartStat.fail({
stack: error?.stack
});
}
服务器
获取服务器时间
获取控制台的服务器时间。
import { getCurrentServerTime } from '@tencent/tea-app';
console.log(getCurrentServerTime().toISOString());