@baic/yolk-miniapp

v1.0.45

Published

2 years ago

## 使用

Downloads

157

0High
0Medium
0Low

baic

@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构建的请求对象，这里只列举扩展参数

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 | - |