import { XmPickerModal } from "@/components/public";
XmPickerModal({
value: ["哈哈哈1", "哈哈哈3"],
list: [
[{ title: "哈哈哈1" }],
[{ title: "哈哈哈1" }],
],
onPrevent(ev) {
}
}).then((res) => {
console.log(res);
})
{
/**标题 @default 请选择 */
title?: React.ReactNode,
/**传入此函数则拦截 */
onPrevent?: (p: { onAffirm: (param?: any | any[]) => void, onCancel: () => void, setLoading: React.Dispatch<React.SetStateAction<boolean, value: any | any[] }) => void,
/**确认按钮文字 @default "取消" */
confirmText?: React.ReactNode,
/**取消按钮文字 @default "确认" */
cancelText?: React.ReactNode,
/**数据列表 */
list: ({ [key: string]: any } | string)[][],
/**默认选中的值,不传入则默认为[0,...] */
value?: any | any[],
/**标题需要读取哪个字段 @default title @default undefined */
valueKey?: string,
/**picker 改变执行,如果传入此函数,则需要手动设置选中的值 */
onPickerChange?: (p: TypePickerChange) => void,
/**是否为只读状态,只读状态下无法切换选项 @default false */
readonly?: boolean,
/**可见的选项相邻个数 @default 3 */
siblingCount?: number,
}
import { XmDateTimePicker } from "@/components/public";
XmDateTimePicker({
value: new Date("2030-02-01"),
onPrevent(ev) {
}
}).then((res) => {
console.log(res);
})
{
/**标题 @default 请选择 */
title?: React.ReactNode,
/**传入此函数则拦截 */
onPrevent?: (p: { onAffirm: (param?: any) => void, onCancel: () => void, setLoading: React.Dispatch<React.SetStateAction<boolean }) => void,
/**确认按钮文字 @default "取消" */
confirmText?: React.ReactNode,
/**取消按钮文字 @default "确认" */
cancelText?: React.ReactNode,
/**返回的时间格式化 @default */
template?: string,
/**开始时间 @default 1970-01-01 */
min?: Date
/**结束时间 @default 2060-12-01 */
max?: Date
/**时间选择器展示的行 @default // ["year", "month", "day", "hour", "minute", "second"] */
fields?: DatetimePickerColumnType[]
/**选项过滤函数 */
filter?(type: DatetimePickerColumnType, values: string[]): string[]
/**选项格式化函数 */
formatter?(type: DatetimePickerColumnType, value: string): string
/**时间类型,可选值为 date time year-month month-day date-hour hour-minute @default datetime */
type?: DatetimePickerType;
/**默认选中的时间 */
defaultValue?: Date;
/**选中的时间 */
value?: Date;
/**是否为只读状态,只读状态下无法切换选项 */
readonly?: boolean;
/**可见的选项相邻个数 @default 3 */
siblingCount?: number;
}
import { XmDialogModal } from "@/components/public";
XmDialogModal({
title: "提示",
content: "哈哈哈",
onPrevent(ev) {
}
}).then((res) => {
console.log(res);
})
{
/**标题 */
title: React.ReactNode,
/**内容 */
content: React.ReactNode,
/**传入此函数则拦截 */
onPrevent?: (p: { onAffirm: (param?: any) => void, onCancel: () => void, setLoading: React.Dispatch<React.SetStateAction<boolean }) => void,
/**确认按钮文字 @default "取消" */
confirmText?: React.ReactNode,
/**取消按钮文字 @default "确认" */
cancelText?: React.ReactNode,
/**是否隐藏取消按钮 @default false */
hideCancelBtn?: boolean,
}
import { XmActionSheetModal } from "@/components/public";
XmActionSheetModal<{ key: number }>({
title: "测试标题啊三国时代呼唤地方",
list: [{ name: "第一个", key: 1 }, { name: "第二个", key: 2 }],
onPrevent({ onAffirm, item, setLoading, onCancel }) {
},
cancelText: "取消"
}).then((res) => {
console.log(res);
})
{
title?: string,
list: TypeModalActionSheetItem<T>[],
/**传入此函数则拦截 */
onPrevent?: (p: { onAffirm: () => void, onCancel: () => void, item: TypeModalActionSheetItem<T>, setLoading: (p: boolean) => void }) => void,
cancelText?: string
}
import { XmPasswordModal } from "@/components/public";
XmPasswordModal({
title: "请输入密码",
onAffirm(ev) {
if (ev.password === "123123") {
ev.setLoading(true)
setTimeout(() => {
ev.setLoading(false)
ev.onClose()
}, 1200);
} else {
ev.onSetVal("")
}
},
})
{
/**标题 @default 请输入支付密码 */
title?: string,
/**是否隐藏输入值 @default false */
hidVal?: boolean,
/**副标题 */
lable?: string,
/**密码输入框展示类型 下划线类型 正方形类型 @default SquarePwd */
type?: "UnderlinePwd" | "SquarePwd",
/**输入密码长度默认 6 */
passwordLen?: number,
onAffirm: (p: TypeChange) => void
onClose?: () => void
}
import { XmShareModal } from "@/components/public";
XmShareModal({
list: [
{ icon: "color_caihong", name: "分享好友", openType: "share", key: "weixin" },
{ icon: "color_chuang", name: "分享海报", key: "poster" }
],
onPrevent(ev) {
if (ev.item.key === "poster") {
ev.setLoading(true)
setTimeout(() => {
ev.onAffirm()
ev.setLoading(false)
}, 1200);
} else {
ev.onAffirm()
}
}
}).then((res) => {
console.log(res);
})
{
key: string | number,
/**图标 */
icon: TypeIcons,
/**图标颜色 */
iconColor?: string | string[],
/**标题 */
name: string,
/**open-type 的合法值 */
openType?: ButtonProps.openType,
/**分享的数据 */
shareInfo?: any,
/**Loading状态 */
loading?: boolean
}
import { XmToast } from "@/components/public";
//轻提示
XmToast.open("轻提示")
//loading
const onHideLoading = XmToast.loading()
setTimeout(() => {
onHideLoading()
}, 1200);
//成功
XmToast.success()
//错误
XmToast.fail()
//自定义配置提示
XmToast({ children: "呵呵呵" })
{
/**type 提示类型,可选值为 loading success fail html string text */
type?: ToastType;
/**position 弹出位置,可选值为 top bottom string center */
position?: ToastPosition;
/**icon 自定义图标,支持传入图标名称或图片链接 ReactNode - */
icon?: ReactNode;
/**duration 动画时长,单位毫秒 number | string 300 */
duration?: number;
/**children 文本内容 ReactNode - */
children: ReactNode;
/**是否隐藏 */
isHide?: boolean
}
import { XmNotify } from "@/components/public";
//primary
XmNotify.primary("primary")
//success
XmNotify.success("success")
//danger
XmNotify.danger("danger")
//错误
XmNotify.warning("warning")
//自定义配置提示
XmNotify({ children: "哈哈哈" })
{
duration?: number;
color?: "primary" | "success" | "warning" | "danger";
children: ReactNode;
}
import { BaseRouter } from "@path/router"
//跳转发起
Router.navigate<string>(
{ url: "/pages/mineEdit/index" },
{ data: params }
).then((res)=>{
//哈哈哈
console.log(res)
})
//设置页面返回所携带的参数
BaseRouter.setBackData("哈哈哈")
//页面返回并携带参数
BaseRouter.back({data:"哈哈哈"})
import { BaseRouter } from "@path/router"
//单个路由拦截
Router.navigate<string>(
{ url: "/pages/mineEdit/index" },
{
data: params,
before(){ return new Promise() }
}
).then((res)=>{
//哈哈哈
console.log(res)
})
//全局路由拦截
/**注册路由 */
const Router = new BaseRouter((ctx, next, error)=>{
if ( ctx.xxx!=="xxx" ){
next()
} else {
error()
}
})
/**跳转到xxx页面 */
export function toMineEdit(params: string) {
return Router.navigate<string>({ url: "/pages/mineEdit/index" }, { data: params })
}
//全局配置 config.ts
{
/**超时时间 */
timeout: 50000,
/**token缓存时间 */
tokenCatcheTime: 86400000 * 2,
/**错误重试次数 */
retryCount: 2,
/**请求域名 */
baseURL: "http://localhost:8000"
}
//请求配置
{
/**接口主路径 */
baseURL: string
/**接口路径 */
path: string
/**token */
'Blade-Auth': string,
/**该接口是否不传入token @default false */
skipToken?: boolean,
/**是否显示loading @default true */
loading?: boolean
/**缓存数据时间-时间戳 cacheTime<=0则永久缓存 默认永久缓存 @default 0 如果cacheType是sessionStorage则不需要设置缓存时间 */
cacheTime?: number
/**缓存方式,localStorage本地缓存,sessionStorage缓存 如果是sessionStorage则不需要设置缓存时间,默认当前小程序内缓存 */
cacheType?: "localStorage" | "sessionStorage"
/**错误重试次数 @default 2 */
errorRetry: number,
/**错误重试条件 @requires boolean true 重试 false 不重试 */
retryControl: (opt: RequestOption<TypePrerequest>, e?: Error) => boolean,
}
service.get("url", { cacheType: "sessionStorage"|"sessionStorage" })
相同的两个请求将被合并,只向服务器发送一次请求,返回相同的参数
service.get("url", { errorRetry: 2, retryControl: (opt: RequestOption<TypePrerequest>, e?: Error) })
- /src/path/service/middleware/lockToken.ts
- 在config/index.js中配置
webpackChain(chain) {
chain.merge({
module: {
rule: {
//全局注入锚点组件
injectBaseComponentLoader: {
test: /\.tsx$/,
use: [{
//锚点组件-全局组件锚点功能,路由返回监听锚点功能
loader: path.resolve(__dirname, '../loaders/injectComponent/index.js'),
options: {
importPath: '@components/generalAnchor',
componentName: "XmGeneralAnchor"
},
}],
},
},
},
});
},
{
// www.iconfont.com中的图标地址
"symbol_url": "http://at.alicdn.com/t/font_1802649_gwjvjqx064.js",
//保存的icon组件文件路径
"save_dir": "src/components/ui/icon",
//保持的icon名称
"trim_icon_prefix": "icon",
//默认图标大小
"default_icon_size": 22
}
- 1.cd plugins/createIcon
- 2.npm i
- 3.npm run build
- 4.cd ../..
- 5.npm run icon
- 执行完成将直接生成icon组件
-
- export const iconUrl = "http://at.alicdn.com/t/font_3128401_8o4uz692zdu.js"
-
- 解开 /src/components/ui/index.ts webIcon注释
function Index() {
const { pagingInfo, initPagingQuery, loadPagingMore } = usePagingQuery<TypeList.Item, TypeList.parameter>(getList, {})
useEffect(() => {
initPagingQuery(false)
}, [])
return <XmPullRefresh className="community-list bg-gray-2" refresherLoading={pagingInfo.refresherLoading} onRefresh={initPagingQuery} onToLower={loadPagingMore}>
{pagingInfo.list.map(v => (
<View>v</View>
))}
<XmNoData {...pagingInfo} title="暂无数据" />
</XmPullRefresh>
}
export default () => <Index></Index>