uniapp app内嵌h5的通信方式

在uni-app中，当H5页面需要调用原生APP提供的Promise API时，你需要使用uni-app提供的JSBridge机制来实现跨端通信。以下是一个基本步骤： 1. **H5端发起请求**： H5代码中，你可以创建一个JavaScript函数，这个函数会包装你的网络请求，并通过`uni.request`或者`uni.createSelectorQuery()`的方式触发，然后把这个函数名发送给APP，示例： ```javascript function makeNativeRequest() { uni.request({ url: 'your-native-api-url', data: { key: 'value' }, method: 'POST', // 或GET等 success(res) { console.log('Native response:', res.data); } }).catch(err => { console.error('Error:', err); }); } window.postMessage('makeNativeRequest', '*'); // 发送给APP ``` 2. **APP端接收并处理请求**： 在uni-app的App.vue或者某个生命周期钩子中，监听`messageHandler`事件来处理H5发来的消息： ```javascript mounted() { uni.addEventListener('message', this.handleMessage, this); }, beforeDestroy() { uni.removeEventListener('message', this.handleMessage); }, handleMessage(e) { if (e.data === 'makeNativeRequest') { this.makeNativeAPI(e.detail); } }, makeNativeAPI(data) { const nativePromise = new Promise((resolve, reject) => { // 在这里处理你的原生请求，如使用wx.request或asyncTask等 wx.request({ ..., success(res) { resolve(res.data); }, fail(error) { reject(error); } }); }); nativePromise.then(data => { window.postMessage({ result: data }, '*'); }).catch(error => { window.postMessage({ error: error.message }, '*'); }); } ``` 3. **APP中异步任务的回调**： 当原生请求完成，APP会在H5的`message`事件中返回结果，这时候H5可以在接收到消息后做进一步处理。 注意：这是一个简化的例子，实际项目中你可能还需要处理更多的边界情况，以及错误处理。此外，确保在H5和APP之间传递的数据安全可靠。