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>
相关推荐
MoRanzhi12031 分钟前
15. Pandas 综合实战案例(零售数据分析)
数据结构·python·数据挖掘·数据分析·pandas·matplotlib·零售
万少21 分钟前
开发者注意了 DevEco Studio 6 Release 开放了,但是我劝你慎重升级6应用
前端
小刘不知道叫啥1 小时前
React 源码揭秘 | 合成事件
前端·javascript·react.js
量化交易曾小健(金融号)1 小时前
Python美股量化交易填坑记录——3.盈透(Interactive Brokers)证券API接口
开发语言·python
ziyue75751 小时前
vue修改element-ui的默认的class
前端·vue.js·ui
java1234_小锋2 小时前
TensorFlow2 Python深度学习 - TensorFlow2框架入门 - 神经网络基础原理
python·深度学习·tensorflow·tensorflow2
JJJJ_iii2 小时前
【深度学习03】神经网络基本骨架、卷积、池化、非线性激活、线性层、搭建网络
网络·人工智能·pytorch·笔记·python·深度学习·神经网络
JJJJ_iii2 小时前
【深度学习05】PyTorch:完整的模型训练套路
人工智能·pytorch·python·深度学习
树叶会结冰2 小时前
HTML语义化:当网页会说话
前端·html
冰万森2 小时前
解决 React 项目初始化(npx create-react-app)速度慢的 7 个实用方案
前端·react.js·前端框架