基于pywebview实现Python与JS桥接及SQLite3数据操作问询

1. 定义Python API类（封装SQLite操作） #

创建包含SQLite增删改查逻辑的API类，所有需要被JS调用的方法需定义为公共方法（方法名不以_开头）：

import sqlite3
import webview

class API:
    def __init__(self):
        # 初始化SQLite连接并创建用户表（不存在则创建）
        self.conn = sqlite3.connect('user_db.db')
        self.cursor = self.conn.cursor()
        self.cursor.execute('''
            CREATE TABLE IF NOT EXISTS users (
                id INTEGER PRIMARY KEY AUTOINCREMENT,
                name TEXT NOT NULL,
                email TEXT UNIQUE NOT NULL
            )
        ''')
        self.conn.commit()

    # 新增用户
    def add_user(self, name, email):
        try:
            self.cursor.execute('INSERT INTO users (name, email) VALUES (?, ?)', (name, email))
            self.conn.commit()
            return {'success': True, 'message': '用户添加成功'}
        except sqlite3.IntegrityError:
            return {'success': False, 'message': '邮箱已被注册'}
        except Exception as e:
            return {'success': False, 'message': str(e)}

    # 查询所有用户
    def get_users(self):
        try:
            self.cursor.execute('SELECT id, name, email FROM users')
            users = [{'id': row[0], 'name': row[1], 'email': row[2]} for row in self.cursor.fetchall()]
            return {'success': True, 'data': users}
        except Exception as e:
            return {'success': False, 'message': str(e)}

    # 更新用户信息
    def update_user(self, user_id, name, email):
        try:
            self.cursor.execute('UPDATE users SET name = ?, email = ? WHERE id = ?', (name, email, user_id))
            self.conn.commit()
            if self.cursor.rowcount > 0:
                return {'success': True, 'message': '用户信息更新成功'}
            else:
                return {'success': False, 'message': '未找到指定用户'}
        except sqlite3.IntegrityError:
            return {'success': False, 'message': '邮箱已被注册'}
        except Exception as e:
            return {'success': False, 'message': str(e)}

    # 删除用户
    def delete_user(self, user_id):
        try:
            self.cursor.execute('DELETE FROM users WHERE id = ?', (user_id,))
            self.conn.commit()
            if self.cursor.rowcount > 0:
                return {'success': True, 'message': '用户删除成功'}
            else:
                return {'success': False, 'message': '未找到指定用户'}
        except Exception as e:
            return {'success': False, 'message': str(e)}

    def __del__(self):
        # 程序退出时关闭数据库连接
        if hasattr(self, 'conn'):
            self.conn.close()

2. 启动pywebview窗口 #

将API实例传入js_api参数，完成Python与JS的桥接：

if __name__ == '__main__':
    api = API()
    webview.create_window(
        title='SQLite3 操作示例',
        url='index.html',  # 加载本地HTML界面文件
        js_api=api
    )
    webview.start()

3. HTML/JS界面（index.html） #

通过window.pywebview.api调用Python端API方法，处理用户交互并展示结果：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户管理界面</title>
    <style>
        .container { max-width: 700px; margin: 30px auto; padding: 0 20px; }
        .form-group { margin-bottom: 18px; }
        label { display: block; margin-bottom: 6px; font-weight: 500; }
        input { padding: 8px; width: 100%; max-width: 350px; border: 1px solid #ddd; border-radius: 4px; }
        button { padding: 8px 18px; border: none; border-radius: 4px; background: #2196F3; color: white; cursor: pointer; }
        button:hover { background: #1976D2; }
        #user-list { margin-top: 25px; }
        .user-item { padding: 12px; border: 1px solid #eee; border-radius: 4px; margin-bottom: 10px; }
        #message { margin-top: 20px; padding: 10px; border-radius: 4px; }
        .success { background: #E8F5E9; color: #2E7D32; }
        .error { background: #FFEBEE; color: #C62828; }
    </style>
</head>
<body>
    <div class="container">
        <h2>新增用户</h2>
        <div class="form-group">
            <label>姓名:</label>
            <input type="text" id="add-name">
        </div>
        <div class="form-group">
            <label>邮箱:</label>
            <input type="email" id="add-email">
        </div>
        <button onclick="addUser()">添加用户</button>

        <h2>用户列表</h2>
        <button onclick="loadUsers()">刷新列表</button>
        <div id="user-list"></div>

        <h2>更新用户</h2>
        <div class="form-group">
            <label>用户ID:</label>
            <input type="number" id="update-id">
        </div>
        <div class="form-group">
            <label>新姓名:</label>
            <input type="text" id="update-name">
        </div>
        <div class="form-group">
            <label>新邮箱:</label>
            <input type="email" id="update-email">
        </div>
        <button onclick="updateUser()">更新信息</button>

        <h2>删除用户</h2>
        <div class="form-group">
            <label>用户ID:</label>
            <input type="number" id="delete-id">
        </div>
        <button onclick="deleteUser()">删除用户</button>

        <div id="message"></div>
    </div>

    <script>
        // 显示操作反馈消息
        function showMessage(text, isSuccess) {
            const msgEl = document.getElementById('message');
            msgEl.textContent = text;
            msgEl.className = isSuccess ? 'success' : 'error';
        }

        // 调用Python API新增用户
        async function addUser() {
            const name = document.getElementById('add-name').value.trim();
            const email = document.getElementById('add-email').value.trim();
            if (!name || !email) {
                showMessage('请填写完整信息', false);
                return;
            }
            const result = await window.pywebview.api.add_user(name, email);
            showMessage(result.message, result.success);
            if (result.success) {
                document.getElementById('add-name').value = '';
                document.getElementById('add-email').value = '';
                loadUsers();
            }
        }

        // 调用Python API加载用户列表
        async function loadUsers() {
            const result = await window.pywebview.api.get_users();
            if (result.success) {
                const listEl = document.getElementById('user-list');
                listEl.innerHTML = '';
                result.data.forEach(user => {
                    const item = document.createElement('div');
                    item.className = 'user-item';
                    item.innerHTML = `ID: ${user.id} | 姓名: ${user.name} | 邮箱: ${user.email}`;
                    listEl.appendChild(item);
                });
            } else {
                showMessage(result.message, false);
            }
        }

        // 调用Python API更新用户
        async function updateUser() {
            const userId = document.getElementById('update-id').value;
            const name = document.getElementById('update-name').value.trim();
            const email = document.getElementById('update-email').value.trim();
            if (!userId || !name || !email) {
                showMessage('请填写完整信息', false);
                return;
            }
            const result = await window.pywebview.api.update_user(parseInt(userId), name, email);
            showMessage(result.message, result.success);
            if (result.success) loadUsers();
        }

        // 调用Python API删除用户
        async function deleteUser() {
            const userId = document.getElementById('delete-id').value;
            if (!userId) {
                showMessage('请输入用户ID', false);
                return;
            }
            const result = await window.pywebview.api.delete_user(parseInt(userId));
            showMessage(result.message, result.success);
            if (result.success) loadUsers();
        }

        // 页面加载完成后自动加载用户列表
        window.onload = loadUsers;
    </script>
</body>
</html>

核心要点说明 #

• API类暴露规则：pywebview会自动将API类中所有非下划线开头的方法暴露给JS，可直接通过window.pywebview.api.方法名()调用。
• 异步通信：JS调用Python方法必须使用async/await，因为pywebview的跨语言通信是异步的，否则无法正确获取返回值。
• 数据序列化：Python方法返回的字典、列表等可JSON序列化数据，会自动转换为JS对应的对象/数组。
• 错误处理：每个数据库操作方法都包含异常捕获，返回统一格式的结果，方便JS端处理并给用户反馈。

内容的提问来源于stack exchange，提问作者Bruce Ecurb