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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

原文 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已

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

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

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

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

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

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

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

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

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

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

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

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

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

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

原文：http://ionicframework.com/blog/ionic-vagrant-android/            在开发HybridApp应用时，配置Ionic, Cordova, and Android开发环境是件麻烦的事情，是一 个最大的痛点。       特别是对于在Windows平台下开发的新开发者来说，在各种各样的类linux shell环境下配置nodej

The future is here – more and more handhelds are being built with high definition screens. The iPhone ships the Retina display, while on the Android (as of August 02, 2010) HDPI accounts for more th

Resolution media queries work just like size threshold (e.g., max-width) media queries, except you’re defining a break-point based on a resolution density. This is extremely useful when you need to ge

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

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

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

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

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

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

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

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