快速上手

本节介绍一些基础概念，环境搭建，以及一些基础的代码展示

示例视频

视频中，介绍了Jiess官方模板获取与运行，是最简便的上手方案

下面的文档中，会着重介绍必要的基础概念和上手的细节

Jiess基础组件

Jiess基础组件（JiessComponent）：它是一个Jiess提供的原框架组件；作为沟通Jiess与原框架的纽带， 支持将Jiess组件或配置函数转化为原框架的虚拟节点，以实现UI的呈现

属性

Jiess基础组件可接受两个参数：setup（配置函数） 或 is（Jiess组件）；两者必选其一

setup 【配置函数】

• 类型 function 函数
• 说明 在函数体中，使用Jiess语法，实现逻辑交互和UI的绘制；支持异步函数
• 用途 如在页面中使用JiessComponent组件，对其传入配置函数

is 【Jiess组件】

• 类型 Jiess组件
• 说明 直接将Jiess组件渲染为原框架组件
• 用途 在Jsx环境中，想要在标签结构中使用Jiess组件

说明

• vue2中限制is作为自定组件的属性，因此vue2中用component属性替代
• 在vue3和react环境中，正常使用is属性接收Jiess组件即可
• is或component属性接收的是对象类型的Jiess组件，不支持原框架组件

不同的环境

vue环境下的 Jiess基础组件

在引入Jiess过程中，会自动全局注册Jiess基础组件<jiess/>

react环境下的 Jiess基础组件

由于不支持注册全局组件，需要从Jiess实例中获取JiessComponent组件

获取JiessComponent

在vue和react环境中，均可在Jiess实例中获取JiessComponent，所以在vue环境中， 也可以从Jiess实例获取JiessComponent，通过局部注册的方式使用Jiess基础组件

配置函数

对Jiess基础组件（JiessComponent）提供的setup函数被称为配置函数

Jiess组件中的setup属性，也是一个function函数，也被称为配置函数

特点

• 它们都是function函数，在函数体中的this指向特定的上下文对象
• 两者配置函数中的语法完全一致，支持Jiess内置的Api和所有特性

综上，两种配置函数除了使用场景不一样，其他的完全一致

关系图示

图示介绍了setup函数 即 配置函数的出现场景

• 示例代码为Jiess基础组件使用setup配置函数

<template>
	<jiess :setup="setup"/>
</template>
<script>
	export default {
		created() {
			// setup函数必须为function函数
			// setup不能定义methods，会被改变上下文
			this.setup = function() {
				// 配置代码
			}
		}
	}
</script>

• 在自定义Jiess组件时，组件对象中必须定义setup方法

export const MyComponent = {
	// Jiess组件的标记属性
	isJiess: true,
	// 组件名，方便报错时定位
	name: 'MyComponent',
	// 配置函数
	setup(props) {
	
	}
}

上手

上手前，先跟着思维导图的介绍，了解配置函数的用法

配置对象

即传入render方法中的对象，用于配置标签或组件的属性

function setup() {
	// jsRender实例即通过render方法构造的实例
	const jsRender = this.render({ is: 'span' }, '你好');
	// 渲染sRender实例
	this.add(jsRender);
}

通过render的嵌套，可以形成树形结构，最终映射成html中的dom节点树

function setup() {
	this.add(
		// 在父级ul元素中，嵌套两个li子元素
		this.render({ is: 'ul', className: 'container' },
			this.render({ is: 'li', className: 'item2' }, '选项一'),
			this.render({ is: 'li', className: 'item1' }, '选项二')
		)
	);
}