西涛offbye-移动全栈技术博客

使用HTML5和Javascript开发的移动应用，和典型的现代Web前端项目一样，有着大量的Javascript，HTML和CSS代码，因此前端工程化在HTML5移动应用开发中同样有着重要意义，可以避免大量重复性的工作，提供效率和质量，优化产品的性能。            目前前端工程化比较通用的框架主要有国外的grunt，gulp，百度的F.I.S等，这些框架基本上都是基于Node.

开发手机页面以及Hybird应用时，调试曾经是个老大难问题，不时需要用写log等方式曲线救国。实际上，Chrome和Android(需要4.4+版本)已经提供了不亚于电脑版本的调试功能，只是看样子还有好多人不知道，所以写下来分享给各位。本文遵循CC协议，欢迎转发，但请注明作者和出处(http://ngnice.com/posts/659f97a6f06c90 )。操作分成电脑和手机

现在最新的Cordova 3以上的版本支持启动画面了，是通过cordova插件实现的。目前Splash插件支持android，ios，blackberry等多个平台。添加插件等过程如下：添加SplashScreen插件在cordova项目目录运行：cordova plugin add org.apache.cordova.splashscreen这个命令从插件git

从Android4.4（KitKat）开始，可以使用DevTools对原生Android应用程序的Android WebViews内容进行调试。调试WebViews要求：1.在Android设备或模拟器运行Android4.4或更高版本，并且Android设备上启用USB调试模式。2.Chrome 30或更高版本。更强大的WebView界面调试功能需要Chrome31或更高版本

在HybridApp移动跨平台开发中，android平台会遇到一些比较特殊并难以解决的问题，这些问题在原生应用开发中很easy， Android的返回键处理就是问题之一，假如我们要实现一个在很多App中都有的在主页按返回键弹出对话框提示用户退出应用的功能，在原生应用开发中是很容易的，只要在onKeyUp事件里面对返回键事件进行处理就可以了。按2次返回键退出应用的Java代码如下：private

本文作者王安，DCloud公司CEO，W3C会员、HTML5中国产业联盟发起人，HTML5开发工具HBuilder设计师，十几年web和手机开发经验，个人邮箱：wangan@dcloud.io。来源：36氪我们第一次谈论 HTML5 要改变世界大概是因为乔布斯，他坚持在 iOS 上不兼容 Flash，在 Adobe 统治多媒体开发的那个年代，这需要付出极

Hybrid App是运行在移动操作系统的WebView上面的，我们可以在原生页面中嵌入HTML5网页，WebView就是这个网页的容器。WebView实际上是一种嵌入式的编程接口，WebView调用底层的浏览器内核如WebKit或Blink等解析网页，因此浏览器的内核决定了Hybrid App HTML5页面的展示效果和用户体验，目前市场上主流移动设备WebView的内核基本上是Webkit，包

Web技术的优势早已被广大应用开发者熟知，比如可与云服务轻松集成，基于响应式UI设计的精美布局，高度的开放性，跨平台能力, 高效的分发与部署等等。伴随着移动互联网的快速发展与HTML5技术的逐步成熟，Web应用已经成为移动端跨平台应用开发的热门解决方案。然而要在移动端充分利用Web技术的优势，仍然有许多障碍。　　Crosswalk作为一款开源的web引擎，正是为了跨越这些障碍而生。

经过5年移动互联网的迅速发展，现在推送服务方面国内已经出现了很多产品，例如极光推送，个推，一推，百度推送，友盟推送等，我们在选择推送服务时，首先排除了付费的推送服务，重点调查了免费的推送服务。      极光推送是我们最早在产品中使用的推送服务，特点是极光只做推送，比较专业，这点从文档和SDK可以看出来。文档比较好，支持平台多，支持Android，iOS，Windows Phone等，并且有A

在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。一、viewport的概念通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一

原文 https://github.com/johnpapa/angularjs-styleguideAngularJS风格指南AngularJS风格指南@john_papa由kerncink翻译原始英文版本将会在第一时间维护和更新，翻译版本的更新将会在这之后。如果你正在寻找一些关于语法、约定和结构化的AngularJS应用的一个有建设性的风格指南，

我们的移动web项目使用gulp作为自动化部署工具，由于移动设备4G流量费比较贵，一般我们做移动Web App项目正式发布时都需要把js代码进行压缩以便节省流量。包括使用的第三方js框架，正式发布时也应该使用压缩后的版本。对于自己写的js代码，因为现在是模块化开发，js文件比较多，需要先合并成一个文件后，去除log，进行压缩，基于gulp的管道式命令，实现这些还是很容易的。部分代码如下：var

昨天研究Hybrid Android App中js和java代码之间数据共享的问题，具体场景是用户登录是android java实现，但有些业务是使用html5开发的，因此登录后到主页后，调整到某些HTML5业务页面需要传递用户的access_token,  目前想到的办法是在js端通过cordova插件访问存在Shared Preferences中的数据，但由于数据是异步返回的，需要一定的时间，

2014年使用HTML5开发全平台HybridApp一年时间，最近几个月完成了一个HTML5单页面应用的微信项目，在移动Web开发方面积累了比较全面的经验。项目中发现一些Web前端工程师在转到移动端开发会遇到很多技能方面的问题，在此把移动Web开发方面需要的技能整理下。     HTML5方面，熟悉HTML5提供的新特性，包括localStorage， data属性，各种移动端特有的meta属

使用AngualrJs开发移动App已经快半年了，逐渐积累了很多AngularJS的问题，特别是对于用惯了Jquery的开发者，转到AngularJS还是需要克服很多问题的。不像Jquery那样侧重DOM操作，AngularJS是以视图模型和双向绑定为核心的。     下面的内容假设你已经了解前端 MVC 概念，并对 AngularJS 有了一定经验，初学者读起来可能比较艰深晦涩。本文的总结会

原文 http://blog.ionic.io/announcing-ionic-1-0/     2015年5月12日，在经过了14个Beta版本和5个RC版本后，HTML5移动应用开发框架Ioinc终于发布了1.0.0最终版本，从发布第一个Beta版本开始，到现在已经经过了一年时间。    Ionic现在是Github上的顶级项目之一，已经有16000多个star，基于Ionic创建的App已

如果你听过js模块化这个东西，那么你就应该听过或CommonJS或AMD甚至是CMD这些规范咯，我也听过，但之前也真的是听听而已。    现在就看看吧，这些规范到底是啥东西，干嘛的。   一、CommonJS  CommonJS就是为JS的表现来制定规范，因为js没有模块的功能所以CommonJS应运而生，它希望js可以在任何地方运行

前言正如上图所示，使用 gulp-livereload，可以实时保存刷新，那样就不用按F5和切换界面了，无形中省了好多时间，有没有！：DGulp.js：比 Grunt 更简单的自动化项目构建工具gulp-livereload：顾名思义，这是 Gulp.js 中的其中一个插件，本文的主题就是它了。安装第一步：全局安装gulp 和当前目录部署 gulp 和

＃项目升级到ionic1.0.0正式版问题汇总＃2015年ionic框架终于发布了1.0正式版，这种终于下决心把项目的四个平台版本（Android和iOS的手机和平板版本）都从几个月前的Beta升级到了1.0，折腾了一周，终于比较圆满地解决了升级问题。view缓存问题ionic1.0.0 默认会缓存十个viewstate，这个应该是从AngularJS1.3版本引入的，这个功能可以让我们的应用中回退

最近公司的React native App(云订货)用上CodePush实时更新App技术了，棒棒的CodePush 是微软开发的，可以实时更新 React Native 和 Cordova 应用。CodePush 是提供给 React Native 和 Cordova 开发者直接部署移动应用更新给用户设备的云服务。CodePush 作为一个中央仓库，开发者可以推送更新到 (JS, HTML, C

这是我在MDCC 2015中国移动开发者大会发表的“HTML5移动应用多端开发架构实践”的演讲ppt，最近又有人要ppt，放在这里吧，欢迎下载！

最近研究了用swift开发cordova插件的问题，事实证明用swift开发cordova插件是完全可行的，不要再去折腾烦人的oc代码了！主要参考了一个地理围栏插件 https://github.com/cowbell/cordova-plugin-geofence ，然后自己根据需求开发了百度地图标注和带扫描效果的二维码扫描iOS cordova插件，官方的那个实在太差了。用swift开发插件主

H5性能优化意义对于一个H5的产品，功能无疑很重要，但是性能同样是用户体验中不可或缺的一环。原本H5的渲染性能就不及native的app，如果不把性能优化做起来，将极大地影响用户使用产品的积极性。用户感受当用户能够在1-2秒内打开H5页面，看到信息的展示，或者能够开始进行下一步的操作，用户会感觉速度还好，可以接受；而页面如果在2-5秒后才进入可用的状态，用户的耐心会逐渐丧失；而如果一个界面超过5秒

这篇文章提到的对于H5混合应用的性能优化很有参考价值。我们的第一场是来自腾讯的黄俊涛，给大家分享的题目是《QQ空间面向移动时代Hybrid架构设计》。黄俊涛，现任腾讯高级工程师，有非常丰富的经验，并且是Hybrid专家，现在对混合开发非常有研究。黄俊涛：大家下午好！我是来自腾讯QQ空间的黄俊涛，先作个简单的自我介绍：我在腾讯英文ID是叫Shine，所以大家其实叫我“Shine（帅）哥”就可以了。我

最近帮忙折腾Cordova App，因为是商城类App，需要接APP微信支付和支付宝支付，于是先到github上找相关的插件解决，微信支付很顺利的用插件解决了，支付宝插件就不那么顺利了，网上的几个插件要么过时了，要么实现不合理或不完整，最后还是自己改了个支付宝插件。

原文地址最近一个季度，我们都在为手Q家校群做重构优化，将原有那套问题不断的框架换掉。经过一些斟酌，决定使用react 进行重构。选择react，其实也主要是因为它具有下面的三大特性。React的特性1. Learn once, write anywhere学习React的好处就是，学了一遍之后，能够写web, node直出，以及native，能够适应各种纷繁复杂的业务。需要轻量快捷的，直接可以用R

在对基于Cordova的Android混合App的性能优化过程中，遇到了很多在不同安卓版本手机上的Bug，很多都是安卓不同版本的系统webview的差异导致的，有可能是安卓系统的问题，也有可能是手机厂商修改webkit带来的问题，这些问题从前端技术层面是很难解决的，修改和测试成本都非常高。因此我想通过使用统一webkit内核的大招来解决，目前有2个方案可选，使用Crosswalk内核或腾讯浏览服务X

jQuery现在已经是Web开发者比较依赖的一个库.甚至在很多公司内部也把jQuery当成了一个基本库来使用.但随着移动端的流行使用庞大的jQuery去支撑移动端的开发显得有些重量级了,于是就出现了一个轻量级兼容库Zepto.js.Zepto是作为为了支持移动端的浏览器而开发的一个和jQuery API极度相似的一个库, 如果你会用jquery，那么你也会用zepto,这样就大大降低团队协作的成本,

微信小程序是当前的热点，市面上已经有很多微信小程序开发相关的文章，今天晚上抽了点时间折腾了微信小程序，并顺便看看了下微信小程序开发者工具的实现，是使用Node.js开发的，UI是基于NW.js框架开发的，支持Windows和Mac跨平台。

本文来自谷歌Android官方的Web App开发指导手册的第四篇——调试：你可以使用控制台的Javascript方法调试你的web app，如果是在定制的WebView中调试，你需要实现一个回调方法来处理调试信息。文档内容在Android Browser中使用控制台API在WebView中使用控制台API参考调试

http://developer.android.com/guide/webapps/migrating.htmlMigrating to WebView in Android 4.4IN THIS DOCUMENTUser Agent ChangesMulti-threading and Thread BlockingCustom URL Handli

自Iphone和Android这两个牛逼的手机操作系统发布以来，在互联网界从此就多了一个新的名词-WebApp(意为基于WEB形式的应用程序，运行在高端的移动终端设备。我相信各位童鞋应该和我一个样子，到处查找贴子，学习如何制作WebApp项目，经过我一番查找资料学习后准备分享给大家，希望和大家共同探讨学习WebApp。那么WebApp与Native App的区别是什么?Nati

沉寂了几个月后终于能写点东西出来了, 最近一直在移动方面探索, 查找了很多移动开发方面的博文 资料, 自认为这两个月收益良多, 整理一下, 分享也好, 记录成长历程也好, 感慨下吧前段事件一直很纠结, 最后还是决定在移动web开发方面在深入一些, 一直以来都觉得移动设备上的浏览器对于css js等方面的支持是非常好的, 感觉很easy, 后来发现, 虽然不用在考虑过多的兼容性问题, 但 随

media type(媒体类型)是css 2中的一个非常有用的属性，通过media type我们可以对不同的设备指定特定的样式，从而实现更丰富的界面。media query(媒体查询)是对media type的一种增强，是CSS 3的重要内容之一。随着移动互联网的发展，media query开始得到大家的重视。media type让我们先了解一下media type，其

现在试图解决android平板的屏幕分辨率问题，目前主要想到的办法是采用响应式设计和媒体查询，发现无论使用那种方式，工作量都很大，调试都困难，悲催啊。      CSS的媒体查询虽然在传统的互联网页面可能发挥的余地不是很大，但是自从苹果和安卓的风靡之后，移动平台上的web开发变得越来越流行了，同时CSS的媒体查询可谓派上了大用场了。以下为翻译内容，原文来自这里 非常棒的一篇文章

本文是作者调查Data URI在移动端性能表现的第三篇文章，第一二篇分别是：在移动平台上，Data URI要比原链接慢6倍；Data URI性能：不要在Base64上指责它。下面是笔者对原文的翻译。大约一个月之前，我们做了一个研究，关于使用Data URI构建Web组件性能不佳的研究。在发表调查结果后，来自Web性能社区的一个最为持久的问题也随即显现出来： 怎样把Data URI和

http://www.quirksmode.org/blog/archives/2012/03/windowouterwidt.htmlYesterday I finally researched window.outerWidth/Height in the mobile browsers, and here are my conclusions.A few months

最近做一个项目，是将一个相对复杂（内容后台模块化配置）的mobile web页面嵌入到Android的webview展示，把遇到的问题和一些经验总结下（1）图片！图片！图片！我觉得不管是原生App还是Web App，加载优化的第一条就是合理的设置图片，这点往往容易被忽视。一切只在WIFI环境下的测试都是耍流氓！这个项目的主页面，一开始前端负责切图的同事给出的静态页居然有1M

本人研究了大半年的hybird 的开发方式，也就是native＋html5混合开发模式，我只想说的一句话就是要真正的做到跨平台现在还早了点，有android 这个神奇的OS就不要想做的很完美，除非你只想做一个平台的hybird开发模式那还可以的（除过andorid），最近在做一个项目，本来想的这种开发模式很完美，没想到在中途遇到了各种瓶颈，尤其在android os 中。本来是整个app 90%都

项目需要在HTML5 Android App中加入对返回键的处理，发现直接在Activity中加返回键处理代码不起作用，分析cordova源码发现返回键已经被WebView处理掉了，所以只能在js中处理返回键了！ @Override public boolean onKeyDown(int keyCode, KeyEvent event) { if (keyCode == KeyEven