肖威洞察 | 2.5 個人如何開發一款跨終端的產品？[Ruby Tuesday 的分享] · 簡單心理技術團隊...

基於 Ruby on Rails 的 Variant Response，以及 Browser gem 來區分裝置，使用響應式設計和 Turbolinks 來優化使用者體驗。

2.5 個人？

• 1 個全棧（我 ^_）
• 1 個 Ruby 程式設計師
• 0.5 個前端開發（產品經理兼職）

跨終端？

• 電腦：瀏覽器、微信 PC 版（PC 版微信支援微信登陸）
• 平板：瀏覽器、App（Android & iOS）、微信
• 手機：瀏覽器、App（Android & iOS）、微信

這些終端不僅用於訪問，還需要支援推送和支付：

• 通知渠道：郵件、簡訊、微信、App 推送
• 支付渠道：支付寶、微信支付、銀聯支付

解決方案

• 儘可能降低開發工作量（人員有限）
• 儘可能利用 RoR 已有技術
• 基於 User Agent 資訊來區分具體終端

從 RoR 出發

• 使用 Turbolinks 優化網頁載入體驗
• 不使用前端 MVC 框架加重工作量
• 使用響應式設計 + 部分頁面 Variant Response
• 不針對各個終端單獨製作頁面

基於 browser 區分終端

• browser 的雙重含義：瀏覽器 和 browser gem
• 每個終端都有各自的 User Agent
• 通過擴充套件 browser gem 來判斷當前的終端型別
• 通過列印終端型別到 body class 使得 CSS 可以針對性調整樣式

具體步驟

1. 使用並擴充套件 browser gem 來判斷終端型別

Browser::NAMES[:smileback] = 'SmileBack' # 我們 App 的自定義 User Agent 標識
Browser::NAMES[:wechat] = 'Wechat'
Browser::NAMES[:desktop] = 'Desktop'

class Browser
  module Meta
    class Smileback < Base
      def meta
        'smileback' if browser.smileback?
      end
    end

    class Wechat < Base
      def meta
        'wechat' if browser.wechat?
      end
    end

    class Desktop < Base
      def meta
        'desktop' if browser.desktop?
      end
    end
  end

  module Consoles
    def smileback?
      !(ua =~ /smileback/i).nil?
    end

    def wechat?
      !(ua =~ /MicroMessenger/i).nil?
    end

    def desktop?
      !mobile? && !wechat? && !smileback?
    end
  end
end

2. 在 html body class 裡新增 browser 資訊，方便 CSS 套用

 class=" Browser.new(ua: request.env['HTTP_USER_AGENT']).to_s %>"> 
-->

body{ /* 預設的樣式 */ }
body.desktop{ /* 桌面瀏覽器定製樣式 */ }
body.mobile{ /* 手機瀏覽器定製樣式 */ }
body.wechat{ /* 微信定製樣式 */ }

3. 使用 Variant Response 來針對部分割槽別大的頁面做兩套或多套 views

# application_controller.rb

before_action :detect_browser

private

def detect_browser
  request.variant = :mobile if Browser.new(ua: request.env['HTTP_USER_AGENT']).mobile?
end

需要拆分的頁面，做成如下形式：

app/views/pages/home.erb
app/views/pages/home.html+mobile.erb # 檔名格式為 響應格式+裝置名

4. 新增 helper，方便複雜的情況下呼叫，比如支付

# application_helper.rb

def browser
  @_browser ||= Browser.new(ua: request.env['HTTP_USER_AGENT'])
end

/ 懶得轉 erb 格式了，下面這段是 slim 格式的
- if browser.smileback?
  a.buttonhref="jdxlsmileback://recharges/#{resource.id}/pay"支付寶付款
  = link_to '銀聯付款', pay_recharge_path(resource, unionpay: true), 'data-no-turbolink' => true
- elsif browser.wechat?
  - if current_user.weixin_id
    = link_to '微信支付', '#', id: 'wepay', class: 'button'
    = link_to '銀聯付款', pay_recharge_path(resource, unionpay: true), 'data-no-turbolink' => true
  - else
    = link_to '銀聯付款', pay_recharge_path(resource, unionpay: true), 'data-no-turbolink' => true, class: 'button'
- elsif browser.mobile?
  = link_to '支付寶付款', pay_recharge_path(resource, alipay: true), class: 'button', 'data-no-turbolink' => true
  = link_to '銀聯付款', pay_recharge_path(resource, unionpay: true), 'data-no-turbolink' => true
- else
  = link_to '支付寶付款', pay_recharge_path(resource, alipay: true), class: 'button', 'data-no-turbolink' => true
  = link_to '微信支付', pay_recharge_path(resource, scan_wepay: true)
  = link_to '銀聯付款', pay_recharge_path(resource, unionpay: true), 'data-no-turbolink' => true

其它經驗

• iOS App 我們用 WKWebView 套的殼，WKWebView 比 UIWebView 效能更好些，但限制也更多些，具體可以 Google。
• Android App 我們用預設的 WebView，目前沒發現更好的替代品。
• 支付渠道之前我們是自己封裝的，現在發現 Ping++ 也不錯，大家可以試試。

重點來了！！！

簡單心理是什麼？

• 最大的華語心理諮詢平臺
• 最嚴格的諮詢師入駐稽核
• 立志於提供最專業的心理服務

內心世界那麼大，想不想來看看？

我們需要：

我們提供：

• 最人性化的工作環境（老闆及大部分員工都有心理學專業背景，程式設計師鼓勵師弱爆了 :smirk: ）
• 非北京地區可遠端工作（本部位於北京中關村）

歡迎勾搭 hr@jiandanxinli.com

休息下，看看養眼的照片吧（非 PS）

女王大人（曾用名：煤球）及她的孩子們 [圖片上傳失敗...(image-330053-1550989501273)]

各種帥哥美女雲集的活動 [圖片上傳失敗...(image-e549c0-1550989501273)]

瞭解更多我們公司的詳情可以移步這裡： www.jiandanxinli.com/pages/37