@baic/yolk-miniapp v1.0.45

@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

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

说明：生成随机字符串

isEmpty(object):Boolean

说明：判断类型

getByteLength(string):Number

说明：获取字符串真实长度

random(min, max):Number

说明：获取区间随机数

blank(object):String

说明：为空返回Util.blankPlaceholder

isIdCard(object):Boolean

说明：判断是否是合法的身份证号码

Math.add(...number):Number

说明：加法

Math.sub(...number):Number

说明：加法

Math.mul(...number):Number

说明：减法

Math.div(...number):Number

说明：乘法

Date.format(time, formater):String

说明：时间格式化

Date.ny(time):String

说明：Date.format(time, Date.NY);

Date.nyr(time):String

说明：Date.format(time, Date.NYR);

Date.sfm(time):String

说明：Date.format(time, Date.SFM);

Date.nyrsfm(time):String

说明：Date.format(time, Date.NYRSFM);

Date.nyrsf(time):String

说明：Date.format(time, Date.NYRSF);

Date.nyr000(time):String

说明：Date.format(time, Date.NYR000);

Date.nyrend(time):String

说明：Date.format(time, Date.NYREND);

Number.format(number, decimals,thousands):String

说明：数字格式化

Money.format(number, decimals,thousands):String

说明：Number.format

Money.thousands(number, decimals,thousands):String

说明：Number.format

Money.y2w(number, decimals):String

说明：元转万

Money.f2y(number, decimals):String

说明：分转元

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

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