移动端自定义组件

环境准备 外网需要链接用友vpn

内网参考资料地址：[https://gfwiki.yyrd.com/pages/viewpage.action?pageId=7511173]

1. 安装node和ynpm

   • node版本：12和14都可以
   • ynpm版本：4.0.5

   npm install ynpm-tool@4.0.5 -g
   

2. 全局安装打包工具yon-ui-cli

   ynpm install @yonyou/yon-ui-cli -g
   

创建组件库工程并安装依赖

1. 打开要放置代码的文件夹，执行yonui init，执行完成后会创建一个组件库工程

2. 安装依赖

$ cd ./my-project   进入组件库目录

$ ynpm install   安装依赖

编写组件代码(举例)

import React, { Component } from 'react'
import { Button } from 'arc-ui';

export default class Ybcomponent extends Component {

  render() {
    const { testProp='', onClick } = this.props
    return (
      <div>
        <Button onClick={onClick} >按钮</Button>
        {testProp}
      </div>
    )
  }
}

预览和调试组件

$ npm run start

组件打包

$ npm run build

打包后的js文件在dist目录中，如下图：

图 1

发布组件到移动端租户

1. 打开组件扩展中心

图 2

1. 新增组件

图 3

图 4

1. 组件设计

图 5

图 6

图 7

1. 发布组件并使用

图 8

图 9