跨平台移动App开发实战-环境和入门

一、 移动App各类技术比较

image.png

二、 Cordova

image.png

1、Cordova是使用Web技术开发移动App的平台

2、核心插件地址
https://cordova.apache.org/plugins/

3、开发环境
Nodejs、Android Studio / Xcode Vscode

拓展：
01、下载Android Studio
https://developer.android.google.cn/studio/

image.png

02、如何安装和配置Android Studio
https://www.cnblogs.com/xiadewang/p/7820377.html
03、配置Android SDK路径
https://jingyan.baidu.com/article/14bd256e8e02acbb6d26123e.html

问题1：The "android" command is deprecated
https://blog.csdn.net/launch_225/article/details/73770335

4、原生Cordova
效率低，不推荐使用。

 cnpm install -g cordova
 cordova create cordova-hellp
 cd cordova-hello
 cordova platform add browser
 cordova run browser

项目运行起来：

image.png

项目结构：

image.png

三、Quasar
Quasar集成Cordova和Vue
1、Quasar入门

image.png

yarn global add vue-cli
yarn global add quasar-cli  // 全局安装
quasar init quasar-hello  // 初始化项目
cd quasar-hello
quasar dev  // 项目运行

2、开发android版本

 yarn global add cordova
 // 增加cordova模式 文件夹下会出现src-cordova
 quasar mode -a cordova 
 quasar dev -m cordova -T android // -m 模式 -T 运行在安卓的模式下

谷歌下载插件vysor可以连接自己的手机，在手机上面查看quasar项目

3、代码的热部署：HMR

image.png

4、调试
01:桌面调试
02:真机调试