文档
文档
idepy 38 4382字 约8分钟

模板说明

基于模板的开发

基于模版的开发,主要是构建 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_dataidepy_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()
目录
注册
{{page_data?.register_msg}}
申请账号
发送重置邮件
搜索
{{downloadForm?.title}}
描述:{{downloadForm?.description || '暂无描述信息'}}
备注:
打开下载地址
如未自动打开请手动点击
({{userInfoData?.nickname || '昵称'}}){{userInfoData?.username || '用户名'}}
ID:{{userInfoData?.id || 0}}
{{userInfoData?.money || '0'}}余额 {{userInfoData?.coin || '0'}}积分
VIP
{{item?.label}}
保存信息
修改密码
粉丝权益暂未激活
粉丝权益已激活
{{item?.name}}
qrcode