# uni-demo

**Repository Path**: kris-Q/uni-demo

## Basic Information

- **Project Name**: uni-demo
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-02-05
- **Last Updated**: 2025-04-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 0、流程

```
JS 发请求：        sendMessageWithPromise({action, sql})
                   ↓
生成 requestId → 存入 Map → 等待
                   ↓
发送到 uni-app
                   ↓
uni-app 处理完后，带 requestId 回传
                   ↓
receiveMessageFromApp 找到回调 resolve
                   ↓
Promise 被 resolve，.then 收到结果
```



# 1、main.js

```js
import * as uni from './js/uni.webview'// 直接引入
import { initUniBridge } from './js/uniBridge';


// 给所有组件的 this 注入 uni
Vue.prototype.uni = uni

// 初始化 uniBridge 通信机制
initUniBridge(uni);
```



# 2、HelloWord.vue

```vue
<template>
  <div class="hello">
    <h3></h3>
    <button type="button" id="createSql" @click="createTable">sql-新建用户表</button>
    <h3></h3>
    <button type="button" id="addSql" @click="addUser">sql-添加用户数据</button>
    <h3></h3>
    <button type="button" id="selectSql" @click="selectUser">查询数据</button>
    <h3></h3>
    <button type="button" id="selectSql" @click="selectUser2">查询数据2</button>
    <h3></h3>
    <span>{{ uni_msg }} </span>
    <h3></h3>
    <span>{{ uni_msg2 }} </span>

  </div>
</template>

<script>
import {addSql, createTableSql, selectSql} from '@/js/uniBridge'

export default {
  name: 'HelloWorld',
  data(){
    return {
      uni_msg:'',
      uni_msg2:''
    };
  },
  props: {
    msg: String,
  },
  methods: {
    // 处理消息接收
    createTable(){
      createTableSql("CREATE TABLE IF NOT EXISTS user_sql (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, name TEXT(255) NOT NULL, age INTEGER, price INTEGER, description TEXT(255), createdDate TEXT(255))")
          .then(res => {
            console.log('createTable', res);
            this.uni_msg = JSON.stringify(res);
          })
          .catch(err => {
            console.error('createTable失败', err);
          })
    },
    addUser(){
      addSql("INSERT INTO user_sql (name,age,price) VALUES ('李四','20','235')")
          .then(res => {
            console.log('addSql', res);
            this.uni_msg = JSON.stringify(res);
          })
          .catch(err => {
            console.error('addSql', err);
          })
    },
    selectUser(){
      selectSql("select * from user_sql")
          .then(res => {
            console.log('selectSql', res);
            this.uni_msg = JSON.stringify(res);
          })
          .catch(err => {
            console.error('selectSql失败', err);
          })
    },
    selectUser2(){
      selectSql("select * from user_sql where id =1")
          .then(res => {
            console.log('selectUser2查询结果', res);
            this.uni_msg2 = JSON.stringify(res);
          })
          .catch(err => {
            console.error('selectUser2查询失败', err);
          })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
```









# 3、导入zip目录

zip名字：业务系统的拼音首字母，里面文件

```
dist
  |---index.html
  |--js/css
config.json
```



解压后：例：生产系统

```
scxt
 |--dist
	 |---index.html
	 |---js/css
 |--config.json
```



config.json文件格式

```json
{
    "name": "生产评价",
    "dbName": "scpj",
    "secretLevel": "非密",
    "version": "1.0"
}
```





# urlBridgr.js

```js
if (!window._uniBridgeListeners) {
    window._uniBridgeListeners = new Map();
}

const DEFAULT_TIMEOUT = 5000;

// 初始化方法，绑定全局接收器
export function initUniBridge(uni) {
    window.uni = uni;

    window.receiveMessageFromApp = function (msg) {
        const data = typeof msg === 'string' ? JSON.parse(msg) : msg;
        const requestId = data.requestId;

        if (requestId && window._uniBridgeListeners.has(requestId)) {
            const cb = window._uniBridgeListeners.get(requestId);
            cb(data.data);
            window._uniBridgeListeners.delete(requestId);
        } else {
            console.warn('未找到 requestId 对应回调：', requestId, msg);
        }
    };
}

// 核心发送方法
export function sendMessageWithPromise({ action, sql }) {
    const requestId = `${action}-${Date.now()}-${Math.random()}`;
    const payload = { action, sql, dbName: 'main', requestId };

    return new Promise((resolve, reject) => {
        const timeout = setTimeout(() => {
            window._uniBridgeListeners.delete(requestId);
            reject(new Error('请求超时'));
        }, DEFAULT_TIMEOUT);

        window._uniBridgeListeners.set(requestId, (data) => {
            clearTimeout(timeout);
            resolve(data);
        });

        if (window.uni && window.uni.webView) {
            window.uni.webView.postMessage({ data: payload });
        } else {
            clearTimeout(timeout);
            reject(new Error('uni.webView 未定义'));
        }
    });
}

// 快捷方法封装
export const createTableSql = (sql) => sendMessageWithPromise({ action: 'createSql', sql });
export const selectSql = (sql) => sendMessageWithPromise({ action: 'selectSql', sql });
export const addSql = (sql) => sendMessageWithPromise({ action: 'addSql', sql });
export const deleteSql = (sql) => sendMessageWithPromise({ action: 'deleteSql', sql });
export const updateSql = (sql) => sendMessageWithPromise({ action: 'updateSql', sql });

```