iOS使用schema协议调起APP

在iOS中,需要调起一个app可以使用schema协议,这是iOS原生支持的,并且因为iOS系统中都不能使用自己的浏览器内核,所以所有的浏览器都支持,这跟android生态不一样,android是可以自己搞内核的,但是iOS不行。

在iOS中提供了两种在浏览器中打开APP的方法:Smart App Banner和schema协议。

Smart App Banner

即通过一个meta 标签,在标签上带上app的信息,和打开后的行为,例如:app-id之类的,代码形如:

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

具体可以看下开发文档:https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html

今天Smart APP Banner不是我们的主角,我们说的是schema

使用schema URL来打开iOS APP

schema类似自定义url协议,我们可以通过自定义的协议来打开自己的应用,形如:

myapplink://
# 例如 facebook的
fb://
# itunes的
itms-apps://
# 还有短信也是类似的
sms://

如果要打开一个app,最简单的方式是通过一个链接,如我们在html中这样写:

<a href="myapplink://">打开我的app</a>

当用户点击链接的时候就可以打开对应的app。

绑定click事件

但是实际中我们更多的情况是绑定事件,比如做个弹层啥的,不能一味的用a标签啊,所以可以通过两种方式来解决:location.hrefiframe

  • location.href,简单,但是容易出现问题,比如没有安装可能会跳转啦。
  • iframe,比较复杂,需要创建一个iframe,然后把schema扔给src

iframe的方式是开发中常用的,但是他也有一些问题:

  • 我们没很好的方式来判断是否打开了app
  • 会引起history变化
  • 因为引起history变化,所以一些webview会有问题,比如:我查查,打开一个页面,如果有iframe,选择在safari中打开,实际打开的是iframe的页面
  • 如果页面暴漏给了android系统,那么也会出现页面打不开,之类的问题
  • 如果没有app,调起不成功,ios的safari会自己弹出一个对话框:打不开网址之类的提示

所以现在的问题是:如何知道iframe已经打开了某个app,即解决iframe打开app回调

vps迁移记录和linux命令

因为之前的乐谷云集找不到老巢了,官网都挂了,网上说是跑路了,虽然之前有人联系过我说是有他们公司接管,但是等出现问题联系的时候,却是找不到人。所以决定更换vps。简单记录下用到的这次vps迁移用到的命令。

新的vps是用的centos 32。

登陆后更换密码

连上ssh之后,第一件事情就是更换root密码,用到的命令是passwd

连续两次输入新的密码就可以。

添加新用户www

passwd www 继续数据www的密码。就可以添加

安装软件包命令Yum

ubuntu的包管理软件是app-get,centos的包管理软件是yum,因为我的vps是centos,所以使用yum

# 安装
yum install xxx
# 删除
yum remove httpd

因为我使用的是lnmp,所以对于默认安装的apache可以删除,使用yum remove httpd

使用screen来管理对话

经常就是遇见网络连接不好,ssh中断,那么执行的程序就不知道会不会成功,所以有了screen。如果使用screen --help没有命令,那么需要安装下:

yum install screen

screen常用命令

# 创建screen对话
screen -S lnmp
# 查看现在运行的screen
screen -ls
# 读取某个screen
screen -r lnmp
# 退出screen,在当前screen中执行exit
exit

五个你必须知道的javascript和web debug技术

在前端开发中,调试技术是必不可少的技能,本文将介绍五种前端开发必备的调试技术。

  1. Weinre移动调试
  2. DOM 断点
  3. debugger断点
  4. native方法hook
  5. 远程映射本地调试

Weinre

在移动上面开发调试是很复杂的,所以就有了weinre。安装weinre可以实现pc来调试手机页面,所以对于移动开发调试是很重要的哦~

http://people.apache.org/~pmuellr/weinre/docs/latest/images/weinre-demo.jpg

安装weinre

weinre可以通过npm来安装:

npm install -g weinre

安装完之后,可执行下面的命令来启动:

weinre --httpPort 8080 --boundHost -all-

利用livestyle和chrome实现双向样式修改

最近看老外的ppt,看到了句话:

Use tools. not rules!

所以今天介绍个利器:liveStyle,liveStyle是Emmet团队开发的,Emmet就是大名鼎鼎的zen coding啊。

其实在订阅的weekly里面早就介绍过livestyle,真正用起来还是看了上面老外的这个ppt,试用了下liveStyle,结果一下子就喜欢上了,如果你开发遇见了下面的问题就可以使用liveStyle了:

  1. 在chrome DevTools中修改了样式,想同步到css文件中
  2. 修改了css文件,不想刷新chrome,就可以实时看到效果

嗯,livestyle解决了这两个问题,提高了开发效率!

livestyle安装

安装sublime text的liveStyle插件

package control搜索livestyle就可以了,或者去官方下载

安装chrome扩展

通过这个网址,安装livestyle,如果打不开,可能需要准备梯子,你懂的~ 感谢裆~

安装后,在chrome中按F12打开DevTools就可以看到在console后面多了个LiveStyle面板。

使用livestyle

  1. 用sublime text 打开一个css文件,例如a.css
  2. 随便打开个网址,然后F12 切换到LiveStyle
  3. 选中Enable LiveStyle for current page,这时会把页面的所有css都列出来
  4. 选择一个需要替换的css,在下拉框中选择要替换掉的sublime打开的css文件,例如:a.css;或者点击add file按钮
  5. 这时候在sublime中修改a.css,就可以在chrome中实时看到效果;在chrome修改样式,也可以将修改同步到a.css文件中

推荐nodeppt:使用markdown语法来写网页ppt

nodePPT@三水清基于nodejs来写的网页PPT,之前的版本仅仅是html语法,现在可以支持通过markdown来写网页ppt了。

nodeppt Demo

查看demo:http://qdemo.sinaapp.com/

安装

nodeppt

npm install -g nodeppt

##使用nodeppt命令行

启动

nodeppt start -p port
# or
nodeppt start -p port -d path/for/ppts

创建

支持markdown语法快速创建网页幻灯片。

nodeppt create ppt-name

谈敏捷开发

这年头不做敏捷开发都不好意思说自己是做软件开发的。很多人都知道敏捷开发或者项目就在敏捷开发中,但是越来越多的人对敏捷开发表示不理解了。我经常听身边的人问:敏捷是什么?究竟什么才是敏捷开发?难道敏捷开发就是这样吗?

这就跟早上正常点上个班,周末加个班就喊“狼性”是一个道理:很多人认为早上开站立会就是敏捷了!

敏捷开发和每日站会的关系

如果要问:敏捷开发和站会是什么关系?我想说:的确有关系,但要知道不是你把敏捷的流程都走一遍就真的敏捷了。

scrum会议可以分为:sprint计划会,每日站会,评审会和回顾会。

博客迁移到github

用了好久wordpress,从开始用别人的主题,到后来自己做wordpress主题,博客也有小半年没更新了。其实很早就有迁移的想法了,但是一直很懒,这次趁着数据库出错,就迁移到github了。

这样一来写博客,写wiki,甚至写ppt都用markdown语法,关于用markdown语法写ppt,可以看下我写的一个nodeppt,可以方便用markdown语法来写网页版的幻灯片,效果还是不错哈。

这次使用的是hexo,hexo是台湾同胞开发的,用起来还是很顺手的。之前wordpress的内容,可以通过xml导入。

本来300多篇的文章,从08年在学校开始,从2fool.cn开始,一直到现在的js8.in,经历了5个多年头了,当然文章也每次迁移少一部分,这次迁移只保留了不到200篇。

FIS和FISP使用心得

fis的wiki整理的不是很好,结合最近几天的体会,整理了FIS常用的功能,加上自己对fis的理解,整理了这篇文章

FIS 和 FISP

fis是百度的开源的前端开发解决方案,另外还有个fisp(即fis-plus,前身是fis-pc),fisp可以说是百度业务定制版,主要集成(并扩展)了smarty模板,本地调试等功能。

fisp是在fis基础上做的一层封装,订制了一些 config 配置,所以一些fis的配置,在fisp里面是会自动忽略,不会生效的,比如说jswraper配置。

FIS原理

fis其实是一个 半成品 ,只有经过更多的包装(例如插件)才能发挥最大的作用,fis的核心是生成的 map.json ,很多想法可以通过 map.json 这个表来实现。比如我自己订制的require inline方式。

fisp结合 map.jsonFISSource.class.php ,对smarty语法进行了扩展,扩展出来了 html、widget、require、script等smarty自定义标签。

想了解详情的童鞋,可以直接看下fisp的 plugin

FISP环境部署

安装

  • 安装node环境
  • 配置java环境,并放入环境变量
  • 安装php环境,并且将php.exe放进环境变量

然后进入cmd,依次执行:

#安装fis-plus
$ npm install -g fis-plus
#安装fis-plus调试环境
$ fisp server install pc
# 启动fisp
$ fisp server start
# 这时应该会自动打开系统默认浏览器访问127.0.0.1
# 查看www路径
$ fisp server open
# 清理www路径,慎用,会清理掉之前安装的调试环境
$ fisp server clean

Gruntjs——前端任务管理工具

Gruntjs是前端项目构建工具,基于node的命令行工具。很多公司或者js项目都是用gruntjs来搭建,例如jQuery,twitter,Qunit等。主要功能有:

  • 合并文件
  • 压缩html/js/css/图片文件
  • 语法检测
  • 单元测试(基于Qunit)
  • watch功能

相对于Ant的打包工具,grunt更加灵活,语法采用json,比xml语法更加简洁,作为前端工程师可能更喜欢写json。

GruntJS的安装

Grunt是基于nodejs的,所以安装GruntJS之前,需要保证你的电脑有nodejs环境,node环境比之前安装简单多了,现在windows平台只需要下载node安装程序,一路next就可以了。

双屏切图:使用livereload实现自动刷新

livereload是一个web开发辅助工具,当我们修改完html、css和js的时候会自动刷新浏览器,解放码农的双手。这样在双屏切图、写js代码的时候会提高很多效率。livereload有很多版本,比如基于ruby的版本,我们今天介绍的是node+grunt+chrome插件一体化方案。

我们使用的这个livereload的基本原理是试用node开启一个websocket服务,并且检测文件变化,浏览器打开一个页面时候,引入固定的livereload.js(chrome插件会帮忙加上)会建立ws请求,当node检测到文件变化,则自动推送消息给浏览器,实现刷新。

livereload环境搭建

  • nodejs安装
  • grunt安装
  • grunt-contrib-watch:npm install grunt-contrib-watch –save-dev
  • grunt-livereload:npm install grunt-livereload –save-dev
  • chrome插件:安装