准备

• node 和 git -项目开发环境
• tsdx - 了解打包第三方库
• rollup - JavaScript 模块打包器
• TypeScript - 熟悉TypeScript基本语法
• Es6+ - 熟悉 es6 基本语法
• less - 熟悉 less 基本语法
• css(var) - 熟悉 CSS自定义属性

安装使用

• 获取项目代码

git clone http://icode.kaikeba.com/kmos/kmos-paysdk-reactui.git

• 安装依赖

cd kmos-paysdk-reactui

yarn install

cd example

yarn install

• 运行

cd kmos-paysdk-reactui
 
 yarn start

 cd example

yarn start

预览

• 本地预览 - 开发环境 两个同时启动

• 打包

yarn build 正式线打包

Git 提交规范

• 参考 vue 规范 (Angular)

  • feat 增加新功能
  • fix 修复问题/BUG
  • style 代码风格相关无影响运行结果的
  • perf 优化/性能提升
  • refactor 重构
  • revert 撤销修改
  • test 测试相关
  • docs 文档/注释
  • chore 依赖更新/脚手架配置修改等
  • workflow 工作流改进
  • ci 持续集成
  • types 类型定义文件更改
  • wip 开发中

1. 创建自己的分支: git checkout -b feat/xxxx
2. 提交你的修改: git commit -am 'feat(function): add xxxxx'
3. 推送您的分支: git push origin feat/xxxx

参数说明

| 参数 | 说明 | 类型 | 默认值 | 是否必传 | | ---- | ---- |---- | ---- | ---- | | visible | 组件是否可见 | boolean | false | 是| | onClose | 关闭组件 | function | - | 是 | | title | 标题 | string | 无 | 是 | | mark | 遮罩层是否显示 | boolean | true | 是 | | markStyle | 遮罩层style | React.CSSProperties | rgba(55, 55, 55, 0.6) | 否 | | mode | modal动画 | 'left''bottom' | bottom | 否 | | orderNo | 订单号 | number | - | 是 | | openid | 用户openid | string | - | 是 | | unionid | 用户unionid | string | - | 是 | | channelCode | 渠道 | string | - | 是 | | courseCode | 课程 | string | - | 是 | | onError | 接口报错 | (msg:string)=>{} | toast | 否 |

使用

  import { PayList,PaySdk } from "kmos-paysdk-reactui";

  PayList.init('test')

   <PayList
        visible={visible}
        onClose={handleClose}
        title={"请选择支付方式"}
        orderNo={order && order.orderNo}
        markStyle={{ backgroundColor: "red" }}
        openid="o0IXitx_lVGqIU0Q26qYojqv4pAs"
        unionid="ocPQA1dkMB11rqsgUEktzVjISuQk"
        channelCode="9zd1lmrs9i"
        courseCode="0307l3nhxh"
      />

主题颜色

    :root:root {
      --kpui-color-primary: red;
      --kpui-color-weak: yellow;
    }

目录结构

.
├── dist #打包文件
├── example #测试项目
├── src #项目代码
│   ├── assets #静态资源
│   ├── components #组件
│   ├── design #样式
│   ├── hooks #hooks
│   ├── index.ts #入口文件
│   └── utils #工具
├── stories #文档项目
└── test #测试项目