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：谷歌浏览器(需要)
// 手机数据线连上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
