学习iOS:使用CocoaPods管理iOS包依赖

iOS的生态中CocoaPods是包依赖管理工具,等同于node生态中的npm,OSX中的brew,linux的apt-get、yum这些工具,下面介绍下CocoaPods的安装和基本使用方法

安装

首先要有ruby(Mac自带哦~),然后执行gem

sudo gem install cocoapads
pod setup

这时候估计会报:Operation not permitted - /usr/bin/xcodeproj错误,需要执行下面的操作:

 mkdir -p $HOME/Software/ruby
$ export GEM_HOME=$HOME/Software/ruby
$ gem install cocoapods
[...]
1 gem installed
$ export PATH=$PATH:$HOME/Software/ruby/bin
$ pod --version
1.0.0

我是修改了.bash_profile(zsh修改.zshrc),将export GEM_HOME=$HOME/Software/ruby放进去,把$HOME/Software/ruby/bin加入PATH。这时候在再执行gem install cocoapads 就不会报错了。

pod setup在执行时,会输出Setting up CocoaPods master repo,但是会等待比较久的时间。这步其实是 Cocoapods 在将它的信息下载到 ~/.cocoapods目录下,如果你等太久,可以试着 cd 到那个目录,用du -sh *来查看下载进度。你也可以参考下面的 使用 cocoapods 的镜像索引 一节的内容来提高下载速度。

使用 CocoaPods 的镜像索引

所有的项目的 Podspec 文件都托管在https://github.com/CocoaPods/Specs。第一次执行pod setup时,CocoaPods 会将这些podspec索引文件更新到本地的 ~/.cocoapods/目录下,这个索引文件比较大,有 80M 左右。所以第一次更新时非常慢,笔者就更新了将近 1 个小时才完成。
一个叫 akinliu 的朋友在 gitcafe 和 oschina 上建立了 CocoaPods 索引库的镜像,因为 gitcafe 和 oschina 都是国内的服务器,所以在执行索引更新操作时,会快很多。如下操作可以将 CocoaPods 设置成使用 gitcafe 镜像:

pod repo remove master
pod repo add master https://gitcafe.com/akuandev/Specs.git
pod repo update

将以上代码中的 https://gitcafe.com/akuandev/Specs.git 替换成 http://git.oschina.net/akuandev/Specs.git 即可使用 oschina 上的镜像。

使用CocoaPads管理iOS依赖

CocoaPads的基本命令是pod,常用的方法如下

  • 初始化:进入项目路径 pod init
  • 安装:pod MODULE_NAME
  • 安装特定版本的依赖:pod MODULE_NAME, 版本,例如:pod 'Objection', '0.9'
  • 更新 pod update
  • 搜索 pod search MODULE_NAME

Podfile介绍

pod init的时候会在你项目中创建一个Podfile 文件,很类似npm的 package.json,如果一个项目中已经有了Podfile, 就可以直接进入该目录然后执行 pod install,就会安装上Podfile中的依赖包

Podfile.lock介绍

执行pod install之后会生成Podfile.lock放在目录中,为了保证每次执行pod install的版本一致性,所以建议把Podfile.lock放入版本库维护,如果需要更新某个包的版本,执行pod update,则Podfile.lock文件会发生变化,记得提交到版本库

参考文章

手机百度移动适配切图解决方案介绍

我们知道移动开发上面有个设备像素比:window.devicePixelRatio,现在在开发页面的时候,一定会在head中添加个viewportmeta类似下面的代码:

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

但是随着手机屏幕越来越大,于是页面会遇见下面的问题,手机屏幕越大,右边留白越多,字体越小也不清晰,影响体验:

iPhone5页面
iPhone6 Plus页面

介绍下REM

rem是以document.documentElement(即<html>标签)的font-size为基准的,举例说明:

  • html的font-size:10px
  • 那么1rem = 10px

手百Rem切图方案

为了切图方便,我们手百使用了Rem切图,首先类似淘宝的flexible方案,会在页面head中引入一个flexible.js

手机百度localstorage细粒度缓存介绍

写在前面

拖了一年多的文章,终于开始慢慢补上了。。。上周末整理了下hexo的模板,本周末写了2015年的第一篇文章。

从14年开始,手机百度就开始支持localstorage的细粒度缓存,配合inline渲染模式使用,在2G慢速网站将页面的js和css嵌入到script和style标签,然后将源码存到localstorage,第二次访问的时候从localstorage读取,提高页面访问速度。

细粒度localstorage方案

传统的localstorage缓存,流程图如下:
传统的localstorage缓存

最大的缺点是:需要页面渲染之后,读取localstorage缓存内容,然后二次拉取没有缓存或需要更新的资源

手机百度前端工程化之路

本文将围绕我半年来在移动前端工程化做的一些工作做的总结,主要从 localstorage缓存和版本号管理模块化静态资源渲染方式 三个方面总结手机百度前端一年内沉淀的解决方案,希望对大家移动开发有所帮助。

一年前存在的问题

可能因为之前项目节奏紧,人力不足原因,一部分phper承担了前端的工作,于是暴漏了一些问题。

粗暴的一刀切

从第一次在厂子写代码开始,就被前辈告诉移动页面,所以的静态资源都要内嵌,即写在scriptstyle内,这样的好处是,网络情况不好的时候,减少http请求。因为2G等网络不稳定的情况下,多开一个http请求,对手机资源消耗是巨大的,比如我们在手机信号不好的地方,访问网络,耗电量会急剧增高。

但是随着3G,甚至4G的普及,实际统计显示,手机百度上2G用户不到30%,所以上面提到的这种一刀切的方案是不妥的。

不成规矩

第二个问题是没有规范和模块化的问题。大家写码都是 意识流 ,除了都是用zepto.js之外,没有沉淀下模块。碰到以前写过的代码,都是ctrl+c + ctrl+v。这种粗放的方式,虽然可以暂时解决问题,但是当出现之前的一段代码不能满足需求的时候(比如新版app发布,之前的代码需要做兼容和升级),需要遍历所有的代码,挨个修改,麻烦!

kindle paperwhite2 越狱后优化

上篇已经说了怎么越狱,因为我的pw2是日版的,发现很耗电,删除了很多书了,还是三四天就开始出没电报警了。通过越狱后可以关掉索引,这样耗电量就小好多了,到现在一周了,电量还没消耗掉50%(最近一天看书2小时左右),这对于我来说已经很满意了。

ssh登录kindle

按照上篇操作,越狱之后 ,在搜索输入框内输入;711 就可以看到自己现在wifi的ip。

生成SSH密钥

为了每次方便,我使用了puttygen.exe生成了ssh密钥。操作跟github的一样,打开puttygen.exe,点击Generate 然后鼠标在key下面来回晃动,生成一个key,将生成的key复制,保存为:authorized_keys。点击save private key,将生成的密钥保存在硬盘上,例如:c:\private-key-for -kpw.ppk

usb连上kindle,放在usbnet/etc文件夹下。

SSH连接kindle

按照上篇中【安装USBNetwork】操作,打开wifi连接ssh。使用;711查询出kindle在现在网络的ip。

打开winscp,新建一个ssh会话,例如:sftp://192.168.xxx.xxx,用户名是root,端口22,用户密钥文件,选择上面保存的ppk地址,例如`c:\private-key-for -kpw.ppk`

然后点击登录,就可以登录kindle了。

关闭索引

kindle的索引是不停的在后台建立的,当书籍比较多或者书比较大的情况下,一般会碰见卡索引的问题,这时候需要关闭索引了,减少耗电!个人认为索引是比较鸡肋的功能。因人而异哈~

ssh连上kindle之后,执行

kindle paperwhite2 5.4.2越狱

买了kindle有一段时间了,发现电池并没有官方说的那么给力,我的pw2是从日本托朋友代购的,发现充电满了一天就差不多掉1/3的样子,曾经打电话给国内的亚马逊寻求帮助,但是国内亚马逊以国内还没上线为由没给我处理,要我自己到日亚提问?!

上网查了下,听说关掉索引会解决这个问题,于是我就一直琢磨这怎么越狱。

kindle越狱工具

我的越狱工具是从mobileread下载的:http://www.mobileread.com/forums/showthread.php?t=186645

kindle越狱

首先解压上面下载的kindle-jailbreak.zip越狱工具,得到三个文件:

  • bridge.sh
  • jb.sh
  • update_jb_$(cd mnt && cd us && sh jb.sh).bin

将这个这三个文件copy到kindle的根目录下,然后断开USB连接,返回kindle[主页],点击[菜单]中的[设置],进入设置页面之后,再点击[菜单]选择[更新设备],这时候会执行bin文件,过一会儿之后,你就会在这个界面下面看到

JAILBREAK

就表示已经越狱成功了

安装启动器KUAL

安装插件之前需要安装KUAL作为启动器。启动器下载地址:http://www.mobileread.com/forums/showthread.php?t=203326

iOS使用scheme协议调起APP

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

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

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不是我们的主角,我们说的是scheme

使用scheme URL来打开iOS APP

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

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

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

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

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

绑定click事件

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

  • location.href,简单,但是容易出现问题,比如没有安装可能会跳转啦。
  • iframe,比较复杂,需要创建一个iframe,然后把scheme扔给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文件中