uniapp DIY可视化工具 控件拖拽工具怎么开发

答：需要 (**拖拽库**) （**模板引擎**）代码自动生成

python有哪些模板引擎

• Jinja2是一个小型但快速且易于使用的以纯python编写的独立模板引擎（最主要的模板）
• Chameleon是TAL和Genshi语法的快速实现，可在首次使用时将模板编译为python字节码。
• ClearSilver是适用于Python / C / Perl的模板框架，该模板系统用于Google网上论坛和...
• Mako是全新的模板引擎，代表Myghty的最佳创意，这些创意被提炼为完全重写和更新的API和语法。
• Ophelia（0.3发布于2007-07-06）从TAL模板生成XHTML页面。这样可以避免重复的代码，允许站点内容驻留在文件系统中而不是数据库中，并允许Python脚本使内容动态化。
• JonsPythonModules（1.06，2004-04-11发布），一组简单但功能强大的多线程面向对象的CGI / FastCGI / mod_python / html-tempulation用于Python的模块
• Cheetah -Cheetah是Python驱动的模板引擎和代码生成器。它可以用作独立实用程序，也可以与其他工具组合使用。
• Genshi是一个Python库，它提供了一组集成的组件，用于解析，生成和处理HTML，XML或其他文本内容，以在Web上生成输出。

前端有哪些模板引擎

1. Mustache: 一种简单的语言，用于在前端和后端之间共享模板。
2. Handlebars: 基于 Mustache 的语言，提供了更多的控制结构和功能。
3. EJS: 一种简单的模板语言，支持 JavaScript 语法。
4. Jade: 一种基于 Node.js 的模板语言，用于生成 HTML 代码。
5. Underscore: 是一个 JavaScript 库，提供了丰富的模板引擎功能。
6. React JSX: JSX 是一种 JavaScript 语言的扩展，可以在 React 应用中直接使用 HTML 标签来描述组件。
7. Vue.js: Vue.js是一个渐进式的JavaScript框架，提供了自己的模板语法。

这些只是前端模板引擎中的一些常见类型，还有许多其他的模板引擎，如 AngularJS, Ember.js, Backbone.js, 选择使用哪种模板引擎取决于项目的需求和个人偏好。

vue有哪些拖拽库

• Vue Draggable - Vue 拖拽组件王者
• Vue drag resize - 轻量级，无依赖，可缩放
• Vue smooth dnd - 简单动效，上下拖拽排序，涵盖多场景
• V-drag - 最简单的可拖拽执行方案
• Vue Easy DnD - 简洁快捷，上下拖拽场景适用
• Awe dnd - 基于 vue 2.x 拖放排序组件，元素和图片拖拽通用

python 使用 jinja2 

Jinja2是一个现代的，设计者友好的，是python流行的模板引擎

仿照Django模板的语言

1如何安装？

python -m  install   Jinja2==2.11.2

2查看是否安装？

python -m pip freeze | grep Jinja2

Jinja2==2.11.2

注意这里笔者使用的是Jinja2==2.11.2版本,如果最新版本报错 请切换到这个版本下就不报错了

 测试1.py

from jinja2 import Template

template=Template("T am a {{ name }} ")

result=template.render(name="wenlong")

print(type(result),result)

# 当前jinja2版本 2.11.2

 测试2.py 

from jinja2 import FileSystemLoader,Environment

# 从文件系统加载模板文件路径
loader=FileSystemLoader(['templates'],encoding="utf-8")
# 核心组件 配合FileSystemLoader 一起使用
enviroment=Environment(loader=loader)
# 传入模板文件名称
tpl=enviroment.get_template('one.tpl')
# 可将参数传到前端模板进行渲染
data={'ip':'1.1.1.1'}

output=tpl.render(data=data)
print(output)
# 写入文件方法1
# with open("测试.vue",'w') as f:
#     f.write(tpl.render(data=data))

# 写入文件方法2
tpl.stream(data=data).dump("1.vue")

# 当前jinja2版本 2.11.2

 测试3.py 

one.tpl文件

<template>
	{{data.name}}
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		onShow() {

		},
		onLoad(option) {

		},
		methods: {
            {{data.method}}
		}
	};
</script>

<style lang="scss" scoped>

</style>

 

 

from jinja2 import FileSystemLoader, Environment

# 从文件系统加载模板文件路径
loader = FileSystemLoader(['templates'], encoding="utf-8")
# 核心组件 配合FileSystemLoader 一起使用
enviroment = Environment(loader=loader)
# 传入模板文件名称
tpl = enviroment.get_template('one.tpl')
# 可将参数传到前端模板进行渲染
name = "文龙"
data = {
    'name': '<view>' + name + '</view>',
    'method': """
    async init() {},
			chooseWxavatar(e) {
				const { avatarUrl } = e.detail;
				let baseavatarUrl = 'data:image/png;base64,' + wx.getFileSystemManager().readFileSync(avatarUrl, 'base64');
				this.wxavatar = baseavatarUrl;
			},
    """,
}

output = tpl.render(data=data)
print(output)
# 写入文件方法1
# with open("测试.vue",'w') as f:
#     f.write(tpl.render(data=data))

# 写入文件方法2
tpl.stream(data=data).dump("1.vue")

# 当前jinja2版本 2.11.2