一、 移動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:真機調試