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>
相关推荐
UI前端开发工作室几秒前
数字孪生技术为UI前端提供新视角:产品性能的实时模拟与预测
大数据·前端
Sapphire~3 分钟前
重学前端004 --- html 表单
前端·html
TE-茶叶蛋25 分钟前
Flutter、Vue 3 和 React 在 UI 布局比较
vue.js·flutter·react.js
Maybyy25 分钟前
力扣242.有效的字母异位词
java·javascript·leetcode
遇到困难睡大觉哈哈29 分钟前
CSS中的Element语法
前端·css
presenttttt32 分钟前
用Python和OpenCV从零搭建一个完整的双目视觉系统(六 最终篇)
开发语言·python·opencv·计算机视觉
Real_man36 分钟前
新物种与新法则:AI重塑开发与产品未来
前端·后端·面试
小彭努力中36 分钟前
147.在 Vue3 中使用 OpenLayers 地图上 ECharts 模拟飞机循环飞行
前端·javascript·vue.js·ecmascript·echarts
老马聊技术38 分钟前
日历插件-FullCalendar的详细使用
前端·javascript
zhu_zhu_xia40 分钟前
cesium添加原生MVT矢量瓦片方案
javascript·arcgis·webgl·cesium