跨平臺移動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:真機調試

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容