Webix实践（一）

一：webix是什么？

Webix是一款白俄罗斯的原生组件库，支持TS、requireJS、React、Vue、Angular

• 官方网址 webix.com/
• 组件库预览 webix.com/widget/comp...
• 开发文档 docs.webix.com/
• 使用指南 docs.webix.com/desktop__ov...
• 官方论坛(针对使用问题提问) forum.webix.com/
• 如何使用Webix webix.com/how-to-star...
• webix-jet文档 webix.gitbook.io/webix-jet/a...

二：为什么使用webix？

除了收费，以及新手会花一定时间学习熟悉之外，其所带来的优势有：

1、类原生写法，配置式，前后端能一起写

2、低css，自带ui能满足业务的情况下，能减少很多工作量

3、微前端简单且灵活，还能包裹react、vue等其他框架项目打包

三：构架webix项目

创建vite+react模板

1、$ yarn create vite 选择react-ts，之后正常创建项目

2、依赖注入

"devDependencies": {
    "@xbs/jet-helpers": "1.1.2",
    "eslint": "^8.41.0",
    "vite": "^4.3.8"
  },
  "dependencies": {
    "@types/node": "^20.3.2",
    "@vitest/ui": "^0.32.2",
    "@xbs/webix-pro": "^10.1.2",
    "jet-hotkey": "^1.0.0",
    "jet-restate": "^1.0.1",
    "typescript": "^5.0.4",
    "vite-plugin-dts": "^3.0.0-beta.3",
    "vitest": "^0.32.2",
    "webix-jet": "^3.0.1"
  },

核心库：webix-jet（开源）、@xbs/webix-pro（收费）。 可以试用，代码里面的使用

3、hello world

index.html内部

<link rel="stylesheet" type="text/css" href="//cdn.webix.com/edge/webix.css">
<link rel="stylesheet" href="./src/assets/statics/mdi/font/css/materialdesignicons.min.css" type="text/css" charset="utf-8" />

<script type="text/javascript" src="http://192.168.0.187:82/static/js/webix.js"></script>
<script type="text/javascript" src="http://192.168.0.187:82/static/js/jet.umd.js" ></script>

<script type="module" src="/src/MyJetApp.ts"></script>

webix.ready(function(){
    webix.ui({template:"hello world"})    
})

分别是框架css，图标css，框架js，架构的js，项目内部业务js，和UI的暴露方法。

此时在进入MyJetApp业务代码之外，我们就渲染出了组件，要编写模块化的复杂组件，则在入口文件内书写

4、模块化组件

1. webix-jet

import { JetApp, EmptyRouter } from "webix-jet";
import ProcessApp from './Process/ProcessApp'
export default class MyApp extends JetApp{
	constructor(config:any){
		const defaults = {
			router 	: EmptyRouter,
			debug 	: true,
			start 	: "process",
			views:{
				"process": ProcessApp,
			}
		};
		super({ ...defaults, ...config });
	}
}
webix.protoUI({ name: "myProcessApp", app: MyApp }, webix.ui.jetapp);

创建jetApp，并暴露出来（webix.protoU），将打包的入口定到该页面可打包出去

 build: {
    outDir: "dist",
    lib: {
      entry: resolve(__dirname, "./src/MyJetApp.ts"),

这样在其他项目或者这个页面，加载了打包的js，都可以webix.ui({template:"myProcessApp"})来使用加载。

接下来就是进入jetView页面，在里面写ui

    return {
            rows: [
                {
                    cols: [
                      {
                        view: "form",
                        scroll: false,
                        localId: "myForm",
                        elements: [
                          {
                            type: "wide",
                            css: {
                              background: "white !important",
                            },
                            cols: [
                              {
                                view: "text",
                                name: "jh",
                                label: "井号:",
                                width: 250,
                              },
                              {
                                view: "button",
                                value: "查询",
                                width: 100,
                                click: () => {
                                  this.onSearch();
                                },
                                css: "webix_primary",
                              },
                              {},
                            ],
                          },
                        ],
                      },
                    ],
                },
                {
                    $subview: new BaseTableView(self.app, {...configs}),
                    name: 'my_table'
                }
            ],
        
         
        }

页面风格：

这是config内部return的对象，就是需要展示的UI，subview是子组件，可以进行嵌套，更详细的参考api文档学习

总结

以上就是webix从无到有创建项目使用的过程，涉及到的api可以在开始的地址里面去学习，可以作为框架预研的初步了解。