> 
 > 
 > 
【Ionic】Ionic实现iOS与Android端代码『热更新』与Android升级下载功能 （ v1.3.x版本 ）
摘要：热更新的好处通常ionic源码可包括(HTML,JavaScript,CSS文件和其他资源),往常我们必须通过提交程序到应用市场,经过漫长的审核后才可让用户更新,每改动一个小地方都需要重新打新版本。现在ionic通过使用cordova插件cordova-hot-code-push实现实现iOS与Android端代码『热更新』功能,可不必发布应用市场经平台审核,便可动态更新App源码的目的。热更新实现原理基础实现方法1、安装cordova-hot-code-push-cli使用
热更新的好处 通常ionic源码可包括(HTML,JavaScript,CSS文件和其他资源),往常我们必须通过提交程序到应用市场,经过漫长的审核后才可让用户更新,每改动一个小地方都需要重新打新版本。
现在ionic通过使用cordova插件cordova-hot-code-push实现实现iOS与Android端代码『热更新』功能,可不必发布应用市场经平台审核,便可动态更新App源码的目的。
热更新实现原理
基础实现方法 1、安装 cordova-hot-code-push-cli
使用命令安装 npm install -g cordova-hot-code-push-cli
主要是生成检测配置文件,通常是在 www 目录下动态生成 chcp.json 和 chcp.manifest 生成两个文件,插件源码地址:
https://github.com/nordnet/cordova-hot-code-push
2、创建项目
包含 www 目录的项目,已有项目无需重新创建
3、安装热更新插件
使用命令安装 ionic plugin add cordova-hot-code-push-pluginionic plugin add cordova-hot-code-push-local-dev-addon
4、打包封装
执行命令cordova-hcp build 或者 cordova build
5、启动 hcp server 服务
重新打开一个终端窗口,cd到项目目录(包含www目录的父级目录)执行命令 cordova-hcp server
稍等会在 www 目录下动态生成 chcp.json 和 chcp.manifest 生成两个文件
6、正常在运行完成前4步以后会在我们config.xml动态加入如图所示链接地址
图中链接地址https://1980480f.ngrok.io/chcp.json,修改为在第8步www目录里chcp.json文件可访问的地址:
例如:http://kaibin.me/hotcode/chcp.json
7、运行代码或打包我们的App
8、修改我们想要更新的代码
然后修改 chcp.json 文件的 content_url ,此地址为我们项目放置的地址 { &autogenerated&: true, &release&: &-11.36.13&, &content_url&: &http://kaibin.me/hotcode&, &update&: &now&}
9、将项目www目录代码上传到服务器可访问的目录里
例如在服务器根目录创建hotcode命名的目录将项目www里的文件上传上去
10、 关闭我们的应用重新打开,看看代码是否更新成功
**优化流程 1.创建cordova-hcp模板**
线上测试可卸载掉 cordova-hot-code-push-local-dev-addon防止每次自动更新新版本,可通过命令卸载: cordova plugin remove cordova-hot-code-push-local-dev-addon
可以在 cordova 项目根目录下放一个 cordova-hcp.json,这是个模板文件 这样每次执行 cordova-hcp build
就会利用这个模板生成新的 chcp.json,而不用手动更改 www/chcp.json了。 cordova-hcp.json内容如下: { &autogenerated&: true, &content_url&: &http://kaibin.me/hotcode&, &min_native_interface&: 1, // app内核版本号 &ios_identifier&: &https://itunes.apple.com/cn/app/***&, // iOS上线后的地址,用于内核版本更新后的确认跳转 &update&: &now&}
2.Build options build设置,配置开发环境、测试环境与生产环境
在 /Cordova/Testproject/ 下创建 chcpbuild.options 文件,文件内容如下: { &dev&: { &config-file&: &https://dev.kaibin.me/hotcode/www/chcp.json& }, &production&: { &config-file&: &https://kaibin.me/hotcode/chcp.json& }, &QA&: { &config-file&: &https://test.kaibin.me/hotcode/chcp.json& }}
这样在build app的时候, 转为开发要用的服务器, 可执行: ionic build -- chcp-dev
结果就是, 特定拍下的 config.xml 文件(比如, /Cordova/TestProject/platforms/android/res/xml/config.xml) 变成了这样: &chcp& &config-file url=&https://dev.kaibin.me/hotcode/chcp.json&/&&/chcp&
当我们需要上架app的时候 (Google Play, App Store) - 我们正常build: ionic build --release
这样 config.xml 不会改变
如果没有使用 chcpbuild.options 插件会使用 config.xml 里面默认的值。
文件必须位于 Cordova 项目根目录. 在这个文件里面,指定(JSON格式) 所有想改变 config.xml 文件的配置,源文件 config.xml (Cordova项目根目录) 不会发生变动, 改变的是 特定平台下的 config.xml (在cordova build过程的 after_prepare 阶段)。
通过min_native_interface监控app是否提示更新
所需最小的外壳app版本. 这是app的build版本号,是个整型数字, 不是应用商店中看到的形如”1.0.0”字符串。
在 config.xml中,这样指定build版本号: &chcp& &native-interface version=&1&/& &config-file url=&http://kaibin.me/hotcode/chcp.json&/&&/chcp&
与www目录下的chcp.json里面的min_native_interface数值相对应
例如:app外壳里的config.xml是这样的: &chcp& &native-interface version=&1&/& &config-file url=&http://kaibin.me/hotcode/chcp.json&/&&/chcp&
若服务器里的min_native_interface也对应是1,不会出现提示用户升级的状态,正常修改www目录的内容通过更新release值,可实现热更新。 { &autogenerated&: true, &content_url&: &http://kaibin.me/hotcode&, &min_native_interface&: 1, // app内核版本号 &ios_identifier&: &https://itunes.apple.com/cn/app/***&, // iOS上线后的地址,用于内核版本更新后的确认跳转 &release&: &-12.22.11&, &update&: &now&}
假设你的外壳app加了个新的插件,应该会更新外壳app。为了防止用户通过热更新下载了不适合他现有外壳app的web内容,你应该设置 min_native_interface 这个值 { &autogenerated&: true, &content_url&: &http://kaibin.me/hotcode&, &min_native_interface&: 1, // app内核版本号 &ios_identifier&: &https://itunes.apple.com/cn/app/***&, // iOS上线后的地址,用于内核版本更新后的确认跳转 &release&: &-12.28.21&, &min_native_interface&: 2, &update&: &now&}
插件加载到这段json的时候, 发现 min_native_interface 比当前外壳app的build号要大,便不会下载web内容。而是触发一个chcp_updateLoadFailed 错误通知, 告诉用户需要升级外壳app了。
chcp.json中update字段含义
指定了什么时候安装web内容更新,支持的值有:
start - app启动时安装更新,默认值 resume - app从后台切换过来的时候安装更新 now - web内容下载完毕即安装更新
引导用户去应用商店更新外壳app或下载新版本 通过给web更新设置最小支持的外壳app版本 min_native_interface。 如果插件检查发现用户安装的外壳app版本比服务端新的web内容要求的版本要低,就会触发错误事件,错误码: chcp.error.APPLICATION_BUILD_VERSION_TOO_LOW
通过这个错误码可通过弹窗提示用户去升级,跳转到AppStore或下载新安装包(国内因GFW,跳转到google应用商店就算了= =)
chcp.json 里增加min_native_interface的值
js端监听相应事件,并在出现错误的时候调用 chcp.requestApplicationUpdate 方法
cordova-plugin-file,cordova-plugin-file-transfer,cordova-plugin-file-opener2先把这几个插件安装好 var appUpdate = { // Application Constructor initialize: function() { this.bindEvents(); }, // Bind any events that are required. // Usually you should subscribe on 'deviceready' event to know, when you can start calling cordova modules bindEvents: function() { document.addEventListener('deviceready', this.onDeviceReady, false); document.addEventListener('chcp_updateLoadFailed', this.onUpdateLoadError, false); }, // deviceready Event Handler onDeviceReady: function() { }, onUpdateLoadError: function(eventData) { var error = eventData.detail. // 当检测出内核版本过小 if (error &;&; error.code == chcp.error.APPLICATION_BUILD_VERSION_TOO_LOW) { var dialogMessage = '有新的版本,请下载更新'; // iOS端 直接弹窗提示升级,点击ok后自动跳转 if(ionic.Platform.isIOS()){ chcp.requestApplicationUpdate(dialogMessage, this.userWentToStoreCallback, this.userDeclinedRedirectCallback); // Android端 提示升级下载最新APK文件 }else if(ionic.Platform.isAndroid()){ var confirmPopup = $ionicPopup.confirm({ template: '有新的版本,请下载更新', cssClass: 'popup', cancelText:'取消', okText:'升级' }); confirmPopup.then(function (res) { if (res) { $ionicLoading.show({ template: &已经下载:0%& }); window.resolveLocalFileSystemURL(cordova.file.externalRootDirectory, function(fileEntry) { fileEntry.getDirectory(&***(app名称)&, { create: true, exclusive: false }, function (fileEntry) { //下载代码 var fileTransfer = new FileTransfer(); fileTransfer.download(&app下载地址&, fileEntry.toInternalURL()+&***(app名称).apk&, function(entry) { // 打开下载下来的APP cordova.plugins.fileOpener2.open( entry.toInternalURL(),//下载文件保存地址 'application/vnd.android.package-archive', {//以APK文件方式打开 error: function(err) { }, success: function() {} }); }, function(err) { },true); fileTransfer.onprogress = function(progressEvent) { $timeout(function () { var downloadProgress = (progressEvent.loaded / progressEvent.total) * 100; $ionicLoading.show({ template: &已经下载:& + Math.floor(downloadProgress) + &%& }); if (downloadProgress & 99) { $ionicLoading.hide(); } }); }; },function(err){alert(&创建失败&)}); }); } }); } } }, userWentToStoreCallback: function() { // user went to the store from the dialog }, userDeclinedRedirectCallback: function() { // User didn't want to leave the app. // Maybe he will update later. } }; appUpdate.initialize();
iOS与Android的出现的问题 在build ios的app时config.xml的 &name&***&/name&
name不可使用中文,设置app名称为中文,可通过Xcode修改Resources目录下的*-Info.plist内的Bundle display name字段即可
感谢分享:http://kaibin.me//ionic-hotcode/
以上是的内容，更多
的内容，请您使用右上方搜索功能获取相关信息。
若你要投稿、删除文章请联系邮箱：zixun-group@service.aliyun.com,工作人员会在五个工作日内给你回复。
新用户大礼包！
现在注册，免费体验40+云产品，及域名优惠！
云服务器 ECS
可弹性伸缩、安全稳定、简单易用
&40.8元/月起
预测未发生的攻击
&24元/月起
你可能还喜欢
你可能感兴趣
阿里云教程中心为您免费提供
【Ionic】Ionic实现iOS与Android端代码『热更新』与Android升级下载功能 （ v1.3.x版本 ）相关信息，包括
的信息，所有【Ionic】Ionic实现iOS与Android端代码『热更新』与Android升级下载功能 （ v1.3.x版本 ）相关内容均不代表阿里云的意见！投稿删除文章请联系邮箱：zixun-group@service.aliyun.com，工作人员会在五个工作日内答复
售前咨询热线
支持与服务
资源和社区
关注阿里云
International从ionic转到APIcloud 和 dcloud.io后的使用感受
从ionic转到APIcloud 和 dcloud.io后的使用感受
自己之前写了一篇关于ionic的编程使用感受。自己是比较推荐推荐使用ionic的。
最近忽然发现国内有一个叫dcloud的混合应用编程产品，起初并没有听说过这个产品，因为刚开始用的是一个叫APIcloud的产品。
自己之前写了一篇关于ionic的编程使用感受。自己是比较推荐推荐使用ionic的。
最近忽然发现国内有一个叫dcloud的混合应用编程产品，起初并没有听说过这个产品，因为刚开始用的是一个叫APIcloud的产品。
话说APIcloud用了几天之后有喜有悲：
1. 原生的前端界面个人感觉比较低档次。
2. 真机调试的时候，感觉卡顿明显，虽然用的也不是什么好手机。
3. 编写前端代码的时候略显麻烦和复杂（反正我现在也不记得怎么写了）。
比较值得肯定的是：
1. 有属于自己的网页控制台界面，这点非常方便开发者甚至是团队了解自己的应用情况。
2. 有类似nosql的数据后台和端口整合，方便开发者，特别是混合型应用开发者的数据调用。
3. 控制台里面除了方便管理之后，能看到的一些应该算是特色功能也是值得试用的，比如证书生成， 代码托管，云编译，API调试，云修复，推送，闪屏广告，这些都是能在网页端可视化操作的。
4. 另一特色就是APIcloud自家的模块，类似于整合的第三方服务吧，方便开发者接入。
5. 文档和教程丰富。
试用了几天，和ionic相对比之后，就觉得这不算是我喜欢的feel。之后果断百度类似产品，忽然看到各种dcloud和APIcloud的恩怨情仇新闻。之后就奔着西瓜围观的心情去看看dcloud家的产品。
dcloud简单分类的话，应该有Hbuilder， MUI， H5+native.js， 以及一直没空研究的流应用这几个产品。
1. Hbuilder， 确实在不用加入任何插件的情况下就已经非常的好用（最近经常使用的就是VS code， sublime 和 Hbuilder了），自然的特别是对自家的产品的支持是异常的舒爽。
2. MUI，说实话这一看之下以为ionic来国内发展了，连网页的demo都做的差不多。
3. H5+native.js 看了文档和介绍，感觉应该是挺不错的。
4. 流应用直接没看，不做评价
下面来吐槽一下dcloud的几点：
1. MUI 好看，文档也借鉴ionic得有几分相似，但是话说能不能借鉴纠结建好的到底嘛，ionic是文档旁边加demo演示，MUI 就文档，虽然说文档写得十分详细，但是ionic加上demo在旁，查看文档的时候就显得非常直观，直接明了。
2. H5+native.js，在前端MUI 花了几天都没弄好的情况下，真没时间去先研究这个。后来发现5+其实对前端来说很重要，因为熟悉的话应该对前端有很大的帮助。
3. dcloud的社区总给人一种找不到答案的感觉，相比之下ionic的社区的问答效率是值得肯定的。
简单点评一下的话， ionic约等于APIcloud+dcloud，那么你们就想问了为什么不继续用ionic，最近很蛋疼的发现ionic的ionic view真机测试刷新应用一直404错误，估计跟应用服务器有关。
所以ionic上的项目一直拖着。不夸张的说用ionic三四天差不多可以从ionic 商店里大概“抄”出一个app。但是dcloud三四天本人还真没什么进展的感觉。
重点就是ionic是搭配着angularjs 使用的，结构分工比较明细，加上类似MVC的效果是的开发思路变得简单，容易上手。
dcloud感觉就是差个类似MVC的搭配使用。不过dcloud还是被我拍在这三个产品中的第二位。只能说dcloud的技术是可以的，但是还有很多的地方可以再补充。
夜了，不写了。
明天再看看dcloud，ionic的应用刷新真是纠结。
如有错误还请谅解，以及指教。
用云栖社区APP，舒服~
【云栖快讯】诚邀你用自己的技术能力来用心回答每一个问题，通过回答传承技术知识、经验、心得，问答专家期待你加入！&&
那新手入坑的话，学习哪种能更好呢。。。ionic or dcloud 还是其它的？
我都用两个平台进行过开发，现在兜兜转转又回到了ionic的怀抱。简单分析一下原因就是，开发，应用体验和技术文档和支持这几方面，觉得ionic，或者想其他的phonegap都会比dcloud好。我估计这几天会写一篇ionic和dcloud的文章。dcloud在国内的开发体验可能更好。ionic全面的比dcloud好吧。
dcloud就是cordova的封装
实话告诉你，用dcloud开发app的模式跟Ionic不一样，不需要用angularjs，dcloud并不是开发单页面应用，很多人都是进入了这个误区，否则你不会理解dcloud的精髓，话说3分，留七分
阿里云移动APP解决方案，助力开发者轻松应对移动app中随时可能出现的用户数量的爆发式增长、...
大数据开发套件（Data IDE），提供可视化开发界面、离线任务调度运维、快速数据集成、多人...
服务底层使用经国家密码管理局检测认证的硬件密码机，通过虚拟化技术，帮助用户满足数据安全方面的...
为您提供简单高效、处理能力可弹性伸缩的计算服务，帮助您快速构建更稳定、安全的应用，提升运维效...
阿里云总监课正式启航 > 
 > 
 > 
Ionic2 开发笔记（1）ionic2 +angular2搭建
摘要：1.去node.js官网下载对应版本https://nodejs.org/en/(不会请看OnsenUi搭载,里面有详细过程)2.然后通过npm下载Ionic和cordova&$npminstall-gioniccordova&$npminstall-gionic&typescriptionic-v&&cordova-v检查版本3.这样一个ionic2就搭载完成了,接下来创建一个ionic2App$ionicstartdemo
1.去node.js官网下载对应版本https://nodejs.org/en/(不会请看OnsenUi搭载,里面有详细过程)
2.然后通过npm下载Ionic和cordova
& $ npm install -g ionic cordova
& $ npm install -g ionic&typescript
& &cordova -v 检查版本
3.这样一个ionic2就搭载完成了,接下来创建一个ionic2 App
$ ionic start demo --v2
--v2表示创建的ionic2,不写则创建ionic应用。
4.进入创建的项目,开启浏览器测试
&$ cd&demo&
&$ ionic serve
5.基本APP就创建完毕。
6.moveToIonic2官网
有时间会及时更新后续内容,有问题可以私聊探讨!
以上是的内容，更多
的内容，请您使用右上方搜索功能获取相关信息。
若你要投稿、删除文章请联系邮箱：zixun-group@service.aliyun.com,工作人员会在五个工作日内给你回复。
新用户大礼包！
现在注册，免费体验40+云产品，及域名优惠！
云服务器 ECS
可弹性伸缩、安全稳定、简单易用
&40.8元/月起
预测未发生的攻击
&24元/月起
你可能还喜欢
你可能感兴趣
阿里云教程中心为您免费提供
Ionic2 开发笔记（1）ionic2 +angular2搭建相关信息，包括
的信息，所有Ionic2 开发笔记（1）ionic2 +angular2搭建相关内容均不代表阿里云的意见！投稿删除文章请联系邮箱：zixun-group@service.aliyun.com，工作人员会在五个工作日内答复
售前咨询热线
支持与服务
资源和社区
关注阿里云
InternationalIonic2 - 触屏版 - 阿里云
文章标题为part1,并解释目前可以如此配置,但后续使用上可能还有变动。以ion-cli默认home组件为例。添加home.module.ts文件import{NgModule}from'@angular/core';import{IonicPageModule}from'ionic-angular';import{HomePage}from'./home';@NgModule({declarations:[HomePage],imports:[IonicPageModule
如何写一个cordova用于ionic2项目中呢,在搜索了一番之后,千篇一律,我都怀疑那些文章是不是全部都是复制来复制去的,而且都不是很详细。我自己也捣鼓了一下午,踩了很多坑。所以特此写这下这篇,记录一下。假设需求是写一个日志插件,可以将日志写在手机的sdcard中。1.安装plugmannpminstall-gplugman2.creat一个插件框架plugmancreat--name插件名字--plugin_id插件id--plugin_version插件版本号例如:复制
前景目前微信公众号程序开发已经相当火热,客户要求自己的系统有一个公众号,已经是一个很常见的需要。使用公众号可以很方便的便于项目干系人查看信息和进行互动,还可以很方便录入一些电脑端不便于录入的数据,如照片等。ionic是一个移动端开发框架,使用hybird技术,只要使用前端开发技术就可以开发出电脑端,安卓端和ios端的站点程序。由于其内置了很多仿移动端Native的控件,使用此框架进行移动端开发,既可以减少控件和样式开发成本,又可以很方便将已经开发的程序打包成安卓或ios程序。
普通的app用ionic内置的Storage存储键值对的方式可以满足日常的使用,但是有时候遇到一些奇怪的需求。比如说有个网友留言说做一个离线版的App,怎样调用本地Sqlite执行SQL语句。问题描述清楚直接上代码。需要说明的是SQLite是手机内置的数据库存储方式,在Ionic2中需要安装相应的插件和安装包。过程很简单第一步安装插件、并加入项目$ionicpluginaddcordova-sqlite-storage$npminstall--save@ionic-nativ
问题注册安卓硬件返回按钮事件是必须的,因为用户不小心点击了返回按钮就退出app体验很不好,所以有几种方法:1.实现按返回键最小化应用(最小化应用需要装cordova-plugin-appminimize插件,使用window['AppMinimize'].minimize();)。2.要么请求用户确认(添加一个ConfirmationAlerts)。3.按一下提示,按两下退出(加一个方法用toast提醒)。这里用第三种展示。解决在app.html中,添加#myNav,在app
直接上答案,如果出现这个错误,直接在component里添加一行代码:import{FileOpener}from'@ionic-native/file-opener';@Component({selector:'page-home',templateUrl:'home.html',providers:[FileOpener]//就是这行})这里我用的是fileopener插件报的错,所以写的是FileOpener,其他模块填入相应模块名即可。
之前讲过了如何在Ionic2中使用第三方库,因为第三方库必须针对TypeScript提供相应的声明文件——即d.ts文件,才能被TypeScript正确识别并编译。好在大多数的第三方库已经有了定义文件,可直接通过以下命令安装:npminstall@types/theLibraryName--save这样就可以解决大多数第三方库的引入问题,如上一篇博客中提到的ECharts组件。&那么如果某个第三方库没有对应的d.ts怎么办呢?除了自己手写d.ts之外,TypeScr
安装IonicIonic2程序主要通过Ionic命令行工具CLI来创建和开发,并使用Cordova来构建和部署为原生应用程序。也就是说我们需要先安装一些工具来实现程序开发。安装IonicCLI和Cordova要创建Ionic2项目,你需要安装最新版本的CLI和Cordova。在此之前你需要安装最新版本的Node.js。点这里下载安装Node.js,然后继续安装IonicCLI和Cordova来进行应用程序开发:安装Ionicnpminstall-gionic安装Cordova
本文分享了在Ionic2TypeScript项目中导入第三方JS库的方法,供参考。1.Typings的方式因在TypeScript中引用之前的JS库还需要引入对应的类型定义,也就是.d.ts文件。对于一些流行的JS库,相应地有了一个Typings库。Typings库的作用就是将一些现有的JS库生成好了对应的定义文件,可以通过Typings直接加载到项目中。详细可见TypingsforNPMPackages。2.其他第三方JS库的引用这里以国内的百度地图库作为示例进行说明。百度
@2017 Ailiyun Allright reserver > 
 > 
 > 
ionic 项目添加CocoaPods
摘要：使用xcode打开项目选择File-SaveAsWorkspace,保存到platforms/ios下vimPodfileplatform:ios,'7.0'workspace'***.xcworkspace'命令行执行命令podinstall卡住的解决方法:运行:rm-rf~/.cocoapods/repos/masterpodreporemovemasterpodsinstall--verbose可以看到下载提示。确认是否在运行:cd~/.cocoapodsdu-sh看值
使用xcode打开项目
选择File-Save As Workspace,保存到platforms/ios下
vim Podfile
platform :ios,'7.0'workspace '***.xcworkspace'
命令行执行命令pod install
卡住的解决方法:
运行: rm -rf ~/.cocoapods/repos/masterpod repo remove masterpods install --verbose 可以看到下载提示。
确认是否在运行: cd ~/.cocoapodsdu -sh
看值一直在变大,就是正在下载。如果不行就使用vpn
备用方案:如果还不行,就手工打开 https://github.com/CocoaPods/Specs 下载到本地, 下载到~/.cocoapods/repos/master/Specs 然后退出所有终端,重启终端。 参考: http://blog.csdn.net/samoy/article/details/
以上是的内容，更多
的内容，请您使用右上方搜索功能获取相关信息。
若你要投稿、删除文章请联系邮箱：zixun-group@service.aliyun.com,工作人员会在五个工作日内给你回复。
新用户大礼包！
现在注册，免费体验40+云产品，及域名优惠！
云服务器 ECS
可弹性伸缩、安全稳定、简单易用
&40.8元/月起
预测未发生的攻击
&24元/月起
你可能还喜欢
你可能感兴趣
阿里云教程中心为您免费提供
ionic 项目添加CocoaPods相关信息，包括
的信息，所有ionic 项目添加CocoaPods相关内容均不代表阿里云的意见！投稿删除文章请联系邮箱：zixun-group@service.aliyun.com，工作人员会在五个工作日内答复
售前咨询热线
支持与服务
资源和社区
关注阿里云
International
