ionic4+vue+cordova開發混合應用

Yujiaao 發布于2019-08-23 17:00 / 3590人閱讀

摘要：摘要是可以讓我們使用開發即使來移動應用的框架。如果你熟悉可以直接使用開發，但如果你熟悉使用或并且也想使用，可以使用版本，本文就以來說明這兩者如何結合使用。除此之外還引入和來對把我們代碼打包成安卓或應用。。

摘要

ionic是可以讓我們使用web開發即使來移動應用的框架。ionic4之前，ionic只能和angular搭配使用，ionic4后把ionic抽離成四個版本，@ionic/core，@ionic/angular，@ionic/react，@ionic/vue來滿足更多開發者的需求，但是@ionic/vue和@ionic/react還處于內部測試階段。如果你熟悉angular可以直接使用@ionic/angular開發，但如果你熟悉使用react或vue并且也想使用ionic，可以使用@ionic/core版本，本文就以@ionic/core + vue 來說明這兩者如何結合使用。除此之外ionic還引入cordova和capacitor來對把我們代碼打包成安卓或ios應用。。https://ionicframework.com

使用ionic來搭建我們環境 安裝ionic腳手架

npm install -g ionic

安裝androd stuiod來編譯android代碼

https://ionicframework.com/docs/installation/android

安裝xcode來編譯ios代碼

https://ionicframework.com/docs/installation/ios

初始化項目用提供的模版為來測試環境是否已經安裝成功

ionic start myApp blank

在android studio上啟動

https://ionicframework.com/docs/building/android
1， ionic cordova prepare android
2， ionic cordova run android -l

在xcode上啟動

1，ionic cordova prepare ios
2, ionic cordova run ios -l

自己來搭建環境

代碼可見 https://github.com/gdutjiweijin/webapp

適應vue-cli腳手架來搭建vue基礎基礎代碼

1， npm install --global vue-cli
2， vue init webpack webapp
3， cd webapp
4,  yarn install
5,  yarn run dev

引入ionic@core

在index.html上加入

在main.js加入

Vue.config.ignoredElements = [/^ion-/];

初始化cordova項目

1,cordova create cordovawebapp
2,cordova platform add android
3,cordova platform add ios

把我們代碼放入到cordova目錄 1）打包我們項目代碼 npm run build 2）把dist目錄代碼拷貝到安卓對應目錄上

cp -r dist/ ./cordovawebapp/platforms/android/app/src/main/assets/www/

3）把dist目錄代碼拷貝到ios對應目錄上

cp -r dist/ ./cordovawebapp/platforms/ios/www/

具體代碼可參考https://github.com/gdutjiweij...，效果如下 web

android

ios

云服務器 GPU云服務器 Vue開發 vue組件開發 Vue開發技巧 vue20開發實踐

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103657.html

Capacitor 新一代混合應用“神器” 會代替Cordova嗎？？

摘要：介紹暢想是由團隊最新開發維護的一個跨平臺的應用程序容器，可以輕松構建在，，和上本機運行的應用程序。后者旨在替代或者說是進化。希望看到在未來發展，以及正式發布。我認為它有可能大大改善混合應用開發體驗。 1.介紹or暢想 Capacitor是由ionic團隊最新開發維護的一個跨平臺的應用程序容器，可以輕松構建在iOS，Android，Electron和Web上本機運行的Web應用程序。我們...

番茄西紅柿 2019-04-23 13:14 評論0 收藏0
Ionic4+Vue+Capacitor 初體驗

摘要：最新的已經提供了其他框架的支持，，等等，甚至不使用框架。接下來我將使用和開發一個最簡單的。也可以直接使用啟動，運行使用模擬器運行項目完美，那么本次的初體驗就到此結束了，的插件使用可以參考官方文檔哦。注：本文的目的在于記錄自己基于最新的Ionic4構建一個App，也為同樣需求的小伙伴提供參考。第一次寫文章，文筆笨拙，還請見諒，不對之處，還請指出。最新的Ionic4已經提供了其他 j...

cuieney 2019-08-23 17:53 評論0 收藏0
指尖前端重構（React）技術調研分析

摘要：一為什么選擇是當前前端應用最廣泛的框架。目前來看的生態系統要比大的多，在等最大的技術社區搜索兩者，的搜索結果是的十倍左右，另外據近期統計使用的站點是的幾百倍以上。其中是基于技術，依然是瀏覽器應用。一、為什么選擇React React是當前前端應用最廣泛的框架。三大SPA框架 Angular、React、Vue比較。 Angular出現最早，但其在原理上并沒有React創新的性能優化...

AlphaWallet 2019-08-23 18:18 評論0 收藏0