Cordova开发iOS/Android混合应用如何连接Node.js后端及配置项目结构

现有Cordova项目目录作用说明 #

你当前的Cordova项目各文件夹用途如下：

• node_modules：Cordova工具本身的依赖存储目录，无需手动修改
• platforms：执行打包命令后生成的iOS、Android原生工程存放目录，一般不需要手动编辑
• plugins：你安装的Cordova原生插件存储目录
• www：前端代码专属目录，所有HTML、CSS、前端JS代码都存放在这里，打包后会被内置到APP中，运行在移动端的WebView环境里

核心认知澄清 #

Cordova本质是前端打包工具，只能把前端代码打包为移动端APP，Node.js是服务端运行环境，无法直接运行在移动端的WebView中，所以连接数据库、编写路由这类服务端逻辑，不能放到当前的Cordova项目里。

项目拆分与部署方案 #

你需要把项目拆为独立的两部分开发部署：

1. 前端客户端：就是你当前的Cordova项目，只负责页面渲染、用户交互、调用后端接口
2. Node.js后端：单独新建一个后端项目文件夹，所有路由逻辑、数据库连接、业务计算代码都写在这个项目里，开发完成后部署到云服务器上，运行后对外提供HTTP接口

前端与后端连通方法 #

和普通Web应用的调用逻辑完全一致，在Cordova的deviceready事件触发后，直接通过HTTP请求调用后端接口即可，示例代码如下：

document.addEventListener('deviceready', onDeviceReady, false);

function onDeviceReady() {
    console.log('Running cordova-' + cordova.platformId + '@' + cordova.version);
    document.getElementById('deviceready').classList.add('ready');

    // 示例：调用Node.js后端接口
    fetch('http://你的后端服务部署地址/api/接口路径', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            参数1: '值1',
            参数2: '值2'
        })
    })
    .then(response => response.json())
    .then(result => {
        console.log('接口返回数据：', result);
        // 处理业务逻辑
    })
    .catch(error => {
        console.error('请求失败：', error);
    });
}

注意需要先安装Cordova白名单插件，配置允许你的APP请求后端服务的域名，避免请求被安全策略拦截。

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