Angular | Ionic
关注
分享
扫一扫
Wang's Blog
Keep learning for the innovation era.
展开
-
Angular和jQuery之间的区别
Angular 和 jQuery 是两个比较awesome的前端开发工具，简单说说两者之间的区别吧。首先从概念上来说，NG是一款前端框架，我们写的功能(代码)被NG调用；JQ是一个库，封装了很多功能，我们调用JQ里的API去实现一些功能从应用上来看，NG需要考虑整个应用的架构，作为单页面的富客户端应用程序，JQ只是提供对DOM的包装和页面的渲染。从使用上来看，NG几乎不存在DOM操作，不过NG中原创 2016-05-05 13:03:12 · 6248 阅读 · 0 评论 -
ionic第三方QQ，微博，微信的登录,分享功能的实现和注意事项
本文只针对ionic1的用法做下记录，即使版本不同，但思想相同。申请应用权限第三方功能需要申请开发者账号，有个开发者账号之后才可以进行后续的操作，一般都需要公司资质。QQ：使用开发者账号登录腾讯开放平台(众创空间) 点击 应用接入 / 应用管理 / 创建应用 自己按照步骤填写完成。需要注意的是：安卓应用创建完成之后，直接在该应用下，点击IOS应用，同步进行IOS应用的创建，此时他们使用的是同一原创 2017-06-05 21:09:40 · 13288 阅读 · 0 评论 -
ionic配置自定义keystore签名文件并直接安装已签名apk到手机
在维护老项目的时候找到了解决方案，以前对ionic签名都是 $ cordova build --release android 然后再使用jarsigner命令签名，太麻烦了。查阅之前的方式，详情请看之前的这篇博客，我们说下更为方便的方法，使用自己的keystore直接安装到手机。步骤切换到安卓项目根目录下：$ cd platforms/android将自己的keystore文件拷贝到上面目原创 2017-07-05 12:58:39 · 2707 阅读 · 0 评论 -
快速解决gradle下载慢的问题的小技巧
在ionic run 或build 或clean命令的时候，如果没有下载过gradle, 需要重新下载一次，而通过CLI的方式下载很慢，即使科学上网后，下载还是存在一些问题。这里总结一下，快速的下载安装方式。步骤本地安装 http-server 包， 通过 $ npm i -g http-server 的方式安装到全局在官网上下载自己的版本,目前自带的版本是 2.14.1，其他版本可能在执行过原创 2017-07-06 13:13:19 · 5495 阅读 · 1 评论 -
快速解决ionic安卓主题启动时短暂的黑屏或白屏问题
这个问题其实是安卓主题的问题，在ionic在通过CLI生成项目的时候，就没有很好考虑到这个问题，启动时的短暂黑屏这个用户体验很不好，下面我们来着手解决它。步骤首先在 platforms/android/res/values/下新建styles.xml，编辑如下：<resources> <style name="Theme.AppStartLoadTranslucent" parent="an原创 2017-07-06 20:01:14 · 4817 阅读 · 10 评论 -
从ionic的项目构建和跨域设置说起
在ionic1中使用gulp进行项目构建，在ionic2中引入了webpack, 使用ionic2的webpack需要修改相关的配置，而在ionic1中需要自己写gulp任务。其中有一篇特别有帮助的[文章](https://segmentfault.com/a/1190000004609046)， github[地址](https://github.com/chenbin92/ionic-quickstarter-w原创 2017-05-31 20:41:21 · 2449 阅读 · 0 评论 -
Fix TypeError: Cannot read property 'emit' of undefined after upgrade to 2.0.0 @ionic/cli-plugin-ion
报错TypeError: Cannot read property ‘emit’ of undefined after upgrade to 2.0.0 @ionic/cli-plugin-ionic1解决方案$npm i -g ionic@latestionic 和 当前 ionic-cli版本不同导致的问题，需同步升级ionic参考https://github.com/ionic-te原创 2017-07-03 12:34:40 · 4167 阅读 · 0 评论 -
ionic中第三方网页,pdf等的载入处理和loading动画的实现
前言在ionic中，有一款cordova插件inAppBrowser可以实现外部网页的载入，然而现在我们不用这款插件，使用iframe的方式来实现。效果预览必要说明：在pdf.js的预览文件访问需要翻墙才能看到效果，关于存在的跨域问题，我们在代码中做了真机模式下的访问，并且隐藏了pdf.js控件中的下载，打印等不常用功能。关于pdf的网页化处理在github上的一款插件 pdf.js , 可以将pd原创 2017-06-11 18:14:45 · 3704 阅读 · 2 评论 -
ionic中的在线mp3播放功能
前言需要相关说明的，请参考前文效果预览github演示地址https://github.com/johnnynode/ionic-sample/blob/ionic-v1/mds/audio.mdAudio模块中的html关键代码：<ion-view class="audio" cache-view="false"> <ion-header-bar class="bar-stable">原创 2017-06-11 16:56:29 · 2809 阅读 · 0 评论 -
ionic中的在线视频播放功能
前言在ionic中处理视频播放的功能在stackoverflow, ionic-forum以及ionic的github issue中都有提及，有很多相关讨论， 我们只针对在线视频播放功能进行下总结，之前用过videogular这款插件,但在实际播放中的效果并不是很好。在实际开发中可以使用新浪微博网页版中的视频链接做测试(备注：新浪视频优化的比较好，播放很流畅) ，本文作为ionic中h5播放在线视频原创 2017-06-11 16:19:50 · 4613 阅读 · 0 评论 -
ionic中的分类侧边栏ABC字母滑动特效
在对之前项目进行回顾整理的过程中，发现自己做过挺有意思的特效，今天重新来梳理一下。首先要说明一下的是，一些特效都要依赖合理的布局和规范的数据和数据格式的支撑，今天整理的这个，不是很完美，还有很大提升的空间，不过作为开发参考，确实有一定的帮助。技术栈范围：ionic version 1，不管用的什么技术，实现思路都是想通的。效果预览github演示地址https://github.com/johnn原创 2017-08-27 19:38:24 · 2569 阅读 · 3 评论 -
ionic中滑动缩放的焦点图特效实现
在之前项目整理中，实现过这样一个特效：当用手指滑动时，焦点图随着滑动的距离而成比例的缩放的效果，常见于一些App上，主要是用于展示信息的卡片，相关技术栈版本，ionic1, angular1, 这里再来说一下：技术栈不同，但实现的思路是想通的，仅供开发参考。效果预览这里由于gif生成工具生成的图片很大，没有展示全部的功能，demo上可以切换不同类型的杂志以及一些切换的特效，并且如果是在线的图片，代码原创 2017-09-11 20:40:35 · 2081 阅读 · 4 评论 -
Angular的简单入门：2个基本指令，MVC，模块化和SPA的概念
Angular是一款优秀的前端js框架，用它可以轻松构建SPA(Single Page Application，单页面应用程序) ，它的特征是：具有mvc的架构模式，便于模块化开发，自动化双向数据绑定和特有的指令系统。它最大限度的解放了Dom操作，让js代码更专注于业务逻辑的实现，通过简单的指令，结合页面结构和逻辑数据，通过自定义指令，实现组件化编程，代码结构更合理，维护成本更低。angular原创 2016-04-23 11:39:12 · 2091 阅读 · 0 评论 -
ionic中一些常用的方法封装
在ionic1技术栈的开发中中有很多零碎的功能或者服务，通过每次注入的方式都比较麻烦, 所以需要对一些通用的功能进行一些封装(通用的UI封装成指令，通用的逻辑封装成服务) ，下面主要对一些常用功能进行封装，当然这里只是一个引子，针对不同的逻辑业务，有不同或者更多的实践，此处只作为举例，主要代码和相关注释如下：(function (angular) { 'use strict'; a原创 2017-06-11 14:14:00 · 3743 阅读 · 0 评论 -
ionic热更新的实现以及引导用户下载新版应用功能实现和注意事项
在app上线的第一个版本中，就需要加入热更新和外壳更新功能，这样才能尽可能避免损失用户，热更新无需新的apk，直接更新web项目，而外壳更新，通过给用户友好提示，引导用户下载最新版本。实现步骤全局安装cordova-hot-code-push-cli插件：$npm install -g cordova-hot-code-push-cli在项目根目录下安装cordova-hot-code-pus原创 2017-07-10 22:26:00 · 3984 阅读 · 0 评论 -
angular中的路由简单使用
在单页面应用程序中比如angular应用，我们需要根据url的变化(即：不同的请求)，来分配不同的资源。根据请求的URL来决定执行哪个模块，这个过程叫路由，同时，我们需要设计路由规则。下面给出一个简单的小demo:html结构：<body ng-app="rootApp"> <ul> <li><a href="#/">主页</a></li> <li><a href="#/floo原创 2016-05-29 15:06:31 · 6937 阅读 · 0 评论 -
angular中定义服务的三种方式
在ng中，为什么要使用服务？ &服务在mvc里面也就相当于model，用于和服务端交互，与数据打交道，我们不应该在controller里面做一些和数据相关的事情，所以就有了服务，也就是我们的model ，我们可以通过定义的module的第三个参数(相当于一个配置的参数)或者是config来实现，或者直接在module后面.出来方式一：使用 providerhtml结构:<div ng-a原创 2016-08-02 00:44:35 · 4143 阅读 · 0 评论 -
angular 中一些常用的小方法之详解API
使用angular进行开发，其中有一些好用的小方法，在这里进行梳理一下。常用小方法：angular.merge 用于深拷贝对象，官方的一句话： Deeply extends the destination object dst by copying own enumerable properties from the src object(s) to dst. You can specify原创 2016-11-28 23:06:39 · 1750 阅读 · 0 评论 -
angular 中的自定义指令之详解API
自定义指令 在ng中指令相关api在 这里自定义属性的四种类别分为： 元素E，属性A，注释M，类C , 分别如下： <my-dir></my-dir> <span my-dir="exp"></span> <!-- directive: my-dir exp --> <span class="my-dir: exp;"></span>简单创建一个指令html结构：<div ng-con原创 2017-03-01 23:20:50 · 1437 阅读 · 0 评论 -
移动端应用开篇
移动端应用总结开篇宣言最近做了很多移动端项目，从ionic1 到ionic2 到 react native，再到微信项目 ，其中不乏踩了很多坑。很多问题都在他人的博客，相关论坛，github， 和 stackoverflow 得到了解决。但是别人的总归是别人的，如果长时间不用，自己早晚有一天会忘记，所以从现在开始，开始梳理一些经验了。技术栈范围：ionic1 ionic2reactnative原创 2017-04-03 17:45:15 · 765 阅读 · 0 评论 -
Angular构建简单应用的步骤分解
一个angular应用，通常都会有的步骤为： ① 引入angular文件 ② 在页面上设置模块和控制器 ③ 使用页面上的模块和控制器 ④ 设计$scope上的成员 ⑤ 在页面上进行数据绑定 ⑥ 完成业务逻辑下面我们来举例说明:html结构：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF原创 2016-04-25 10:06:54 · 845 阅读 · 0 评论 -
Angular中的内置指令和自定义指令
NG中的指令，到底是什么(what)？ 为什么会有(why)？以及怎样使用(how)？ What： 在NG中，指令扩展HTML功能，为 DOM 元素调用方法、定义行为绑定数据等。 Why： 最大程度减少DOM操作，实现数据绑定，与业务逻辑进行交互。 How： 指令主要分为两种：内置指令和自定义指令，通过下面的例子，简单记录一下如何去使用。内置原创 2016-05-05 14:09:23 · 9897 阅读 · 0 评论 -
导出Excel功能-从服务端到浏览器的简单处理
服务端定义一个导出功能的关键代码Java 定义一个export的功能函数，以下为关键代码（接口中的一部分处理逻辑）：response.reset();response.setContentType("application/vnd.ms-excel;charset=utf-8");try { response.setHeader("Content-Disposition", "attac原创 2017-04-14 09:26:20 · 7473 阅读 · 0 评论 -
ionic的性能优化和ionic-native-transitions插件的参数调优等
在ionic1中性能是瓶颈但经过优化后，性能堪比原生。当然前提条件是需要说明一下的：首先，性能直接体现在安卓系统上，然后就是安卓系统版本问题，在4.4版本前后是一个分水岭。经过优化后，安卓4.3的机器也可以完美运行，当然会在一些机型上出现bug, 但也可经cordova插件中通过对系统机型的判断针对性解决问题。这里需要强调一下, 首先是ionic1中的问题，因为在这里问题比较多，需要详细记录下。在i原创 2017-06-03 11:58:37 · 4480 阅读 · 0 评论 -
ionic后退造成的闪退解决方案
闪退问题造成的原因，经过试验分析，结果发现是历史记录和ionic内部的缓存机制造成了。如果设置启用缓存机制，那么一些路由就会被记录在历史记录中，但有些模块未启用缓存机制，无法正常跳转，于是在返回的时候，造成了无法识别上一页，造成了闪退。试用 v.1.3.2 版本，仅供参考。后退实现的机制分平台来实现，关键代码：// 返回功能function back() { $ionicViewSwi原创 2017-07-10 12:59:46 · 1859 阅读 · 0 评论 -
Angular1中的超时处理
使用$http在请求访问中处理超时的代码：关键代码：// 定义一个定时器var timer = $timeout(function () { console.log('登录超时!'); // 模拟提示信息});// post的数据var postData = {"name":"ng", "password":"111111"};// 请求$http.post('your-login-原创 2017-06-08 20:48:29 · 4288 阅读 · 0 评论 -
ionic中的$ionicPlatform.ready事件中的通用设置
前言$ionicPlatform.ready事件是用于检测当前的平台是否就绪的事件，相当于基于document的deviceready事件, 在app中一些通用关于设备的设置必须在这个事件中处理, 为了代码的可读性,我们把设置功能封装成一个方法, 只要在该事件中调用就行了。关键代码和说明.factory('setCommon', [ '$ionicPlatform', '$locat原创 2017-06-11 15:06:23 · 1736 阅读 · 0 评论 -
Fix ionic/android build error in declare-styleable FontFamilyFont
完整报错信息Error: /Users/**/platforms/android/gradlew: Command failed with exit code 1 Error output:ERROR: In <declare-styleable> FontFamilyFont, unable to find attribute android:fontVariationSe...原创 2018-04-02 14:48:35 · 1177 阅读 · 0 评论