跳到主要内容

快速上手

使用前准备​

在使用 @fq/fq-weapp-ui 之前，你需要先安装 @fq/fq-weapp-ui，并引入样式。

配置npm私有源​

npm config set registry http://npm.ifengqun.com:4873/

这里推荐使用 nrm 来管理 npm 源，可以通过以下命令安装 nrm：

npm install -g nrm

然后通过以下命令添加私有源：

nrm add fengqun http://npm.ifengqun.com:4873/

最后使用私有源：

nrm use fengqun

安装​

# 使用 npm 安装
npm install -S @fq/fq-weapp-ui

# 使用 yarn 安装
yarn add @fq/fq-weapp-ui

# 使用 pnpm 安装
pnpm install -S @fq/fq-weapp-ui

基础用法​

引入所需组件​

在代码中import需要的组件

// page.tsx
import {
  FQSpriteIcon,
  FQSpriteIconProps,
  SpriteIconProps,
} from "@fq/fq-weapp-ui";

// 除了引入所需的组件，还需要手动引入组件样式
// app.ts
import '@fq/fq-weapp-ui/dist/styles/index.scss';

引入组件样式的三种方式​

  1. 全局引入（TS中）：在入口文件引入@fq/fq-weapp-ui样式文件
// app.ts
import '@fq/fq-weapp-ui/dist/styles/index.scss';
  1. 全局引入（SCSS中）：在需要使用组件的文件中引入@fq/fq-weapp-ui样式文件
// app.scss
@import '~@fq/fq-weapp-ui/dist/styles/index.scss';
  1. 按需引入：在页面样式或全局样式中 import 需要的组件样式
// page.scss
@import '~@fq/fq-weapp-ui/dist/styles/components/sprite-icon/index.scss';

具体的组件样式文件请查看 组件样式列表

体验​

使用微信扫一扫体验 小程序 组件示例

小程序二维码