# @baic/yolk-miniapp

> ## 使用

Latest version **1.0.45** (published 2022-07-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install @baic/yolk-miniapp
pnpm add @baic/yolk-miniapp
yarn add @baic/yolk-miniapp
bun add @baic/yolk-miniapp
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.45 |
| Published | 2022-07-13 |
| First published | 2020-09-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 39 |
| Unpacked size | 82.4 KB |
| Known vulnerabilities | 0 (+4 in 3 direct dependencies) |
| Install scripts | no |
| Maintainers | baic |

## Links

- npm: https://www.npmjs.com/package/@baic/yolk-miniapp
- Repository: https://github.com/303394539/yolk-miniapp
- Homepage: https://github.com/303394539/yolk-miniapp#readme
- Issues: https://github.com/303394539/yolk-miniapp/issues
- npm.io page: https://npm.io/package/@baic/yolk-miniapp

## Dependencies (39)

- [raf](https://npm.io/package/raf.md) ~3.4.1
- [antd](https://npm.io/package/antd.md) 4.x
- [dayjs](https://npm.io/package/dayjs.md) ~1.x
- [react](https://npm.io/package/react.md) 16.x
- [redux](https://npm.io/package/redux.md) ~4.1.2
- [ahooks](https://npm.io/package/ahooks.md) 2.x
- [eslint](https://npm.io/package/eslint.md) 7.32.0
- [lodash](https://npm.io/package/lodash.md) ~4.17.21
- [react-dom](https://npm.io/package/react-dom.md) 16.x
- [@types/raf](https://npm.io/package/@types/raf.md) ~3.4.0
- [decimal.js](https://npm.io/package/decimal.js.md) ~10.3.1
- [typescript](https://npm.io/package/typescript.md) ~4.4.4
- [@babel/core](https://npm.io/package/@babel/core.md) ~7.16.7
- [@tarojs/cli](https://npm.io/package/@tarojs/cli.md) ~3.4.0
- [react-redux](https://npm.io/package/react-redux.md) ~7.2.6
- [redux-thunk](https://npm.io/package/redux-thunk.md) ~2.4.1
- [@tarojs/taro](https://npm.io/package/@tarojs/taro.md) ~3.4.0
- [@types/react](https://npm.io/package/@types/react.md) ~17.0.38
- [redux-logger](https://npm.io/package/redux-logger.md) ~3.0.6
- [@tarojs/react](https://npm.io/package/@tarojs/react.md) ~3.4.0
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ~7.16.7
- [@tarojs/runtime](https://npm.io/package/@tarojs/runtime.md) ~3.4.0
- [@types/classnames](https://npm.io/package/@types/classnames.md) ~2.3.0
- [@tarojs/components](https://npm.io/package/@tarojs/components.md) ~3.4.0
- [@types/react-redux](https://npm.io/package/@types/react-redux.md) ~7.1.22
- [@types/webpack-env](https://npm.io/package/@types/webpack-env.md) ~1.16.3
- [@tarojs/mini-runner](https://npm.io/package/@tarojs/mini-runner.md) ~3.4.0
- [babel-plugin-import](https://npm.io/package/babel-plugin-import.md) ~1.13.3
- [babel-plugin-lodash](https://npm.io/package/babel-plugin-lodash.md) ~3.3.4
- [eslint-webpack-plugin](https://npm.io/package/eslint-webpack-plugin.md) 3.1.0
- [lodash-webpack-plugin](https://npm.io/package/lodash-webpack-plugin.md) ~0.11.6
- [@tarojs/webpack-runner](https://npm.io/package/@tarojs/webpack-runner.md) ~3.4.0
- [hoist-non-react-statics](https://npm.io/package/hoist-non-react-statics.md) ~3.3.2
- [webpack-bundle-analyzer](https://npm.io/package/webpack-bundle-analyzer.md) ~4.5.0
- [stylelint-webpack-plugin](https://npm.io/package/stylelint-webpack-plugin.md) ~3.1.1
- [antd-dayjs-webpack-plugin](https://npm.io/package/antd-dayjs-webpack-plugin.md) ~1.0.6
- [compression-webpack-plugin](https://npm.io/package/compression-webpack-plugin.md) 6.1.1
- [@tarojs/plugin-framework-react](https://npm.io/package/@tarojs/plugin-framework-react.md) ~3.4.0
- [typed-css-modules-webpack-plugin](https://npm.io/package/typed-css-modules-webpack-plugin.md) ~0.2.0

## Recent versions

- 1.0.45 (latest) — 2022-07-13
- 1.0.44 — 2022-06-28
- 1.0.43 — 2022-01-19
- 1.0.42 — 2022-01-11
- 1.0.41 — 2022-01-11
- 1.0.40 — 2022-01-10
- 1.0.39 — 2022-01-06
- 1.0.38 — 2022-01-05
- 1.0.37 — 2022-01-05
- 1.0.36 — 2021-12-01
- 1.0.35 — 2021-11-16
- 1.0.34 — 2021-11-16
- 1.0.33 — 2021-11-16
- 1.0.32 — 2021-11-15
- 1.0.31 — 2021-11-15
- … 161 more at https://npm.io/package/@baic/yolk-miniapp/versions

## README

# @baic/yolk-miniapp
#### Taro之上的微信小程序封装，包含基础Config配置、表单、Request、Util

## 使用

``` shell
yarn add @baic/yolk-miniapp
```

## API

### Config
##### 内置Taro的Config配置，扩展了针对Css Modules的Typescript支持，并简化部分Taro配置。

``` typescript
// 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](https://ant.design/components/form-cn/)扩展Taro的表单能力(注：由于antd体积过大，打包过大会被微信规则限制，这里内部进行了优化，使用者不应在项目中直接使用antd)。

#### useForm()
##### 同antd.Form的useForm，并增加createFormItem方法，使得表单双向绑定适用于Taro。并扩展了一部分常用的rules。
``` typescript
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扩展的常用验证
``` typescript
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

``` typescript
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的初始化上下文

``` typescript
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>): void;
##### 扩展Taro的useDidShow，确保第一次不执行

#### Hooks.useFastClickCallback(callback: FastClickCallback, autoRelease?: boolean): ClickCallback;
##### 点击事件的useCallback，防止执行过程连续点击

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

---
_Source: https://npm.io/package/@baic/yolk-miniapp · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._