ionic4+vue+cordova开发混合应用

Yujiaao 发布于2019-08-23 17:00 / 3414人阅读

摘要：摘要是可以让我们使用开发即使来移动应用的框架。如果你熟悉可以直接使用开发，但如果你熟悉使用或并且也想使用，可以使用版本，本文就以来说明这两者如何结合使用。除此之外还引入和来对把我们代码打包成安卓或应用。。

摘要

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

idc机房托管混合云 Vue开发 vue组件开发 Vue开发技巧 vue20开发实践

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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
ionic环境搭建

摘要：下载完配置环境变量打开安卓的安卓目录如图，我画圈的两个目录，需要加入到里面安装官网下载官方只需注册即可免费使用，使用下面链接注册即可。检查是否安装成功，正确显示出版本号则说明安装成功。 1. 环境依赖关系叙述移动端混合开发的一个明显优势就是，一套代码两套部署，开发一套项目代码，可分别打成Android的包和ios的包。无论是混合开发还是原生开发，都是会需要原生的平台。我们先以Andr...

Kaede 2019-08-05 15:44 评论0 收藏0
一篇文章了解大前端

摘要：所以当开发一个新产品的时候服务只需要写一次，但是面向用户的产品可能有很多，例如网站客户端客户端和微信小程序等。跨平台方案简介目前的主流跨平台方案微信小程序和等，根据其原理性，可以分为四大类。大前端是什么？简单来说，大前端就是所有前端的统称，比如Android、iOS、web、Watch等，最接近用户的那一层也就是UI层，然后将其统一起来，就是大前端。大前端最大的特点在于一次开发，同...

jimhs 2019-06-25 12:39 评论0 收藏0
指尖前端重构（React）技术调研分析

摘要：一为什么选择是当前前端应用最广泛的框架。目前来看的生态系统要比大的多，在等最大的技术社区搜索两者，的搜索结果是的十倍左右，另外据近期统计使用的站点是的几百倍以上。其中是基于技术，依然是浏览器应用。一、为什么选择React React是当前前端应用最广泛的框架。三大SPA框架 Angular、React、Vue比较。 Angular出现最早，但其在原理上并没有React创新的性能优化...

AlphaWallet 2019-08-23 18:18 评论0 收藏0