模板说明
基于模板的开发
基于模版的开发,主要是构建 GUI 和相关事件的逻辑的代码编写,本章节将依次了解核心概念,便于初学者快速上手。
窗口组成
如使用命令行工具idepy create_base_window test创建了一个test窗口,那么对应需要维护的文件如下:
网页静态文件: 编写GUI相关代码
static/src/windows/test/index.html
,页面元素主要内容。static/src/windows/test/index.js
,页面元素逻辑文件。static/src/windows/test/index.css
,页面元素样式文件
主控制文件: 编写GUI相关后端的逻辑
windows/test/main.py
该窗口主要的API逻辑。windows/test/elements.py
页面元素的映射文件,用于快速调用特定DOM元素,可以由设计器生成或手动维护。
主窗口需要维护的情况也是类似如此,只是文件路径有所不同:
网页静态文件:
static/src/windows/main/index.html
,页面元素主要内容。static/src/windows/main/index.js
,页面元素逻辑文件。static/src/windows/main/index.css
,页面元素样式文件
主控制文件:
main.py
该窗口主要的API逻辑。elements.py
页面元素的映射文件,用于快速调用特定DOM元素,可以由设计器生成或手动维护。
JavaScript 和 Python 之间的通信
你可以从 Python 中运行 JavaScript 代码,也可以从 JavaScript 中运行 Python 代码。在 Python 中运行 JavaScript 代码时,使用 window.evaluate_js(code)
,该函数返回 JavaScript 代码的最后一条指令的结果。如果代码返回一个 promises 对象,则可以通过回调函数 window.evaluate_js(code, callback)
来解决 promise。
如果 JavaScript 抛出错误,则 window.evaluate_js
会抛出一个 webview.errors.JavascriptException
。
你也可以使用 window.run_js(code)
函数,该函数以相同的语法运行 JavaScript 代码。run_js
不返回结果。
在 JavaScript 中从 Python 运行代码时,请确保你的 API 类 expose 到 JavaScript 域中。可以通过调用 webview.create_window(url, js_api=api_instance)
露出你的 API 类。类的成员函数会在 JavaScript 环境中作为 window.idepy.api.funcName
可用。你也可以在运行时单次暴露一个函数,使用 window.expose(func)
。
使用语法糖绑定 Javascript 事件
用户可以通过bindElementEvent、bindVueElementEvent绑定窗口元素的事件,减少在Javascript、Python之间的切换与跳跃。
下面是一个最基本事件绑定示例:
<input id="input1" />
@bindElementEvent('#input1', ElementEvent.Input.change)
def input_change(self, *args, **kwargs):
print("原生输入框输入内容被改变", args)
上面示例展现了事件语法糖功能:开发者无需编写复杂的JavaScript代码,一句语法糖即可完成事件的绑定,并且支持多个事件同时绑定。
数据变量
idepy-next框架为开发者提供了统一的数据变量以及系列的数据操作(通过idepy_next.WindowAPI
类继承相关能力),便于用户快速数据传输。
Python部分
import idepy_next
class MainWindow(idepy_next.WindowAPI):
def __init__(self):
super().__init__()
# 设置主窗口
self.web_data = {"version": ""}
本框架的数据变量,统一集成在self.web_data
,并且会将其同步到JavaScript之中。
- 数据获取:通过直接访问
self.web_data['version']
,获取到相关的数据值。 - 数据更新:通过
super().update_web_data('version', '2.0.0', True)
,设置数据值,并马上同步到Javascript。 - 函数调用:
super()._call_js_func(函数名, 函数的参数)
- 全局变量设置:
super().__set_js_variable(函数名, 函数的参数)
更多的函数和操作可以查阅章节[JS-API]()
JavaScript部分
在Javascript中访问变量和数据操作,可以通过以下方式。
- 数据获取:通过直接访问
window.idepy_web_data
变量读取相关数据,该数据与python里面的self.web_data
一致。 - 数据更新:可以通过
idepy_set_web_data
、idepy_update_web_data
更新数据到Python中的self.web_data
对象,如果使用Vue默认支持数据自动更新到Python中。
在Vue中访问变量和数据操作,可以通过以下方式。
- 数据获取:除了可以和Javascript模式读取,还可以通过
rData
获取相关数据,该数据与python里面的self.web_data
一致。 - 数据更新:Vue默认支持数据自动更新到Python中。
DOM 支持
idepy-next 提供了基本的 DOM 操作、遍历和事件处理功能,具体支持的功能查看章节[API]()
同时也支持在API对象里面,使用self._elements
快速访问对应的窗口元素。
jinjia2 支持
idepy-next 集成了 jinjia2模板、变量传递等功能,开发者可以构建一个统一、高复用的窗口,减少代码使用量。
并支持相关的语法高亮功能。
Pycharm语法高亮、语法提示
idepy-next 引入了前端框架语法高亮支持,支持Vue3、ElementUI组件库、Tailwindcss等脚手架项目的语法提示。
为启用语法高亮,你只需要在初始化后,进入./static目录,安装项目依赖。
npm install
重启Pycharm后,即可获得相关的语法高亮与语法提示。
如果需要启用jinjia的语法提示,
那么只需要右击 /static/src 目录,设置其为Template folder(模板目录)。
窗口对象
Window
对象提供与窗口交互的一系列函数和属性。以下是常用方法的列表:
window.load_url(url)
:在窗口中加载新 URL。window.load_html(content)
:将 HTML 内容直接加载到窗口中。window.evaluate_js(script)
:在窗口中执行 JavaScript 代码并返回结果。window.toggle_fullscreen()
:切换窗口为全屏或普通模式。window.resize(width, height)
:设置窗口的宽度和高度。window.move(x, y)
:将窗口移动到指定 x 和 y 坐标。window.hide()
:隐藏窗口。window.show()
:如果窗口被隐藏,则显示窗口。window.minimize()
:最小化窗口。window.restore()
:若窗口处于最小化或最大化状态,恢复窗口。window.destroy()
:关闭窗口。
窗口事件
Window
对象具有以下窗口操作和导航事件:
closed
, closing
, loaded
, before_load
, before_show
, shown
, minimized
, maximized
, restored
, resized
, moved
有关如何订阅或取消订阅事件的详细信息,请参阅 开发 – 窗口事件。
HTTP 服务器
idepy-next 使用 bottle.py 内置 HTTP 服务器来处理局部路径。默认情况下,相对于根目录,所有文件夹和文件都会共享。你可以通过设置 webview.start(ssl=True)
来启用 SSL 模式。
一般不建议自定义HTTP服务器,这将失去jinjia2模板等高级功能。
import idepy_next as webview
webview.create_window('Woah dude!', 'src/index.html')
webview.start(ssl=True)
如果你希望使用兼容的 WSGI 服务器来处理外部 HTTP 序列,可以将服务器应用对象作为 URL 传递给 create_window 函数。
from flask import Flask
import idepy_next as webview
server = Flask(__name__, static_folder='./assets', template_folder='./templates')
webview.create_window('Flask example', server)
webview.start()
如果你希望使用 file://
协议来加载文件(无服务器),你可以通过绝对路径或带有 file://
根符号的路径进行。这种方法不推荐,因为它使程序的分发变得更加复杂,并且在某些情况下有局限性。
import idepy_next as webview
# this will be served as file:///home/idepy-next/project/index.html
webview.create_window('Woah dude!', '/home/idepy-next/project/index.html')
webview.start()