windows下安装配置

npm install -g ionic 
npm install -g cordova 
ionic start myproject 
cd myproject 
ionic platform add Android 
ionic build android 
ionic emulate android 
(build emulate可合并执行: ionic run android )

mac下安装配置

准备工作

安装 xcode及命令行工具 
Xcode -> Preferences -> Downloads -> Command Line Tools

要安装Git、安装nodejs 
如果安装了ruby,可以使用brew安装 nodejs

brew install node 
npm install -g cordova ionic gulp gulp视情况选择是否安装 
npm install iOS-sim 
ionic start myApp sidemenu 
ionic platform add ios # Add the ios platform to project 
ionic build ios # Compile the ios code 
ionic emulate ios # Launch the app on an ios Simulator 
ionic run ios # Launch on device* 
注意不能使用sudo ionic run ios,切记。 
如果出现错误:

Failed to fetch platform ios
Probably this is either a connection problem,or platform spec is incorrect. Check your connection and platform name/version/URL. Error:EPERM,utime '/Users/name/.cordova/lib/npm_cache/cordova-ios/3.9.2/package.npmignore' 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 1
  • 2
  • 3
  • 4
  • 5

则运行这个命令:

rm -rf ~/.cordova 
删除 缓存。

项目创建完,会提示是否需要创建一个ionic账号,用来推送消息。

使用chrome调试

运行命令启动ionic服务端:

ionic serve 
按提示选择一个网络设备。

可以看到提示信息: 
http://192.168.2.102:8100 使用Chrome访问这个地址,就可以使用浏览器查看当前程序了。

 
提示那个黄条的时候,要刷新一次浏览器。

在浏览器输入:

chrome://inspect 
可以在这里定义开发机器与手机的端口转发等。

安装ngCordova

ngCordova是在CordovaAPI基础上封装了一系列开源的AngularJS服务和扩展。

首先要安装brow,用来管理前端资源的依赖

通过cd 命令,把当前路径设置到ionic/www/lib下

npm install bower -g 
bower install ngCordova

路径看起来是这样的: 
 
代码可以引用这里的angular替代/lib/ionic下的angular。 
在index.html加下ngCordova的引用:

 <script src="lib/bower_components/ngCordova/dist/ng-cordova.js"></script>
  • 1
  • 1

它是这样引用的:

var mainApp=angular.module('mainApp',['ionic','ngCordova']);
  • 1
  • 1

常用命令

$ ionic build <PLATFORM>
$ ionic emulate <PLATFORM>
$ ionic run <PLATFORM> $ ionic run android --livereload -c -s //真机调试可以实时修改 $ ionic package <MODE> <PLATFORM> $ ionic lib update 更新当前项目的ionic js类库
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

最好在config.xml配置一下白名单:

<allow-navigation href="http://www.abcdefg.com/*" />
  • 1
  • 1

发布

加一个文件

在ionic/platforms/android下建一个build-extras.gradle 
内容:

android { lintOptions { checkReleaseBuilds false } }
  • 1
  • 1

编译命令:

ionic build –release android

产生密钥:

keytool -genkey -alias demo.keystore -keyalg RSA -validity 40000 -keystore demo.keystore 
/*说明:-genkey 产生密钥 
-alias demo.keystore 别名 demo.keystore 
-keyalg RSA 使用RSA算法对签名加密 
-validity 40000 有效期限4000天 
-keystore demo.keystore */ 
签名: 
jarsigner -verbose -keystore demo.keystore -signedjar demo_signed.apk demo.apk demo.keystore 
/*说明:-verbose 输出签名的详细信息 
-keystore demo.keystore 密钥库位置 
-signedjar demor_signed.apk demo.apk demo.keystore 正式签名,三个参数中依次为签名后产生的文件demo_signed,要签名的文件demo.apk和密钥库demo.keystore.*/

zipalign(压缩对齐)优化你的APK文件

zipalign -v 4 demo_signed.apk final.apk

转载于:https://www.cnblogs.com/Ricezhang/p/6159313.html

ionic 混合应用开发相关推荐

  1. ionic混合app开发——ionic-native

    1.安装依赖包 npm install --save @ionic-native/camera //手机照相机功能 npm install --save @ionic-native/file //手机 ...

  2. 混合App开发,HBuilder开发移动App

    使用HBuilder开发混合App: Hbuilder:是一个在线打包工具,不需要在本地配置开发环境:直接将做好的网站,通过一些简单的操作,就能在线打包为一个App: 混合APP开发常见技术:Html ...

  3. ionic4开发微信小程序_15个适用于Ionic应用程序开发人员的资源

    ionic4开发微信小程序 无论您是专业人士还是业余爱好者,在网络上寻找合适的资源来构建Ionic应用程序都可能很耗时,更何况令人沮丧. 在移动应用程序世界中,信息和内容可能会很快过时,因此,保持最新 ...

  4. html5混合app原理,HTML5混合App开发

    内容简介 在竞争激烈的移动互联网环境下,HTML5技术一直备受关注.HTML5混合App开发与原生App开发模式之间也争议不断.相对于原生App来说,HTML5混合App开发的成本更低.周期更短,而且 ...

  5. ionic4 混合移动开发 (前世今生)

    ionic 从2016年初识,经历了 ionic2 ionic3.至今 ionic4,终于在2018年7月份发布了测试版. ionic Framework 可以说得上是最接近原生app的ui组件,漂亮 ...

  6. Ionic 3 实战开发指南

    课程简介 在移动开发领域,各种不同的框架和工具可谓是百花齐放.从 Android 和 iOS 的原生应用,到 Xamarin 和 RubyMotion 这样的跨平台解决方案,再到新兴的 React N ...

  7. 混合app开发学习笔记

    什么是混合移动App开发[重点] 苹果上的软件是如何开发出来的:使用的是 OC.或者使用Swift这门语言 安卓平台上的软件又是如何开发出来的:使用安卓相关的语言开发的,Java,安卓的控件进行开发 ...

  8. 那些对混合云开发和应用程序环境的错误认识

    企业架构师们在开发混合云计算应用程序并为支持程序云计算而选择云计算供应商之前,他们应当好好完成他们的准备工作.选择错误的供应商和在错误的环境中开发应用程序都会对应用程序的运行性能.工作流程.变更成本. ...

  9. 开发缺点_成都嗨创科技:原生APP开发与混合APP开发的优缺点对比

    原生APP开发 1.开发语言: 安卓APP:Java开发语言: 苹果APP:Objective-C 或Swift 开发语言: 均为官方规定开发语言: 2.优点 1)使用体验较好,能够实现较为复杂的交互 ...

最新文章

  1. 关于Python 3.9,那些你不知道的事
  2. c语言程序设计编辑与调试环境实验报告,01程序设计基础实验报告_C语言程序设计基础.doc...
  3. android 固定底部,如何将view固定在屏幕底部?
  4. 2021年人工神经网络第三次作业-第二题:遗传算法与人工神经网络-参考答案
  5. C++文件读写 打开方式等比较全
  6. android listview的一些设置
  7. 基于JVisualVM的可视化监控
  8. python2与python3,Python2和Python3的10大区别
  9. seo日常工作表_5 個日常要做的 SEO 維護工作
  10. Centos、Ubuntu的区别
  11. 2019西北工业大学程序设计创新实践基地春季选拔赛(重现赛)
  12. 1432: 【蓝桥杯】:剪格子(迷宫问题变体)
  13. Autorelease Pool
  14. asp.net core系列 37 WebAPI 使用OpenAPI (swagger)中间件
  15. 2020中国区块链产业政策年度报告|链塔智库
  16. (BLE)蓝牙抓包(1) -nRF-sniffer和wireshark
  17. 事物级别,不可重复读和幻读的区别
  18. 深度学习-浅层神经网络
  19. 海康威视网络摄像机远程监控配置(DDNS)
  20. 王占祥:公募基金券商交易模式

热门文章

  1. Ransomware Locky Analysis
  2. 利用Cydia Substrate进行Android HOOK(2)
  3. 图解Android - Zygote, System Server 启动分析
  4. php accesscontrolalloworigin,php – Access-Control-Allow-Origin没有显示在codeigniter的响应头中...
  5. JZOJ 4910. 【NOIP2017模拟12.3】子串
  6. mysql relay_技术分享 | MySQL:产生大量小 relay log 的故障一例
  7. history linux 日志服务器_Linux下使用rsyslog部署日志服务器 记录history并发送到rsyslog服务器...
  8. python3 爬虫 requests安装_爬虫开发环境部署
  9. 2021.01.30 Visual QA论文阅读
  10. AtCoder AGC033C Removing Coins (博弈论)