如何为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
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. -> }
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
- 大小: 17 KB
- 大小: 25.2 KB
分享到:
相关推荐
Ionic是一个用来开发混合手机应用的开源代码库,它可以优化HTML、CSS和JavaScript的性能,构建高效的应用程序。 本书作为Ionic的学习手册,重点...综合利用所学知识开发一个聊天App,以及与发布Ionic App相关的知识。
介绍移动开发中的一个重要框架——基于 Apache Cordova 的混合移动应用开发方案 Ionic。 Ionic 3.9.2 版本,以一个实例为主线,贯穿 Ionic 项目开发的全过程。从本地开发环境搭建、源代码编写、单元测试、端到端...
这是ionic 5模板,您可以用来快速启动Ionic应用程序开发并节省数百小时的设计和开发时间。 它也是PWA,在灯塔中得分为100。 在您的手机上将其作为PWA尝试一下,看魔术吧! 它还具有许多形式和验证示例。
ionic-shopping-cart-2, 离子cordova购物车应用 购物车更新( 10-07-2016 )FoodKart v0.3 已经发布。 在这里阅读完整的教程系列。 FoodKart v0.2 FoodKart是一个简单的食品购买应用,构建在 HTML5 - Cordova 。 因为
√ 一次编译,“到处”发布(iOS和Android) √ 使用原生设备硬件以及设备特定功能 √ 涵盖完整的移动应用开发过程 读者需要了解HTML、CSS和JavaScript知识;对于AngularJS,懂一些*好,不懂也没有关系。
如果您想使用最新版本的Ionic框架构建自己的Fruit应用程序,并允许您通过此应用程序轻松构建适用于Android和iOS设备的移动应用程序,则可以直接发布到生产环境中,并从后端添加新数据。 寻找很棒的Web和移动应用...
了解如何开始使用Ionic 4创建一个包含列表、表单和导航的简单应用程序。Ionic 4 Starter应用程序,Angularjs于2016年发布,是Angularjs的重写版。它专注于良好的移动开发、模块化和改进的依赖注入。angular的设计目的...
离子-sqlite 使用 IONIC 通过 SQLITE (ngCordova) 访问数据库创建一个 Android 应用程序先决条件(环境) 安装并配置好环境变量:(稍后我会在这里发布如何设置环境) 节点离子android-sdk(API 级别 19) 绳索配置...
Angular-Django-Angular-Ionic.zip,利用用django构建的rest api,我们将构建一个角度web应用程序。使用相同的API,我们将使用Ionic框架构建一个移动应用程序。,Angularjs于2016年发布,是Angularjs的重写版。它专注...
这是一种ionic-toast凉亭组件,可以与任何Ionic框架的应用程序一起使用。 先决条件。 1) node.js,bower和gulp。 如何使用: 1)在项目存储库中,使用Bower安装ionic-toast bower install ionic-toast --save ...
ionic是一个强大的混合式/hybrid app移动开发框架。可以帮助您使用 Web 技术,比如 HTML、 CSS 和Javascript 构建接近原生体验的移动应用程序。目前已发布正式版本。基于Cordova,在Github有一堆原生的插件模块,能...
Angular-ionic-native-http-connection-backend.zip,离子型和iosionic本机http连接后端cors问题的解决方案,Angularjs于2016年发布,是Angularjs的重写版。它专注于良好的移动开发、模块化和改进的依赖注入。angular...
它提供了一些新功能,错误修复,性能改进以及Ionic应用程序的最新工具。 有关如何升级的更多详细信息,请查看我们的。离子应用程序脚本帮助程序脚本,可快速启动和运行(减去配置过载)。 要获取最新的@ionic/app-...
Angular-ionic-forms-and-validations.zip,使用这个Ionic示例应用程序学习如何处理Ionic 3和Angular 4中的表单和验证。在这个精彩的教程中,我们将介绍简单的和自定义的验证,并教您如何处理错误消息。,Angularjs于...
uTrack 一个Ionic 3应用程序,用于显示Spotify用户的统计信息利用Spotify Web API和Ionic Framework构建。 注意:此应用程序当前没有许可证更新日志1.5.0 添加了一个常见问题页面引擎盖下的几处变化1.4.1 很小的清理...
Angular-ionic3-start-theme.zip,Ionic3的开始主题有10个页面、模拟数据、提供者示例、存储、HTTP等…Ionic3的开始主题,Angularjs于2016年发布,是Angularjs的重写版。它专注于良好的移动开发、模块化和改进的依赖...
我的Project#100ions提供了一个免费的Ionic(5)模板。 我的目标是发布使用Ionic Framework(5)编写的100个免费模板。 在https://www.takethatdesign.com/100ions/上看到所有这些内容,我能得到什么? 一个基本...
该项目是一个Ionic应用,展示了Angular自定义组件和Stencil自定义Web组件。 此仓库是该文章的一部分: 。 运行项目 安装依赖项: npm install 运行项目: ionic serve 演示版 Web组件,Shadow DOM,CSS变量。 了解...