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>
相关推荐
数新网络2 分钟前
PyTorch
人工智能·pytorch·python
自信的小螺丝钉7 分钟前
【大模型手撕】pytorch实现LayerNorm, RMSNorm
人工智能·pytorch·python·归一化·rmsnorm·layernorm
深耕AI7 分钟前
PyTorch图像预处理:ToTensor()与Normalize()的本质区别
人工智能·pytorch·python
Jinuss9 分钟前
Vue3源码reactivity响应式篇之computed计算属性
前端·vue3
落日沉溺于海9 分钟前
React From表单使用Formik和yup进行校验
开发语言·前端·javascript
知识分享小能手10 分钟前
React学习教程,从入门到精通, React 新创建组件语法知识点及案例代码(11)
前端·javascript·学习·react.js·架构·前端框架·react
会豪13 分钟前
工业仿真(simulation)--前端(五)--标尺,刻度尺
前端
会豪15 分钟前
工业仿真(simulation)--前端(四)--画布编辑(2)
前端
an__ya__16 分钟前
Vue数据响应式reactive
前端·javascript·vue.js
苦逼的搬砖工20 分钟前
Flutter UI Components:闲来无事,设计整理了这几年来使用的UI组件库
前端·flutter