@baic/yolk-miniapp
Taro之上的微信小程序封装,包含基础Config配置、表单、Request、Util
使用
yarn add @baic/yolk-miniapp
API
Config
内置Taro的Config配置,扩展了针对Css Modules的Typescript支持,并简化部分Taro配置。
// config/index.ts
import config from '@baic/yolk-miniapp/lib/config';
export default (merge) => {
return merge({}, config(merge, {
// 自定义Taro的Config
}));
};
yolk
参数 |
说明 |
类型 |
默认值 |
sassVarsResources |
加入全局引用sass变量文件源 |
string[] |
- |
Form
使用antd.Form扩展Taro的表单能力(注:由于antd体积过大,打包过大会被微信规则限制,这里内部进行了优化,使用者不应在项目中直接使用antd)。
useForm()
同antd.Form的useForm,并增加createFormItem方法,使得表单双向绑定适用于Taro。并扩展了一部分常用的rules。
import * as React from 'react';
import { View } from '@tarojs/components';
import { AtForm, AtButton } from 'taro-ui';
import { Form } from '@baic/yolk-miniapp';
import {
Input,
} from '@baic/yolk-miniapp-ui';
export default () => {
const [form, formProps] = Form.useForm();
const { createFormItem, validateFields } = form;
const onClick = async () => {
const values = await validateFields();
console.log(values);
}
return <View>
<Form form={form} {...formProps}>
<AtForm>
{createFormItem({
name: 'name',
rules: 'required',
})(<Input />)}
</AtForm>
</Form>
<AtButton onClick={onClick}>获取输入</AtButton>
</View>
}
validator
为表单rules扩展的常用验证
export type ValidatorKeys =
| 'required' // 必填
| 'mobile' // 手机号
| 'idcard' // 身份证
| 'cn' // 英文
| 'en' // 中文
| 'email' // 邮箱
| 'int' // 整型
| 'float' // 小数
| 'number' // 数字
| 'url' // 链接
| 'trim' // 前后空格
| 'noSpaces' // 全文空格
| 'len' // 指定长度
| 'maxLen' // 最大长度
| 'minLen' // 最小长度
| 'max' // 小于
| 'min' // 大于
| 'maxEqual' // 小于等于
| 'minEqual' // 大于等于
| 'checked' // 选中
| 'maxDecimalDigits' // 小数位数小于
| 'minDecimalDigits' // 小数位数大于
| 'maxEqualDecimalDigits' // 小数位数小于等于
| 'minEqualDecimalDigits' // 小数位数大于等于
| 'ip';
Request
基于Taro.request构建的请求对象,这里只列举扩展参数
参数 |
说明 |
类型 |
默认值 |
baseUrl |
基础Url |
string |
- |
logger |
实时日志 |
boolean |
- |
suffix |
默认后缀名,如果url内部包含不添加 |
string |
- |
randomStringName |
随机数参数名 |
string |
_ |
shallowTrim |
参数浅层次去掉前后空格 |
boolean |
true |
deepTrim |
参数深层次去掉前后空格 |
boolean |
false |
onStart |
请求前调用,返回请求参数 |
function |
- |
onEnd |
请求完成调用 |
function |
- |
onFail |
请求失败调用 |
function |
- |
onError |
请求发生错误调用,返回response对象 |
function |
- |
onInterceptorCatch |
判断返回结果符合的Promise |
function |
- |
transformResult |
转换返回response.data |
function |
- |
loading |
是否开启默认Loading |
boolean |
true |
header |
扩展为可异步函数返回header |
object |
function |
Request.get(url, data, option)
static方式的默认get方法
Request.post(url, data, option)
static方式的默认post方法
useRequest
获取上下文初始化的request实例
request.get(url, data, option)
request.post(url, data, option)
request.data(defaultValue: any).get(url, data, option)
设定默认值,并获取transformResult转换后的data
request.data(defaultValue: any).post(url, data, option)
设定默认值,并获取transformResult转换后的data
import * as React from 'react';
import { useRequest } from '@baic/yolk-miniapp';
import { View } from '@tarojs/components';
export default () => {
const [request] = useRequest();
// request.get();
// request.post();
// request.data().get();
// request.data().post();
return <View/>
}
Util
getRandomString(maxLength):String
说明:生成随机字符串
参数 |
说明 |
类型 |
默认值 |
maxLength |
字符串长度 |
number |
6 |
isEmpty(object):Boolean
说明:判断类型
参数 |
说明 |
类型 |
默认值 |
object |
判断对象 |
object |
- |
getByteLength(string):Number
说明:获取字符串真实长度
参数 |
说明 |
类型 |
默认值 |
string |
字符串 |
string |
- |
random(min, max):Number
说明:获取区间随机数
参数 |
说明 |
类型 |
默认值 |
min |
最小值 |
number |
- |
max |
最大值 |
number |
- |
blank(object):String
说明:为空返回Util.blankPlaceholder
参数 |
说明 |
类型 |
默认值 |
object |
判断对象 |
object |
- |
isIdCard(object):Boolean
说明:判断是否是合法的身份证号码
参数 |
说明 |
类型 |
默认值 |
object |
判断对象 |
object |
- |
Math.add(...number):Number
说明:加法
参数 |
说明 |
类型 |
默认值 |
number |
数字 |
number |
- |
Math.sub(...number):Number
说明:加法
参数 |
说明 |
类型 |
默认值 |
number |
数字 |
number |
- |
Math.mul(...number):Number
说明:减法
参数 |
说明 |
类型 |
默认值 |
number |
数字 |
number |
- |
Math.div(...number):Number
说明:乘法
参数 |
说明 |
类型 |
默认值 |
number |
数字 |
number |
- |
Date.format(time, formater):String
说明:时间格式化
参数 |
说明 |
类型 |
默认值 |
time |
格式化时间 |
Date or moment |
- |
formater |
格式化格式,包含Date.NY(NYR,SFM,NYRSFM,NYRSF,NYR000,NYREND) |
string |
- |
Date.ny(time):String
说明:Date.format(time, Date.NY);
参数 |
说明 |
类型 |
默认值 |
time |
格式化时间 |
Date or moment |
- |
Date.nyr(time):String
说明:Date.format(time, Date.NYR);
参数 |
说明 |
类型 |
默认值 |
time |
格式化时间 |
Date or moment |
- |
Date.sfm(time):String
说明:Date.format(time, Date.SFM);
参数 |
说明 |
类型 |
默认值 |
time |
格式化时间 |
Date or moment |
- |
Date.nyrsfm(time):String
说明:Date.format(time, Date.NYRSFM);
参数 |
说明 |
类型 |
默认值 |
time |
格式化时间 |
Date or moment |
- |
Date.nyrsf(time):String
说明:Date.format(time, Date.NYRSF);
参数 |
说明 |
类型 |
默认值 |
time |
格式化时间 |
Date or moment |
- |
Date.nyr000(time):String
说明:Date.format(time, Date.NYR000);
参数 |
说明 |
类型 |
默认值 |
time |
格式化时间 |
Date or moment |
- |
Date.nyrend(time):String
说明:Date.format(time, Date.NYREND);
参数 |
说明 |
类型 |
默认值 |
time |
格式化时间 |
Date or moment |
- |
Number.format(number, decimals,thousands):String
说明:数字格式化
参数 |
说明 |
类型 |
默认值 |
number |
格式化数字 |
number |
0 |
decimals |
保留小数位数 |
number |
2 |
thousands |
千分位符号 |
string |
, |
Money.format(number, decimals,thousands):String
说明:Number.format
参数 |
说明 |
类型 |
默认值 |
number |
格式化数字 |
number |
0 |
decimals |
保留小数位数 |
number |
2 |
thousands |
千分位符号 |
string |
, |
Money.thousands(number, decimals,thousands):String
说明:Number.format
参数 |
说明 |
类型 |
默认值 |
number |
格式化数字 |
number |
0 |
decimals |
保留小数位数 |
number |
2 |
thousands |
千分位符号 |
string |
, |
Money.y2w(number, decimals):String
说明:元转万
参数 |
说明 |
类型 |
默认值 |
number |
格式化数字 |
number |
0 |
decimals |
保留小数位数 |
number |
2 |
Money.f2y(number, decimals):String
说明:分转元
参数 |
说明 |
类型 |
默认值 |
number |
格式化数字 |
number |
0 |
decimals |
保留小数位数 |
number |
2 |
Provider
yolk-miniapp的初始化上下文
import * as React from 'react';
import { Provider, Request } from '@baic/yolk-miniapp';
export default () => {
return <Provider request={new Request()}/>
};
Hooks
一些hooks工具
Hooks.useDidShow(callback: () => void | Promise): void;
扩展Taro的useDidShow,确保第一次不执行
Hooks.useFastClickCallback(callback: FastClickCallback, autoRelease?: boolean): ClickCallback;
点击事件的useCallback,防止执行过程连续点击
Logger
小程序日志,会反应到实时日志中