Vue3与pywebview前后端初步通信

1、pywebview后端

python 复制代码
class Api:
    def greet(self, test_text):
        print(test_text)
        return f"hello, {test_text}"


if __name__ == '__main__':
    # 前后端通信测试
    api = Api()
    window = webview.create_window('Vue app in pywebview', './static/index.html', js_api=api)   # vue的build文件的路径
    webview.start(debug=True)

2、Vue3前端

javascript 复制代码
<template>
  <div id="app">
    <h1>Greeting Test</h1>
    <button @click="greet">Greet</button>
    <p>{{ greeting }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      greeting: ''
    };
  },
  methods: {
    greet() {
      // 调用后端API
      if (window.pywebview) {
        window.pywebview.api.greet('Socket test').then(response => {
          this.greeting = response;
          console.log(this.greeting);
        });
      }
    }
  }
};
</script>

<style>
#app {
  text-align: center;
  margin-top: 50px;
}
</style>
相关推荐
moz与京2 小时前
[附C++,JS,Python题解] Leetcode 面试150题(10)——轮转数组
c++·python·leetcode
什码情况3 小时前
回文时间 - 携程机试真题题解
数据结构·python·算法·华为od·机试
lee5763 小时前
老是忘记package.json,备忘一下 webpack 环境下 Vue Cli 和 Vite 命令行工具对比
vue.js
Alfadi联盟 萧瑶3 小时前
Python-Django入手
开发语言·python·django
喝拿铁写前端4 小时前
前端与 AI 结合的 10 个可能路径图谱
前端·人工智能
codingandsleeping4 小时前
浏览器的缓存机制
前端·后端
-代号95275 小时前
【JavaScript】十二、定时器
开发语言·javascript·ecmascript
漠北尘-Gavin5 小时前
【Python3.12.9安装llama-cpp-python遇到编译报错问题解决】
python·llama
测试老哥5 小时前
什么是集成测试?集成的方法有哪些?
自动化测试·软件测试·python·测试工具·职场和发展·单元测试·集成测试