二十二世纪古墓奇兵爱慕影院

小梁建站專注重慶中小企業網站建設SEO優化,讓您網站更具價值!

當前位置:首頁 > WEB前端學習 > 如何使用Capacitor和Vue.js開發移動app?

如何使用Capacitor和Vue.js開發移動app?

時間:2018-08-18 23:26 來源:重慶網站制作公司(www.l2qz.net) 作者:重慶網站建設公司

  

                              如何使用Capacitor和Vue.js開發移動app?

在本教程中,你將學習如何使用Capacitor和流行Web技術(如Vue.js和Ionic4Web組件)為Android和iOS構建跨平臺移動應用程序。你還可以利用Capacitor以使用相同的代碼庫來拓展到其他平臺,例如桌面和Web。最近,Ionic團隊宣布了ApacheCordova和AdobePhoneGap的開源精神繼承者,稱為Capacitor。Capacitor允許你使用現代Web技術構建應用程序并在任何地方運行它,從Web瀏覽器到移動設備(Android和iOS),甚至是通過Electron的桌面平臺-用于使用Node.js構建跨平臺桌面應用程序的流行GitHub平臺和前端Web技術。Ionic-最流行的混合移動框架-目前運行在Cordova之上,但在未來版本中,Capacitor將成為Ionic應用程序的默認選項。Capacitor還提供兼容層,允許在Capacitor項目中使用現有的Cordova插件。除了在Ionic應用程序中使用Capacitor之外,還可以在沒有Ionic的情況下使用它與你首選的前端框架或UI庫,例如Vue,React,AngularwithMaterial,Bootstrap等。在本教程中,我們將了解如何使用Capacitor和Vue為Android構建一個簡單的移動應用程序。實際上,如上所述,你的應用程序也可以作為漸進式Web應用程序(PWA)運行,也可以作為主要操作系統中的桌面應用程序運行,只需幾個命令。我們還將使用一些Ionic4UI組件來設計我們的演示移動應用程序。1Capacitor的特性Capacitor具有許多功能,使其成為Cordova等其他解決方案的良好替代品。讓我們看看Capacitor的一些功能:開源免費Capacitor是一個開源項目,根據許可的MIT許可證授權,由Ionic和社區維護跨平臺可以使用Capacitor構建具有一個代碼庫的應用程序并在多個平臺運行,你可以運行一些命令行界面(CLI)命令來支持另一個平臺對平臺SDK的本機訪問當你需要訪問本機SDK時,Capacitor不會妨礙您標準的Web和瀏覽器技術使用Capacitor構建的應用程序使用標準WebAPI,因此你的應用程序也將是跨瀏覽器的,并且將在遵循該標準的所有現代瀏覽器中良好運行可擴展你可以通過添加插件來訪問底層平臺的本機功能,或者,如果找不到符合你需求的插件,則可以通過簡單的API創建自定義插件。2準備工作要完成本教程,你需要具有以下要求的開發機器:你需要在你的機器上安裝Nodev8.6+和npmv5.6+。只需訪問官方網站并下載適用于你的操作系統的版本。要構建iOS應用程序,你需要一臺帶Xcode的Mac。要構建Android應用程序,你需要使用AndroidSDK安裝Java8JDK和AndroidStudio。3創建一個Vue項目在本節中,我們將安裝VueCLI并生成一個新的Vue項目。然后,我們將使用Vue路由器向我們的應用程序添加導航。最后,我們將使用Ionic4組件構建一個簡單的UI。安裝VUECLIV3讓我們首先從命令行運行以下命令從npm安裝VueCLIv3:[email protected]/cli你可能需要添加sudo以全局安裝軟件包,具體取決于你的npm配置。生成一個新的VUE項目安裝VueCLI之后,讓我們通過從CLI運行以下命令來生成新的Vue項目:$vuecreatevuecapacitordemo你可以通過在項目的根文件夾中運行以下命令來啟動開發服務器:$cdvuecapacitordemo$npmrunserve你的前端應用程序將從http://localhost:8080/運行。如果你在Web瀏覽器中訪問http://localhost:8080/,則應該看到以下頁面:添加Ionic4為了能夠在你的應用程序中使用Ionic4組件,你需要使用npm的核心Ionic4軟件包。因此,繼續打開index.html文件,該文件位于Vue項目的公共文件夾中,并添加以下內容:;標記在文件的頭部。這是public/index.html的內容:favicon.ico">

  你可以從npm獲取當前版本的Ionic核心軟件包。現在,打開src/App.vue,并在刪除其中的內容后在模板標記中添加以下內容:ion-app是一個ionic組件。它應該是包裹其他組件的頂級組件。router-view是Vue路由器。Vue路由器將在此處呈現與路徑匹配的組件。將Ionic組件添加到Vue應用程序后,你將開始在瀏覽器控制臺中收到類似以下內容的警告:[Vuewarn]:Unknowncustomelement:-didyouregisterthecomponentcorrectly?Forrecursivecomponents,makesuretoprovidethe"name"option.foundin--->atsrc/components/HelloWorld.vueatsrc/App.vue這是因為Ionic4組件實際上是Web組件,因此你需要告訴Vue以ion前綴開頭的組件不是Vue組件。你可以通過添加以下行在src/main.js文件中執行此操作:Vue.config.ignoredElements=[/^ion-/]現在應該消除這些警告。添加VUE組件我們添加兩個組件。首先,刪除src/components文件夾中的任何文件(同樣,刪除App.vue中HelloWorld.vue組件的任何導入),并添加Home.vue和About.vue文件。打開src/components/Home.vue并添加以下模板:VueCapacitorTheworldisyouroyster.Ifyougetlost,thedocswillbeyourguide.

  

  接下來,在同一文件中,添加以下代碼:現在,打開src/components/About.vue并添加以下模板:VueCapacitor|AboutThisistheAboutpage.此外,在同一文件中,添加以下代碼:使用VUEROUTER添加導航首先安裝Vuerouter(如果尚未安裝),方法是從項目的根文件夾運行以下命令:npminstall--savevue-router接下來,在src/main.js中,添加以下導入:importRouterfrom'vue-router'importHomefrom'./components/Home.vue'importAboutfrom'./components/About.vue'這將導入Vuerouter以及“Home”和“About”組件。添加這個:Vue.use(Router)創建一個包含路由數組的路由器實例:constrouter=newRouter({routes:[{path:'/',name:'Home',component:Home},{path:'/about',name:'About',component:About}]})最后,告訴Vue有關Router實例的信息:newVue({router,render:h=>h(App)}).$mount('#app')現在我們已經設置了路由,讓我們添加一些按鈕和方法來在我們的兩個“Home”和“About”組件之間導航。打開src/components/Home.vue并添加以下goToAbout()方法:...exportdefault{name:'Home',methods:{goToAbout(){this.$router.push('about')},在模板塊中,添加一個按鈕以觸發goToAbout()方法:GotoAbout現在,當我們進入“關于”組件時,我們需要添加一個按鈕返回到主頁。打開src/components/About.vue并添加goBackHome()方法:并且,在模板塊中,添加一個按鈕以觸發goBackHome()方法:GoBack!在真實移動設備或模擬器上運行應用程序時,你會注意到一個縮放問題。要解決這個問題,我們需要簡單地添加一些正確設置視口的元標記。在public/index.html中,將以下代碼添加到頁面的頭部:添加Capacitor你可以通過兩種方式使用Capacitor:從頭開始創建一個新的Capacitor項目。將Capacitor添加到現有的前端項目中。在本教程中,我們將采用第二種方法,因為我們首先創建了一個Vue項目,現在我們將把Capacitor添加到我們的Vue項目中。將Capacitor與VUE集成在一起Capacitor旨在被放入任何現代JavaScript應用程序中。要將Capacitor添加到VueWeb應用程序,你需要執行幾個步驟。首先,從npm安裝CapacitorCLI和核心軟件包。確保你在Vue項目中,并運行以下命令:[email protected]/[email protected]/cli接下來,運行以下命令,使用應用程序的信息初始化Capacitor:$npxcapinit我們使用npx來運行Capacitor命令。npx是一個與npmv5.2.0一起提供的實用程序,旨在使運行CLI實用程序和npm注冊表中托管的可執行文件變得容易。例如,它允許開發人員使用本地安裝的可執行文件,而無需使用npm運行腳本。CapacitorCLI的init命令還將為Capacitor添加默認的本機平臺,例如Android和iOS。系統還會提示你輸入有關應用程序的信息,例如名稱,應用程序ID(主要用作Android應用程序的程序包名稱)和應用程序目錄。輸入所需的詳細信息后,Capacitor將添加到你的Vue項目中。你還可以在命令行中提供應用程序的詳細信息:$npxcapinitvuecapacitordemocom.example.vuecapacitordemo應用程序的名稱為vuecapacitordemo,其ID為com.example.vuecapacitordemo。包名稱必須是有效的Java包名稱。你應該看到一條消息,“你的Capacitor項目已準備就緒!”你可能還注意到名為capacitor.config.json的文件已添加到Vue項目的根文件夾中。就像CLI在我們的Vue項目中初始化Capacitor時所建議的那樣,我們現在可以添加我們想要定位的本機平臺。這將把我們的Web應用程序變成我們添加的每個平臺的本機應用程序。但是在添加平臺之前,我們需要告訴Capacitor在哪里查找構建的文件-也就是我們的Vue項目的dist文件夾。當你第一次運行Vue應用程序的構建命令(npmrunbuild)時,將創建此文件夾,它位于Vue項目的根文件夾中。我們可以通過更改tape.config.json中的webDir來實現這一點,這是Capacitor的配置文件。所以,只需用dist替換www即可。這是capacitor.config.json的內容:{"appId":"com.example.vuecapacitordemo","appName":"vuecapacitordemo","bundledWebRuntime":false,"webDir":"dist"}現在,讓我們通過運行以下命令來創建dist文件夾并構建我們的Vue項目:$npmrunbuild之后,我們可以使用以下內容添加Android平臺:npxcapaddandroid如果你查看項目,會發現已添加了一個Android原生項目。這就是我們需要整合Capacitor和目標Android。如果你想要發布iOS或Electron,只需分別運行npxcapaddios或npxcapaddelectron。4使用插件Capacitor提供了一個運行時,使開發人員能夠使用Web的三大支柱-HTML,CSS和JavaScript-來構建在Web上以及主要桌面和移動平臺上本機運行的應用程序。但它還提供了一組插件來訪問設備的本機功能,例如相機,而無需為每個平臺使用特定的低級代碼;該插件為你完成,并為此提供規范化的高級API。Capacitor還提供了一個API,你可以使用該API為Ionic團隊提供的官方插件集未涵蓋的本機功能構建自定義插件。你可以學習如何在文檔中創建插件。[https://capacitor.ionicframework.com/docs/plugins/]你還可以在文檔中找到有關可用API和核心插件的更多詳細信息。[https://capacitor.ionicframework.com/docs/apis/]示例:添加Capacitor插件讓我們看一個在我們的應用程序中使用Capacitor插件的示例。我們將使用“Modals”插件,該插件用于顯示警報,確認和輸入提示以及操作表的本機模態窗口。打開src/components/Home.vue,并在腳本塊的開頭添加以下導入:import{Plugins}from'@capacitor/core';此代碼從@capacitor/core導入Plugins類。接下來,添加以下方法以顯示對話框:…methods:{…asyncshowDialogAlert(){awaitPlugins.Modals.alert({title:'Alert',message:'Thisisanexamplealertbox'});}最后,在模板塊中添加一個按鈕以觸發此方法:ShowAlertBox以下是對話框的屏幕截圖:你可以在文檔中找到更多詳細信息。為目標平臺構建應用程序為了構建項目并為目標平臺生成本機二進制文件,你需要執行幾個步驟。讓我們首先看一下它們:生成Vue應用程序的生產版本。將所有Web資源復制到Capacitor生成的本機項目(在我們的示例中為Android)。在AndroidStudio(或XcodeforiOS)中打開你的Android項目,并使用本機集成開發環境(IDE)在真實設備(如果已連接)或模擬器上構建和運行你的應用程序。因此,運行以下命令來創建生成版本:$npmrunbuild接下來,使用CapacitorCLI的copy命令將Web資產復制到本機項目:$npxcapcopy最后,你可以使用CapacitorCLI的open命令在本機IDE(在我們的示例中為AndroidStudio)中打開你的本機項目(在我們的示例中為Android):$npxcapopenandroidAndroidStudio將與你的項目一起打開,或者將打開包含本機項目文件的文件夾。如果沒有打開AndroidStudio,那么只需手動打開IDE,轉到“文件”→“打開...”,然后打開你的項目并從IDE中打開android文件夾。你現在可以使用AndroidStudio使用模擬器或真實設備啟動應用。

版權聲明:本文:如何使用Capacitor和Vue.js開發移動app? 由重慶網站制作公司(www.l2qz.net)原創內容,如需要轉載請注明原文網址:重慶網站建設公司http://www.l2qz.net/

 
喜歡看,就分享到:

圍觀: 9999次 | 責任編輯:重慶網站建設公司

回到頂部
二十二世纪古墓奇兵爱慕影院 云南十一选五开奖查询 巴黎圣日耳曼资金 神龙之境客服 中秋佳节各单位的福利 相扑君的逆袭APP 尤文图斯球裤 欢乐球吃球连接 英魂之刃官网壁纸 斯图加特在德国哪 熊猫乐园试玩 北京pk10历史开奖记录 比利亚雷亚尔巴萨罗那