ionic中使用热更新插件cordova-hot-code-push

2017/06/30ionic 标签:4

网上有很多关于这方面的资料和说明,但是我并没有找到一个真正能够搭建成功的案例。因此为了让大家别再走弯路,在此我研究了一个上午搭建成功,以此来提高大家的工作效率。
cordova-hot-code-push是一款专门为混合cordova应用开发的一个热更新插件,那么什么是热更新?热更新顾名思义就是,在混合app代码(html、js、css)发生改变的时候,我们不需要重新对app打包再次进行发布,而仅需要通知cordova-hot-code-push插件,代码已经发生了改变,然后cordova-hot-code-push插件就会根据我们指定的代码服务器进行更新相关的代码。这样的好处在于,客户再也不用再到相关的app store去下载新版本的app了,只要客户联网打开了app,app就会自动更新相关代码。这仅仅是用于代码更新上。如果我们所改变的不是代码,而是改变了webview或者说升级了ionic2到了ionic3,那么cordova-hot-code-push还会自动更新吗?毫无疑问cordova-hot-code-push已经无法再次进行自动更新了,但是它可以向客户端推送新的app,并强迫用户下载升级!好了,下面我就用ionic2的项目来说说怎么搭建cordova-hot-code-push和使用。
本次搭建在OS系统中,服务端使用xampp本地搭建而成,当然windows用户也不用紧张,因为操作步骤都是一样的,在windows上你可以使用android模拟器进行测试。

1、首先建立一个ionic项目

当然你得确保你已经安装了nodejs
安装ionic和cordova

npm install -g cordova ionic

我根据官方教程,创建一个tabs项目,输入如下命令

ionic start tab tabs
cd tab
npm install
ionic serve

这样就建立好了ionic项目了。 阅读更多

ionic2中引入自定义js文件或者引入第三方js文件

2017/06/29ionic 标签:0

最近在ionic2开发中,遇到了一些问题,主要的问题是,由于angular的使用,使得ionic2中要增加组件则必须进行文件夹以及ts、html的增加,但是有些常量则是永远固定不变的,这些常量在很多页面能使用到,因此萌生了一种想法就是将所有常量制作成config文件或者一个json文件,然后在进行调用。不过制作成json的想法破灭了,因为在使用过程中,发现json必须通过http请求来获取相关数据,而异步请求获得的数据并非全局变量,在http外部也无法进行调用。
因此就想到使用ionic中提供的一个超级不错的定义全局变量的方法declare,在ionic中直接使用declare是可以定义全局变量的,下面我们就来尝试下declare的强大功能吧! 阅读更多

angular2+使用iframe展示外链提示unsafe value used in a resource URL context解决方法

2017/06/23angularJS 标签:0

iframe在web项目中确实很少使用,但是在手机app中,很多人可能会使用到今天我在使用的过程中就出现了错误unsafe value used in a resource URL context,这个错误后面还跟了一个短网址,打开后就跳转到了angular.io的官方网站去了,大概是到了这里:https://angular.io/guide/security#xss,如果你英文水平不错,应该看看这个页面就会解决了吧!如果你懒得去官方研究那些难懂的英文,那么久跟着我一起来处理吧!
1、场景
比如说注册页面,需要用户同意相关法律法规以及注册条款等,因此就需要将相关的条款展示出来,一般的做法就是后端给出json数据或者其他类型的数据,让前端去调用。但是如果是一个简单的页面,那就没有必要进行数据库存储的话,那就直接在iframe中嵌入这个外部的url即可。
2、使用过程
如果不在ts中写url,直接在iframe的src中写url,我完全没有问题的,并且不会提示任何错误。但是由于之前我写了一个config.ts将所有的配置都放到了里面,包括url,因此我只能通过下面的方法进行实现!=
一般人会这样去使用url
import ......
public thisUrl = "http://www.egtch.com";
html模板中这样使用 阅读更多

angular2中如何制作如同input search的清空功能

2017/06/22angularJS 标签:0

使用过jQuery的童鞋,想要制作一个清空input内容的图标按钮是非常简单的事情,但是今天我要来说下angular2+版本中制作如此一个功能,远远比jQuery简单得多。而且是超级简单,根本不用写typescript代码,仅在html模板中就可以直接实现,当然我们也可以通过typescript的代码来进行实现,大同小异啊!
先来看实现后的大致功能效果,如下图: 阅读更多

angular2或4 获取checkbox的值

2017/06/22angularJS 标签:0

在一个项目中需要使用到这个功能,看了下官方的文档,说得不是很清楚,使用了formArray,但是没有实现成功。然后谷歌、百度了好久,也没有找到可以真正运行的代码,差点就放弃了。功夫不负有心人,在segmentfault上提问后,得到了相关回答,但是回答中得到了一个外国人博客上的文章,对照着改写了一番,感觉真的就这么实现了,真好,实现得和自己想要的最终结果一模一样。下面就来说说如何进行实现吧!
首先说下实现的逻辑思路,通过FormBuilder, FormGroup, FormArray来获取checkbox的选中状态,然后通过这些选中状态再去获得checkbox的值,再将想要的值展示出来即可。
1、导入相关功能模块

import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
import 'rxjs/add/operator/map';

2、创建checkbox数据源

public select = [
    {"name":"leo","selected":true,"sex":"男"},
    {"name":"Lily","selected":false,"sex":"女"},
    {"name":"Tony","selected":false,"sex":"男"}]

阅读更多

VS code开发工具的使用体验

在前端的大军中前行,你总得走过很多弯路,总得体验过各种开发工具,总得尝试各种新技术,然而对于开发工具我希望大家看了我这篇文章后能进行取舍,我是这样理解的。
由于以前总觉得微软太过于垄断,微软的大部分语言都仅支持windows,导致了个人不大喜欢微软的各种编程产品,因此本人不懂.net不懂C++等语言。
不过,自从接触了微软的VS CODE(visual studio code)两周后,感觉微软在开发工具方面做得还是很不错的。因为在我使用过的那么多开发工具中,至少我觉得2017年的VS CODE是良心之作。下面我就来说说各个开发工具的有点与缺点。 阅读更多

摔跤吧爸爸

前几天看了下最近很火的印度电影《摔跤吧爸爸》,感觉挺不错的,印度电影总是让人感觉到大片的味道。不过面对印度现今的男女不平等状态,能够有这么一部电影对女权的捍卫,我感觉印度在人权方面进步了一些,这部电影我觉得最感人的是一个爸爸由刚开始为了自己的梦想而剥夺女儿的童年自由直到最后,让自己的女儿获得了社会的尊重。其中不乏一个父亲渴望自己孩子成才的各种心酸,虽然影片中父亲的话并不多,但是总能看到那个稳重、默默付出的父亲。而女儿也不负众望,最终获得了金牌,并且赢得了尊重。
在印度,男人总是比女人有权,而女人总是没有什么地位,除了地位,女人在印度经常会受到奸杀。而这部电影也让当今的印度人民该好好思考下自己的人权方式了,真是奴隶文化根深蒂固啊!但是我们也看到了,虽然电影中的印度是多么好,但是现实生活中的印度,却真的不如电影中男女平等。这点我比较同情印度的女人,他们可能从一出生就注定一辈子就要待在家,一辈子除了做饭洗衣,其他的什么都做不了!
电影中,男主一直想要生个儿子继承自己的摔跤事业,完成自己的梦想 阅读更多

share

AD