1297

0

OSSA

Taro官方推荐的企业级多端 UI 库。目前已支持React语法。

OSSA

GitHub license npm OSSA-DEMO GitHub issues GitHub forks GitHub stars

OSSA LOGO

Taro官方推荐的企业级多端 UI 库。目前已支持React语法。

示例

微信小程序

OSSA DEMO

H5

OSSA DEMO

快速上手

OSSA目前支持Taro3,Taro1/Taro2版本敬请期待。

安装

  1. 首先需要有一个基于Taro的React项目,详细请参考Taro快速开始
npm install -g @tarojs/cli
taro init myApp
  1. 安装OSSA
npm install ossaui

使用

  1. 在入口文件中引入样式文件
// app.tsx
import 'ossaui/dist/style/index.scss'

// 或者在app.scss中引入
@import '~ossaui/dist/style/index.scss'
  1. 配置编译时对组件库进行编译

如果不对组件库进行编译,组件库内的样式文件不会经过postcss处理

module.exports = {
  // ...
  h5: {
    // ...
    esnextModules: ['ossaui']
  }
}
  1. 在页面中引入 OSSA组件
// page/index.tsx
import { OsButton } from 'ossaui'

const demo = () => {
  return (
    <OsButton type='primary' onClick={()=>handleClick()}>按钮</OsButton>
  )
}

按需引入

组件的样式文件既可以在入口文件引入,也可以在使用组件时,按需引入

// page/index.tsx
import { OsButton } from 'ossaui'

注意,目前组件库的按需引入需要借助一个babel插件babel-plugin-import来实现

首先需要安装

npm i babel-plugin-import -D

然后在 babel.config.js文件中添加如下配置:

plugins: [
  [
    'import',
    {
      libraryName: 'ossaui',
      customName: (name) => `ossaui/lib/components/${name.replace(/^os-/, '')}`,
      customStyleName: (name) => `ossaui/dist/style/components/${name.replace(/^os-/, '')}.scss`
    },
    'ossaui'
  ]
]

预览

详细Taro项目预览可参考Taro文档

// 微信小程序预览
npm run dev:weapp

// h5预览
npm run dev:h5

链接

致谢

本组件库的开发得益于Taro团队所提供的生态,部分组件库的设计灵感来源于Taro UI组件库,特此感谢。

本组件库能够开源,离不开以下同学的贡献:

  • 蔡文姬
  • 山下
  • sven

在此一并感谢。

开发交流

OSSA Wechat group

开源协议

MIT

Copyright (c) 2022 Yanxuan