- 浏览: 3553467 次
- 性别:
- 来自: 大连
博客专栏
-
使用Titanium Mo...
浏览量:38247
-
Cordova 3.x入门...
浏览量:607654
-
常用Java开源Libra...
浏览量:682869
-
搭建 CentOS 6 服...
浏览量:89577
-
Spring Boot 入...
浏览量:402165
-
基于Spring Secu...
浏览量:69772
-
MQTT入门
浏览量:91866
文章分类
最新评论
-
afateg:
阿里云的图是怎么画出来的?用什么工具?
各云服务平台的架构图 -
cbn_1992:
博主,采用jdbctoken也就是数据库形式之后,反复点击获取 ...
Spring Security OAuth2 Provider 之 数据库存储 -
ipodao:
写的很是清楚了,我找到一份中文协议:https://mcxia ...
MQTT入门(6)- 主题Topics -
Cavani_cc:
还行
MQTT入门(6)- 主题Topics -
fexiong:
博主,能否提供完整源码用于学习?邮箱:2199611997@q ...
TensorFlow 之 构建人物识别系统
如何为Android APK签名,已经在这里说过了。这里说说如何保护源代码,把Hybrid App(混合移动应用)工程变到发布的状态。对于Hybrid App,如果不做任何处理,把apk文件解压后在assets文件夹里就能看到所有的源代码。
以下通过gulp tasks和cordova hooks来保护你的源代码。
・gulp tasks - ionic serve时执行
・cordova hooks - ionic build/run时执行
(0)创建一个ionic工程
cordova@5.0.0
ionic@1.3.20
首先编译一个调试用的apk,以后的发布版apk作对比。
(1)(cordova hook)JS代码的Lint
混淆JS代码的前提要保准JS代码没有错误。
安装jshint
hook文件
编译
ionic的sample工程controllers.js有错误,第九行缺少分号。
修改错误提示,直到build成功。
(2)(gulp task)把html模板转换为angularjs模板
安装gulp-angular-templatecache
修改gulpfile.js
修改ionic.project
修改app.js
修改index.html
把templates.js里的templateUrl改成和app.js的templateUrl一致
C:\myApp\www\js\templates.js
$templateCache.put("tabs.html", ...
->
$templateCache.put("templates/tabs.html", ...
(3)(gulp task)开启ng-strict-di
安装gulp-ng-annotate
修改gulpfile.js
修改ionic.project
修改index.html
js会被重新生成到一下,并且严格符合注入标准
C:\myApp\www\dist\dist_js\app
(4)(gulp task)合并JS、CSS文件
安装gulp-useref
修改gulpfile.js
修改ionic.project
修改index.html
生成以下文件:
C:\myApp\www\dist\index.html
C:\myApp\www\dist\dist_css\styles.css
C:\myApp\www\dist\dist_js\app.js
(5)(cordova hook)混淆代码
安装cordova-uglify
C:\myApp\hooks\after_prepare
01_jshint.js
020_remove_sass_from_platforms.js
030_clean_dev_files_from_platforms.js
040_move_dist_files_to_platforms.js
050_clean_obfuscation.js
060_uglify.js
文件夹里已经有的uglify.js可以删掉。
至此完成!完整的工程代码,点击下载。
assert文件夹对比,经过处理后只剩下了styles.css、app.js、index.html:
index.html对比
参考:
https://www.airpair.com/ionic-framework/posts/production-ready-apps-with-ionic-framework
以下通过gulp tasks和cordova hooks来保护你的源代码。
・gulp tasks - ionic serve时执行
・cordova hooks - ionic build/run时执行
(0)创建一个ionic工程
cordova@5.0.0
ionic@1.3.20
C:\>ionic start myApp tabs
首先编译一个调试用的apk,以后的发布版apk作对比。
C:\>cd myApp C:\myApp>cordova plugin add https://github.com/apache/cordova-plugin-whitelist.git C:\myApp>ionic platform add android C:\myApp>ionic build android 生成C:\myApp\platforms\android\build\outputs\apk\android-debug.apk
(1)(cordova hook)JS代码的Lint
混淆JS代码的前提要保准JS代码没有错误。
安装jshint
C:\myApp>npm install jshint --save-dev C:\myApp>npm install async --save-dev
hook文件
C:\myApp\hooks\after_prepare\01_jshint.js
编译
C:\myApp>ionic build android
引用
Linting www/js/controllers.js
Errors in file www/js/controllers.js
9:4 -> Missing semicolon. -> }
Errors in file www/js/controllers.js
9:4 -> Missing semicolon. -> }
ionic的sample工程controllers.js有错误,第九行缺少分号。
修改错误提示,直到build成功。
(2)(gulp task)把html模板转换为angularjs模板
安装gulp-angular-templatecache
C:\myApp>npm install gulp-angular-templatecache --save-dev
修改gulpfile.js
var templateCache = require('gulp-angular-templatecache'); var paths = { sass: ['./scss/**/*.scss'], templatecache: ['./www/templates/**/*.html'] }; gulp.task('templatecache', function (done) { gulp.src('./www/templates/**/*.html') .pipe(templateCache({standalone:true})) .pipe(gulp.dest('./www/js')) .on('end', done); }); gulp.task('default', ['sass', 'templatecache']); gulp.task('watch', function() { gulp.watch(paths.sass, ['sass']); gulp.watch(paths.templatecache, ['templatecache']); });
修改ionic.project
{ "name": "myApp", "app_id": "", "gulpStartupTasks": [ "sass", "templatecache", "watch" ] }
修改app.js
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'templates'])
修改index.html
<script src="js/templates.js"></script>
C:\myApp>npm install C:\myApp>ionic serve 生成C:\myApp\www\js\templates.js
把templates.js里的templateUrl改成和app.js的templateUrl一致
C:\myApp\www\js\templates.js
$templateCache.put("tabs.html", ...
->
$templateCache.put("templates/tabs.html", ...
(3)(gulp task)开启ng-strict-di
安装gulp-ng-annotate
C:\myApp>npm install gulp-ng-annotate --save-dev
修改gulpfile.js
var ngAnnotate = require('gulp-ng-annotate'); var paths = { sass: ['./scss/**/*.scss'], templatecache: ['./www/templates/**/*.html'], ng_annotate: ['./www/js/*.js'] }; gulp.task('ng_annotate', function (done) { gulp.src('./www/js/*.js') .pipe(ngAnnotate({single_quotes: true})) .pipe(gulp.dest('./www/dist/dist_js/app')) .on('end', done); }); gulp.task('default', ['sass', 'templatecache', 'ng_annotate']); gulp.task('watch', function() { gulp.watch(paths.sass, ['sass']); gulp.watch(paths.templatecache, ['templatecache']); gulp.watch(paths.ng_annotate, ['ng_annotate']); });
修改ionic.project
{ "name": "myApp", "app_id": "", "gulpStartupTasks": [ "sass", "templatecache", "ng_annotate", "watch" ] }
修改index.html
<script src="dist/dist_js/app/app.js"></script> <script src="dist/dist_js/controllers.js"></script> <script src="dist/dist_js/services.js"></script> <script src="dist/dist_js/templates.js"></script> <body ng-app="starter" ng-strict-di>
C:\myApp>ionic serve
js会被重新生成到一下,并且严格符合注入标准
C:\myApp\www\dist\dist_js\app
(4)(gulp task)合并JS、CSS文件
安装gulp-useref
C:\myApp>npm install gulp-useref --save-dev
修改gulpfile.js
var useref = require('gulp-useref'); var paths = { sass: ['./scss/**/*.scss'], templatecache: ['./www/templates/**/*.html'], ng_annotate: ['./www/js/*.js'], useref: ['./www/*.html'] }; gulp.task('useref', function (done) { var assets = useref.assets(); gulp.src('./www/*.html') .pipe(assets) .pipe(assets.restore()) .pipe(useref()) .pipe(gulp.dest('./www/dist')) .on('end', done); }); gulp.task('default', ['sass', 'templatecache', 'ng_annotate', 'useref']); gulp.task('watch', function() { gulp.watch(paths.sass, ['sass']); gulp.watch(paths.templatecache, ['templatecache']); gulp.watch(paths.ng_annotate, ['ng_annotate']); gulp.watch(paths.useref, ['useref']); });
修改ionic.project
{ "name": "myApp", "app_id": "", "gulpStartupTasks": [ "sass", "templatecache", "ng_annotate", "useref", "watch" ] }
修改index.html
<!-- build:css dist_css/styles.css --> <link href="css/style.css" rel="stylesheet"> <link href="css/ionic.app.css" rel="stylesheet"> <!-- endbuild --> <!-- build:js dist_js/app.js --> <script src="dist/dist_js/app/app.js"></script> <script src="dist/dist_js/app/controllers.js"></script> <script src="dist/dist_js/app/services.js"></script> <script src="dist/dist_js/app/templates.js"></script> <!-- endbuild -->
C:\myApp>ionic serve
生成以下文件:
C:\myApp\www\dist\index.html
C:\myApp\www\dist\dist_css\styles.css
C:\myApp\www\dist\dist_js\app.js
(5)(cordova hook)混淆代码
安装cordova-uglify
C:\myApp>npm install cordova-uglify --save-dev C:\myApp>npm instal mv --save-dev
C:\myApp\hooks\after_prepare
01_jshint.js
020_remove_sass_from_platforms.js
030_clean_dev_files_from_platforms.js
040_move_dist_files_to_platforms.js
050_clean_obfuscation.js
060_uglify.js
文件夹里已经有的uglify.js可以删掉。
C:\myApp>ionic build android 发布版apk C:\myApp\platforms\android\build\outputs\apk\android-debug.apk
至此完成!完整的工程代码,点击下载。
assert文件夹对比,经过处理后只剩下了styles.css、app.js、index.html:
index.html对比
参考:
https://www.airpair.com/ionic-framework/posts/production-ready-apps-with-ionic-framework
发表评论
-
Cordova各版本的不同
2015-04-12 17:26 31237Cordova每次大版本的发布都会带来系统架构很大的变化,很多 ... -
把CordovaWebView嵌入到自己的应用(Embedding WebViews)
2015-04-07 10:56 25154以下以Android为例。 (1)下载最新版的Cordova ... -
完整配置的Cordova-Phonegap-Ionic-Android环境
2015-01-22 17:01 9642搭建开发环境是程序员的基本功,虚拟机技术(VMware、Vir ... -
Cordova 3.x 入门 - 目录
2014-12-06 21:32 59448这个系列是基于Cordova 3. ... -
Awesome PhoneGap/Cordova
2014-12-03 22:23 3505A curated list of amazingly awe ... -
把Crosswalk打包到Cordova应用中
2014-10-09 16:02 4871(1)从Crosswalk官网下载Cordova Androi ... -
Eclipse开发ionic应用
2014-09-19 11:10 22165(1)首先下载最新版的Eclipse 4.4 (Luna) ... -
Cordova 3.x 实用插件(6) -- 检查APP是否被安装
2014-09-12 11:17 10087应用中经常要启动其他应用,比如:打开市场为自己的应用打分、强制 ... -
Cordova 3.x 实用插件(5) -- 通过自定义URL Scheme启动你的APP
2014-09-11 14:45 7616通过URL Scheme来启动APP是一种很常见的做法,比如: ... -
Cordova 3.x 实例开发 -- 基于Ionic的Todo应用
2014-05-27 13:04 32149基于Ionic的Todo应用,以下为Android截图,代码在 ... -
PhoneGap和Cordova的区别
2014-05-15 10:56 10034Cordova历史发展 ・2009年 通过iPhoneDevC ... -
Cordova Android中ShowTitle的问题
2014-04-28 13:34 3989根据官方文档的描述,要想显示TitleBar需要在config ... -
Cordova 3.x 源码分析(7) -- CordovaLib概要
2014-04-25 17:16 10287在http://rensanning.iteye.com/bl ... -
Cordova 3.x 源码分析(6) -- cordova.js本地交互JS<->Native
2014-04-24 12:11 15767src/android/android/nativeapipr ... -
Cordova 3.x 源码分析(5) -- cordova.js导入、初始化、启动、加载插件
2014-04-22 16:44 27166执行cordova.js的入口就以下2行代码: // 导入co ... -
Cordova 3.x 源码分析(4) -- cordova.js事件通道pub/sub
2014-04-22 15:40 4320作为观察者模式(Observer)的一种变形,很多MV*框架( ... -
Cordova 3.x 源码分析(3) -- cordova.js模块系统require/define
2014-04-16 13:21 6512类似于Java的package/import,在JavaScr ... -
Cordova 3.x 源码分析(2) -- cordova.js概要
2014-04-16 13:14 11565前提环境: 引用Platform: android Versi ... -
Cordova 3.x 源码分析(1) -- Cordova CLI
2014-04-15 15:07 6235(1)Node.js的使用 Cordova CLI基于node ... -
Cordova 3.x 实用插件(4) -- Android的SEND、VIEW、CALL(WebIntent)
2014-04-09 16:20 6660插件地址:https://github.com/Initsog ...
相关推荐
Ionic2是一个开源的框架,用于构建高性能的跨平台移动应用。它基于Angular2+ 和 Cordova/PhoneGap,利用HTML、CSS和JavaScript来开发原生感受的应用。本章节主要介绍了Ionic2的基础知识,适合初学者快速入门。 ####...
#### 第九章:发布Ionic应用 - **9.1 生成图标和预览图** - 介绍了如何创建符合各平台规范的应用图标和预览图。 - **9.2 验证config.xml** - config.xml是Cordova项目中的配置文件,本节解释了如何验证该文件的...
首先,Ionic2是一个用于构建移动应用的开源前端框架。通过使用Ionic2,开发者可以利用Web技术(如HTML、CSS和JavaScript)创建跨平台的移动应用。它使用AngularJS作为它的框架,允许开发者用TypeScript或JavaScript...
1. **Ionic基本架构**:Ionic基于Angular框架,因此,理解Angular的基本概念,如组件、服务、依赖注入等,是构建Ionic应用的基础。同时,Ionic还引入了Ionic Core,提供了一系列UI组件,如导航栏、滑块、按钮等,...
**描述:** 本书还深入探讨了如何将Ionic应用部署到不同的设备上,以及如何进一步优化应用性能。 1. **应用运行与测试** - **模拟器测试**:介绍了如何使用Ionic Serve工具在浏览器中预览应用,并通过Chrome的...
Ionic View是一个可以实时分享和预览开发中应用的服务,而Ionic Pro则是面向企业的更高阶服务,提供了代码部署、构建、测试和分发的完整流程。通过Ionic Pro,开发者可以将应用部署到云端,并利用其提供的功能来简化...
3. **内网调试**:一个重要的特性是支持内网调试,这意味着开发者无需将应用发布到公共网络,只需在本地开发环境中运行,即可在连接同一局域网的Android设备上预览和调试应用,确保数据安全和隐私。 4. **原生插件...
2. **页面结构**:`Ionic2`应用由多个页面(Page)组成,每个页面都包含一个组件。在本示例中,你可以看到如何定义和使用自定义页面,例如,创建一个包含下拉框和输入框的新组件。 3. **UI组件**: - **下拉框...
在移动应用开发领域,Ionic 是一个非常流行的开源框架,它基于 HTML5 技术,用于构建高度交互的、跨平台的原生移动应用。本文将深入探讨 Ionic 的核心概念、技术栈、开发流程以及实际应用。 一、Ionic 框架概述 ...
【标题】"Ionic2微软官方查看天气Demo"是一款基于Ionic2框架开发的移动应用示例,主要用于展示如何在iOS和Android平台上构建一个实时查询天气的应用。这个Demo是微软官方提供的,意味着它遵循了最佳实践,并且经过了...
一个组件可以通过设置另一个组件的输入属性(@Input())来传递数据,或者通过输出属性(@Output())来发布事件。例如,在投票案例中,父组件可以设置子组件的投票选项,而子组件可以通过输出事件通知父组件投票结果...
【描述】:“Ionic 示例”通常指的是使用Ionic框架开发的一个实际应用示例,可能包含了创建一个带有侧滑菜单的应用的过程。Ionic是一个流行的开源框架,用于构建跨平台的移动应用,它基于Angular,并利用了Cordova或...
1. **Ionic概述**: Ionic是一个跨平台的移动应用开发框架,允许开发者使用Web技术(如HTML、CSS和JavaScript)来构建原生感观的应用程序,支持iOS、Android以及Web平台。 2. **Ionic 5新特性**: Ionic 5带来了...
1. **AngularJS**:作为 Ionic 的基础,AngularJS 是一个强大的前端MVVM(Model-View-ViewModel)框架,它允许开发者使用声明式编程来构建复杂的单页应用。AngularJS 提供了数据绑定、依赖注入、指令系统等功能,...
"IONIC+PhoneGap项目源码"表明这是一个结合了IONIC和PhoneGap的移动应用开发项目。源码通常包含项目的结构、配置文件、HTML模板、CSS样式、JavaScript逻辑以及可能的Cordova插件代码。通过分析这些源码,开发者可以...
通过Cordova或PhoneGap,Ionic应用可以打包为可安装的原生应用,同时使用Web技术进行开发。 9. **组件库**:Ionic提供了丰富的UI组件,如导航栏、滑动选项卡、模态对话框等,帮助开发者快速搭建移动应用界面。 10....