cordova项目搭建

Cordova开发环境安装

安装cordova命令行工具

安装命令

npm install -g cordova

cordova项目的创建、平台添加、打包等都需要cordova命令行工具

// 创建cordova项目
cordova create <工程文件夹名称> <标识符> <项目名称>

// 添加android、ios等平台
cordova platform add android
cordova platform add ios

// 查看已添加平台
cordova platform ls

// 检查是否满足android和ios等开发条件
cordova requirements

android平台构建环境安装

Java  JDK安装

// 下载地址
http://shopdev.test.upcdn.net/mt/jdk-8u202-windows-x64.exe

// 安装好后根据安装路径配置环境变量
// 以下为默认路径,将其添加到环境变量
C:\Program Files\Java\jdk1.8.0_202\bin
C:\Program Files\Java\jdk1.8.0_202\jre\bin

// 检查安装是否成功，控制台命令行工具输入
java
javac

android相关安装，使用android studio一套安装

// 下载地址
http://shopdev.test.upcdn.net/mt/android-studio-ide-183.5522156-windows.exe

// 安装完后自带android sdk
// sdk默认路径添加到环境变量，方便后期项目真机调试
C:\Users\DELL\AppData\Local\Android\Sdk\tools
C:\Users\DELL\AppData\Local\Android\Sdk\platform-tools

// 检查环节变量是否配置成功，控制台命令行工具输入
adb

// android调试桥简称adb，可以在命令行控制安装和调试android应用，常用命令
adb devices -l
adb install apkPath

vs code插件安装

// vs code应用仓库搜索Cordova Tools安装

以上环境配置完成可重启一次计算机确保环境配置成功

MTAPP框架使用

在根目录的config下创建项目配置文件文件夹及项目js配置文件

// 创建规则MTAPP/config/projectName/index.js
module.exports = {
    name: '四川移动门户',
    id: 'cn.mastercom.mtapp_sichuan_portal.mtapp', // 安卓安装包包名
    version: '1.0.3', // 无效，想要控制版本需要修改根目录下package.json中version字段
    statusbarColor: 'black',
    iconFolder: 'sichuan_portal', // 安装完app后显示在桌面的图标
    splashFolder: 'sichuan_portal', // 安装完app启动时的启动页
    chcp: { // 热更新相关配置
        autoUpdate: false, // 为true时初始化项目会在www目录下增加热更新配置文件
        url: ''
    }
}

// 修改package.json和MTAPP/config/projectName/index.js后项目需要重新初始化

// 如果项目需要热更新chcp对象中autoUpdate置为true并再添加一个热更新配置文件
// 添加规则MTAPP/config/projectName/cordova-hcp.json
{
    "name": "qinghai",
    "ios_identifier": "",
    "android_identifier": "",
    "update": "now",
    "content_url": "http://111.44.246.156:8088/slsw_hot/hot" // 热更新文件存放服务器位置
}

// 热更新适用于只更新了页面，静态文件，js逻辑，不涉及cordova插件修改和逻辑修改
// 如果修改了cordova插件相关逻辑必须重新打包进行app更新

执行项目初始命令，开始初始化项目和创建配置文件

npm run cordova-project-init projectName

拷贝MTH5Web项目打包结果到MTAPP/www目录就可以开始打包安装包

// cordova打包命令分测试包和生产包

// 安卓正式包命令，MTAPP执行，ios在xcode中打包
cordova build android --release

// 安卓测试包命令，MTAPP执行，ios在xcode中打包
// 打安装测试包时如果连接了手机设备会自动安装并打开，测试包安装不能覆盖，请先卸载app
cordova run android

cordova项目调试

// 调试已经打包的app，只有测试包才可用于调试

// 方案1：谷歌浏览器(需要vpn)
// 手机数据线连上pc，手机打开cordova打包安装好的app，打开谷歌浏览器网址输入，即可看到调试设备界面
chrome://inspect/#devices

// 方案2：Cordova Tools，在MTAPP目录下操作
// 手机数据线连上pc，打开vs code测试界面，点击Run Android on device后会自动打包MTH5Web并复制到www目录并执行cordova run android
// 自动安装app成功后vs code底部栏变橙色即可在DEBUG CONSOLE中执行js类似于浏览器控制台

MTH5Web框架中创建适合MTAPP框架打包的项目

核心构建基础目录是MTH5Web/src/common/appCreator

// 此框架目录向外暴露了一个经过处理的vue构造函数AppCreator
// 主要是做的是：处理是否有登录模块，合并路由，处理vuex，让vue实例在deviceready事件后进行创建
// 适配状态栏高度，移动端300ms延迟等问题

// 注意
// 登录模块和主程序模块为两个vue实例

开发项目入口，登录模块，主程序模块，路由，vuex相关配置目录MTH5Web/src/mtapp/projectName

// 登录模块入口MTH5Web/src/mtapp/projectName/login.js

// 主程序模块入口MTH5Web/src/mtapp/projectName/index.js

业务代码目录MTH5Web/src/components/business/mtapp/projectName最后通过目录下的loader.js向外暴露所有模块业务代码供登录模块，主程序模块，路由使用

// 按需求设计模块目录，最后使用loader.js向外暴露

MTH5Web项目打包，打包结果在dist目录中

// webpack打包项目配置文件MTH5Web/build/config/projectName

// 向服务端发送的接口请求基础路径及加密配置文件MTH5Web/build/serverurls/projectName
// 测试环境：test.json
// 生产环境：prod.json

// 测试打包命令
npm run dev projectName test

// 生产环境打包
npm run dev projectName prod