@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

小程序日志，会反应到实时日志中