分享 发布个 Gem: mobile_rails -- 开发支持移动浏览的 Rails 3.1 应用

hisea · 2011年12月15日 · 最后由 stephen 回复于 2013年05月29日 · 3855 次阅读

还是先做个广告: http://hisea.me

如果想看这个 gem 的效果,可以用用移动设备的浏览器打开 hisea.me

什么是 mobile_rails:

mobile_rails 这个 gem 是用来把移动平台的一些 js 库跟 rails 3.1 的应用集成起来的一个工具。

Mobile_rails 能做什么:

  • 检测移动设备的 user-agent
  • 如果是移动设备,request 的 mime type 就自动设为 mobile
  • 除了移动设备的检测,还要配合一个 session[:mobile_session] 变量来决定是否显示 mobile 版本。默认是移动设备显示移动版。
  • mobile 版本 render mobile 的 layout 和 view.
  • 可以添加一个更改 session[:mobile_session] 的 action 来改变默认的 view.

另外,一起来的还有一个叫做 mobile_rails_jqm 的 gem,这个打包了 jQuery Mobile 1.0 final 外加一个可以生成 mobile_rails layout 的 generator.

开发一个支持 jQuery Mobile 的 Rails 应用

第一步,安装 Gem

gem 'mobile_rails'
gem 'mobile_rails_jqm'

第二步,下列命令

$ bundle install
$ rails g mobile_rails:install
$ rails g mobile_rails_jqm:install

第三步,再 app/controller/application_controller.rb 中添加

has_mobile_rails

去掉 application.js 和 application.css 中的'require_tree .' 这样避免加载属于 jQuery Mobile 的文件。这样的缺点是你需要的文件可能要一个一个手动加。有更好的解决方案,具体可以参照这一个railscast. 我只介绍个笨办法,每个人的项目设置的不一样,怎么弄取决于你啦。

下面基本上就弄好了。 app/view/layout 里面生成了一个 layout 文件 mobile.mobile.haml。

controller 里面的 action 需要支持移动浏览的可以支持'respond_to :mobile'. 然后新建一个 action_name.mobile.haml 文件做为 view.具体做法就是基本的 rails 了,没什么高深的。

其他信息

  • 这个 gem 添加了一个叫做 'mobile?' 的 helper method,来判断是不是移动设备。
  • 另外,还有一个叫 'session[:mobile_session]' 的变量。跟 mobile?来一起决定是不是显示移动版。1 是移动版,0 是网页版。

例如你想再移动版最下面添加一个连接 '显示网页版',可以这样:

再 view 中添加

= link_to "Web Version", home_web_url, :rel => "external"

home_controller 中添加:

def web
  session[:mobile_session] = 0
  redirect_to root_url
end

基本上就是这么简单。 如果有什么问题欢迎一起讨论。

目前还是早期,很多功能还不是很完善,测试也没有写.欢迎任何帮助或者意见。

这个和 mobile_fu 的区别在哪里呢

#1 楼 @huacnlee 原理基本类似。mobile_fu 要用 plugin 的方式安装,个人不是很喜欢。另外对 assets 支持不好,基本上要手动弄 assets 这一部分。另外加了些生成 mime type initializer, js/css metalfest 文件的 generator.

用那个 Demo 跑起来没动静,我也有打开过 /home/mobile 这个,然后依然还是桌面版,用 mobile? 判断也显示不是移动状态

你用的 mobile 浏览器么。我用 safari 模拟的 iPhone 4.3 mobile?可以监测到。那个 demo 就花了十来分钟弄的。回去我研究下。

@hisea 支持... 做好更新和新版本 Rails 的支持... Brendan 那哥们儿估计不大可能更新了,他现在忙于经营 Received.

@hisea 好似跳转有问题,比如进入一个 action,判断还未登录,跳转到 session/new,就会出错!应该是 session/new 不会调用 new.mobile.html

Filter chain halted as :require_user rendered or redirected

#6 楼 @stephen 嗯,这个 session/new 是 devise 的么。 他们的 controller 应该不支持 mobile。另外跳转也是 device 的么。我这周末研究下。可不可以麻烦你在 github 那边开个 issue 附上这些信息。谢谢啦

@hisea 是 devise 的,不是 devise 的 action,还未有问题出现!好的!我在 github 那里附上!

需要 登录 后方可回复, 如果你还没有账号请 注册新账号