梁先国SEO专注网站优化,让您网站更具价值!

当前位置:首页 > WEB前端学习 > 如何使用Capacitor和Vue.js开发移动app?

如何使用Capacitor和Vue.js开发移动app?

时间:2018-08-18 23:26 来源:重庆网站制作公司(www.seozol.cn) 作者:重庆网站建设公司

  

                              如何使用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:$npminstall-g@vue/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项目中,并运行以下命令:$cdvuecapacitordemo$npminstall--save@capacitor/core@capacitor/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.seozol.cn)原创内容,如需要转载请注明原文网址:重庆网站建设公司http://www.seozol.cn/

 
喜欢看,就分享到:

围观: 9999次 | 责任编辑:重庆网站建设公司

推荐文章

热门文章

最新文章

回到顶部