Ruby China 社区 iOS 节点

Gear 浏览器对于「油猴」脚本的技术实现原理

Catfan — Thu, 06 Aug 2020 16:57:30 +0800

自从 5 月发布了里程碑 2.0 版本后，直到差不多三个月的现在已经发布了大大小小共 14 个版本。进行了大量的改进和修复，同时也有不少新的功能。由于 Gear 的几大核心功能一直都没有详细介绍，在此公开一些内部实现的原理，以方便大家了解。

油猴脚本

直到目前为止，Gear 依然是 iOS 首个支持油猴脚本的浏览器。有部分人认为一些浏览器支持执行 JavaScript 脚本代码就是所谓支持插件。事实上支持油猴脚本和支持 JavaScript 脚本其实是两回事。

在 iOS 上实现在页面加载前注入 JavaScript 脚本其实就是两行代码的问题。只需要调用：

let userScript = WKUserScript(source: String, injectionTime: WKUserScriptInjectionTime, forMainFrameOnly: Bool)

webView.configuration.userContentController.addUserScript(userScript)

文档：Apple Developer Documentation - WKUserScript

核心就是第一行代码，第一个参数就是要注入的 JavaScript 代码，第二个是注入的时间，可选 atDocumentStart 或 atDocumentEnd，第三个是是否只针对主 frame 执行。

就这，其实只需要几分钟的时间就能让 Web 浏览器实现执行 JavaScript 脚本（插件）的能力了。

但是，支持油猴脚本却是更加复杂的问题了。绝大部分油猴脚本都是无法通过此方式直接执行的。

首先，油猴脚本的头部注释配置定义了该脚本的执行环境、引入外部文件（如各种框架、数据、图片等）、权限授予、接口授予、以及各种相关信息。必须对此信息进行解析和保存，并在执行的时候配置好对应的代码执行环境。

还要给每个脚本配备独立的数据存储方式，不能和页面的共享。同时还要解决资源跨域访问等问题。

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        http://example.com
// @require      https://cdn.staticfile.org/jquery/3.3.1/jquery.js
// @resource     count  https://greasyfork.org/scripts/by-site.json
// @connect      translate.google.com
// @run-at       document-idle
// @grant        unsafeWindow
// @grant        GM_addStyle
// @grant        GM_getValue
// @grant        GM_setValue
// ==/UserScript==

(function() {
    'use strict';

    // Your code here...
    console.log("Hello World");
})();

以上是一个简单的油猴脚本代码。

其次，事实上目前桌面浏览器主要是这三大扩展支持执行用户脚本。而「油猴」只是其中一个的名字。

GitHub - greasemonkey/greasemonkey: Greasemonkey is a user script manager for Firefox.

GitHub - violentmonkey/violentmonkey: Violentmonkey provides userscripts support for browsers.

GitHub - Tampermonkey/tampermonkey: Tampermonkey is the most popular userscript manager.

Greasemonkey 主要对应 Firefox，而 Tampermonkey（目前最新已经不公开源代码，非开源）主要对应 Chrome 或基于 Chromium 的浏览器。它们内部都有不少地方调用了浏览器的内部接口来实现一些特殊功能。所以 Tampermonkey 也比较好移植到 Android 上。

有兴趣的，可以阅读其源代码，看看是如何实现的。

而在 iOS 上，是无法直接使用以上任何一个项目的代码来实现油猴脚本的支持。在思考了各种方案后，最终 Gear 则是选择了完全重新写一个脚本引擎来进行支持。

目前 Gear 选择的是通过 messageHandlers 来实现页面 JavaScript 与 Swift 原生代码进行数据的处理和通讯。例如跨域请求、数据存储等。并使用了缓存的方案，来加速脚本的加载和执行。原理上执行的效率会比单纯的移植高。而且还为此设计了一套 UI 交互来实现脚本的管理与安装等。于是你现在在 Gear 上可以在安装 Bilibili Evolved 这类的脚本来看 B 站，并使用各种特殊功能了……

当然，由于 Gear 的脚本引擎是完全自己开发的，并且还要同时兼顾 Greasemonkey 和 Tampermonkey 脚本的情况，所以目前还有一些接口还没有完全支持。

而且各个脚本代码的质量不一，各种奇怪的代码写法、各种代码重写、错误的引用、动不动就加载十几 MB 框架文件的情况等等，只能逐行代码来调试脚本。

目前 Gear 依然会不断对引擎进行升级来增强其兼容性。现在依然保持每隔一到两周进行一次更新，每次都会带来新的功能和实质性的改进。

如果在使用脚本过程中发现有问题，也可以直接反馈到 contact@gear4.app。我这边会逐个进行测试和修复，尽量让其能在 Gear 运作正常。

Gear 官网：https://gear4.app

App Store: https://apps.apple.com/cn/app/gear-browser/id1458962238?ls=1

给 cocoapods 的 spec 类如何扩展方法

lxs091021119 — Sat, 20 Oct 2018 20:48:49 +0800

cocoapods 的 spec 类扩展方法，我写在 cocoapods 源码里面可以，但是写在 podfile 里面不行，提示扩展的方法找不到，代码如下，请教各位大神，错误出在哪里？

class Spec 
      def spec_test
         puts "测试"
      end  
 end

Ruby China iOS 12 原生应用

swordray — Sun, 30 Sep 2018 22:01:49 +0800

下载

在 App Store 中搜索「Ruby」，或者打开链接 https://itunes.apple.com/cn/app/id999870130?ls=1&mt=8。

介绍

首个版本写于 2015 年 Swift 发布不久，此后移动端技术又有了日新月异的发展，于是最近从零开始重写了整个应用，以反映当前的最佳实践。

使用 Swift 4 重写了所有代码，更换了第三方库。
根据「iOS 12 人机界面规范」重新设计了用户界面。
支持所有系统特性，新增了支持 iPhone XS、iPad 分屏、Face ID、动态字体等。

开源

开源在 https://github.com/swordray/ruby-china-ios，欢迎 star 和 PR。另外其中有关 hybrid 开发的代码被抽取到一个单独的库 JXWebViewController。

现在还推荐使用 Turbolinks + Native 来做 iOS app 吗

tim_lang — Wed, 12 Sep 2018 10:01:46 +0800

主要团队人比较少，目前没专职的 iOS 工程师。

ruby-china 的 iOS 版也是一波三折，最新版正是 turbolinks+native，不知道现在还推荐这个吗。

iOS 进程问题

yangyangnote — Mon, 12 Mar 2018 17:18:22 +0800

写了一个协议方法

public func onEvent(event:MidiEvent, ms:Int64)

并做了判断

if event is NoteOn {

  myLabel.backgroundColor=UIColor.yellow

}
else if let e = event as? NoteOff {

            myLabel.backgroundColor=UIColor.blue

}

现在我播放 MIDI 音乐时，不断进入这两个判断，但是为什么 Label 的颜色不会一直变，而是播完后只显示最后一次的颜色蓝色？

苹果开发的一个八卦，大家怎么看

gakki — Wed, 08 Mar 2017 13:30:52 +0800

TesterHome iOS 客户端上架历程

chenhengjie123 — Wed, 07 Dec 2016 21:46:33 +0800

最近几天和 TesterHome 的小伙伴一起完成了 TesterHome iOS 客户端的上架。TesterHome 的网站是在 Ruby China 的基础上进行修改的，此次客户端也是从 Ruby China iOS 客户端基础上修改。因此此记录也适用于 Ruby China 的同学，乃至以后其他使用 homeland 的同学。

在此特别对 Ruby China 社区一直以来对 TesterHome 社区的支持表示感谢！

原材料

iOS 收费开发者证书
ruby-china-ios 客户端源码

第一步，修改 ruby-china-ios 客户端源码中的配置

ruby-china-ios 默认配置是对应 ruby-china 的，需要先改为 testerhome 的配置才能获取到 testerhome 的相关信息。

修改方法：

创建 testerhome 第三方应用授权

点击右上角用户头像->【个人资料设置】，选择右侧的【管理我的应用】

点击右上角【注册新应用】，输入应用相关信息（回调地址具体填法后续再确定），点击提交

记录下 应用 ID 和私钥的值，待会配置客户端要用到。

打开项目的 Constants.swift 文件

把 ROOT_URL 改为 https://testerhome.com，OAUTH_CLIENT_ID 改为上一步获取到的 应用 ID，OAUTH_SECRET 改为上一步获取到的私钥。

其它一些内容带有 ruby-china 的地方也对应改为 testerhome，主题、图标等也根据需要进行调整。具体修改内容可查看 https://github.com/testerhome/ruby-china-ios/commits/master 对应的提交：

第二步、配置推送证书

推送证书需要在 iOS 开发者后台中配置，同时也需要在 testerhome 后台配置 apns_pem

iOS 开发者后台生成推送证书

步骤基本和 iOS 推送证书设置指南里面一致。大致步骤：

1、修改 APP ID，启用推送（特别留意 development 和 distribution 的都要 enable，否则自己本地测试收不到推送）

2、在开发者后台生成 Apple Push Notification service SSL (Sandbox & Production) 证书

3、下载证书（一个 .cer 文件），双击导入到钥匙串

4、打开钥匙串，找到这个证书（正常是 Apple Push Service 开头），右键导出成 p12 文件，后续假设文件名为 cert.p12

5、使用下面的命令生成一个 pem 文件

$ openssl pkcs12 -in cert.p12 -out website.pem -nodes -clcerts

6、把 website.pem 的内容（cat website.pem）配置到后台->全局配置-> apns_pem 中。

测试推送

在本机架设一个 homeland 网站，按照上面的步骤添加新的应用并配置到 iOS 客户端中：

正常来说，当前客户端登录的用户收到一个通知（如帖子被回复或者被 @）就会有推送出现。

第三步、app store 上架

步骤基本和 iOS App 上架流程 (2016 详细版）一致。大致步骤：

生成 distribution 证书，然后下载、导入 keychain
生成描述文件，然后下载、导入 keychain
上 itunes connect，创建 app 并填写相关信息
xcode 里面去掉所有断点，然后点击菜单栏 Product -> Archive（灰色的话检查下是不是选了模拟器，应该选择真机或者 Generic iOS Device）
Archive 完成后，选择右侧的 validate 验证包。
验证没问题，点击 Upload to App Store 即可开始上传。

上传完应用，应用信息也配置好后，点击 itunes connect 里面的 send for review 就开始进入审核队列了。

坑

这过程中，因为不熟练，遇到了一个坑，卡了一天：

测试时无论是 adhoc 包还是调试包都收不到推送

原因有两个：

开发者后台中 development 的推送为 Configurable，相当于没开启，所以一直没收到。解决方法：手动开启。
网上找到的 pem 配置文章生成 pem 的方式都是先生成证书的 pem，然后生成私钥的 pem，最后合并在一起。而 ruby-china 用的是另一种方式。鉴别方式：看 sidekiq 后台的错误里面有没有 OpenSSL::PKey::RSAError: Neither PUB key nor PRIV key: nested asn1 error 。如果有，那基本上就是 pem 配置不正确导致和苹果推送服务器通讯失败了。解决方法：用上面正文里的那个命令生成 pem 内容即可。

利用 Workflow 显示附近的免费 Wi-Fi

longjian — Wed, 07 Dec 2016 13:12:23 +0800

得益于 Workflow 自 1.5.3 版本起更新的 Get Content of URL 动作，该 App 的潜力得到了极大的提升。本文分享一种有趣的用法，搜寻附近的免费 Wi-Fi 并择一显示在系统地图上。

简介

本 Workflow 主要分三部分，从通知中心运行（下载地址：https://workflow.is/workflows/1175edbb0578459586b845373a185f9b）

获取当前地理位置；

通过网络资源获取附近的免费 Wi-Fi 资源；

将所选 Wi-Fi 显示在系统地图上

大体的步骤很少，所以是非常简单的。下面将逐步介绍。

1. 获取当前地理位置

这个直接利用 Workflow 自带的 Get Current Location 动作就可以获取，由此获得的地理信息包含经纬度，分别使用 Get Details of Locations 提取即可。经纬度信息将用在步骤 2 中。

2. 获取附近免费 Wi-Fi 信息

这里就直接使用聚合数据的全国 Wi-Fi API 了，只需要注册个账号就可以申请 API key，没有使用限制，Wi-Fi API 申请地址：https://www.juhe.cn/docs/api/id/18。

请求方式为 Get/Post，总共有 6 个输入参数：

lon：经度，使用上一步获取的经度；

lat：纬度，使用上一步获取的纬度；

gtype：所传递经纬类型，1：百度 2：谷歌 3：gps，填 gps；

r：搜索范围，单位 M，填 1000 即可，太远懒得跑；

key：应用 APPKEY，申请后可以获得，或者直接使用我的；

dtype：返回数据的格式，不用填。

如上填写就可以获取到返回的 json 数据了，参照 API 文档页面的介绍逐层提取数据即可。

每个 Wi-Fi 的数据形式如下：

{
        "name":"瑞尔威饭店",
        "intro":"中F1旅馆门厅；中F2办公区；中F3-F7奇数层走廊；中F4,F6走廊；东F2餐厅，办公；东F3-F7奇数层走廊；东F4,F6走廊；西F3-F7走廊；西F1快餐厅；西B1公共区域",
        "address":"北京市丰台区北京市丰台区莲花池东路116-2号",
        "google_lat":"39.896877",
        "google_lon":"116.325342",
        "baidu_lat":"39.9026269139",
        "baidu_lon":"116.33193121541",
        "province":"北京市",
        "city":"北京市",
        "distance":2959
        },

注意

唯一关键的地方是，如果附近有多个 Wi-Fi，则服务器会返回多组数据，这时必须要将它们排成列表供使用者选择。而未经处理的 Dictionary 数据在 Choose from List 动作中的显示统一是「Dictionary」，不利于使用者查看。这里介绍两种解决方式：

使用 Set Name 动作

在使用 Repeat with Each 动作对 Wi-Fi 位置信息进行逐个处理时，首先提取用于显示的信息，如 Wi-Fi 名称、距离，再使用 Set Name 对每个 Dictionary 数据命名：

这样在接下来的 Choose from List 动作中所有 Dictionary 都将显示自己独特的名字，而不是一个个干巴巴的「Dictionary」。在使用者做出选择后，就可以安排其它的 Get Dictionary Value 动作来进一步获取数据了。

该方式唯一的缺点就是在只有一个 Dictionary 数据时，由于 Workflow 开发者更新了 Choose from List 动作，此时会显示 Dictionary 中的键与键值，所以需要安排额外的动作对此进行处理。

使用 Text 动作

该方式在 Repeat with Each 动作结束后，会产生一个文本 List，随后的 Choose from List 动作将列出每个文本的首行。在使用者做出选择后，需要通过 Match Text 动作使用正则表达式对经纬度数据进行匹配，语法如下：

(?<=lat:).*?(?=\n)
(?<=lon:).*$

优点是避免了 Set Name 方案的问题，缺点是每一次循环都需要将经度纬度提取出来，当数据有成百上千个时会多浪费点时间。

3. 在系统地图显示 Wi-Fi 位置

查询苹果地图相关的文档后，可以知道该 URL 为：

http://maps.apple.com/?ll=纬度,经度&q=名称

将从步骤二中获取的数据填入并访问即可。

使用

通知中心访问：

苹果地图显示位置：

只有两步操作，所以还是很快捷的。虽然距离的显示有点问题，但还在我可以接受的范围内。不过聚合数据的 Wi-Fi 数量不算特别多，不知是否会进一步更新数据库。

Pokemon GO - 国内玩家通过 Xcode 改 GPS 玩游戏教程

huacnlee — Tue, 12 Jul 2016 21:06:12 +0800

最近 Pokémon GO 火啊！不过目前国内没法玩，GPS 定位出来周围没怪物...

来技术宅的解决方案！！

前提条件：

macOS
Xcode
iOS 开发者账户

将下面的文件保存为 PokemonLocation.gpx

<gpx creator="Xcode" version="1.1">
  <wpt lat="37.799" lon="-122.4715">
  <name>PokemonLocation</name>
  </wpt>
</gpx>

Xcode 创建一个空白的 iOS 项目，把这个文件加进去，引用的方式而不是 Copy，编译运行到你的手机。

这个时候 iPhone 上面空白项目启动起来了，Home 最小化，启动 Pokémon GO，等待进入到游戏界面。

回到 Xcode，打开 PokemonLocation.gpx 进入 XML 的编辑界面。

状态栏下面那个定位图标，点击选择 PokemonLocation，游戏里面就动了（原理是 Xcode 让 iOS 设备篡改了 GPS 坐标）

接下来你要不断的修改 lat, lng 的值（建议修改幅度是小数点最后两位 10 以内），然后保存，选择菜单里面的 PokemonLocation 来实现移动。

然后，你可以下载我的自动化工具

有浏览器界面可以实现移动，自动点击更新 GPS 到设备，操作更简单！

https://github.com/huacnlee/PokemonGoMove

Enjoy!

Ruby China iOS App 开始支持 3D Touch 了

swordray — Sun, 07 Feb 2016 13:47:25 +0800

直接上图上代码，另祝大家新春快乐~～

https://github.com/swordray/ruby-china-ios/commit/7c178729464bec24420d1f94634a7e4ebb571f0b

给女朋友的 iOS 开发教程 iOS With Girlfriend

kevinzhow — Sat, 03 Oct 2015 23:30:28 +0800

因为女朋友准备学习 iOS 开发，所以我开始录制一系列的 iOS 开发教程的视频，这个系列的名字就叫 iOS With Girlfriend 吧

第零期：Intro

B 站/ Youtube

第一期：Design

B 站/ Youtube

第二期：Design An App

B 站/ Youtube

想学 iOS 开发，已经看了大部分 “斯坦福大学公开课” 了，接下来怎么自学好呢？

QueXuQ — Wed, 26 Aug 2015 19:17:18 +0800

已经看了大部分“斯坦福大学公开课”了，但是感觉他的例子还是复杂了一些，虽然是跟着做了一部分，但是越往后越多不懂。而且视频对着代码非常的麻烦，想看看有没有推荐更合适的 swift 和 iOS 教程呢，最好有个简单例子，可以让我循序渐进，Swift 现在已经知道怎么回事了，就是 iOS 的开发不懂的还是太多了。

Ruby China iOS App 发布！

swordray — Tue, 30 Jun 2015 17:42:05 +0800

开源在 GitHub：https://github.com/swordray/ruby-china-ios App Store:https://appsto.re/cn/Y6mM7.i

为什么从零开发这个 App 呢

感谢 @huacnlee 提供的全新 API v3
告别 Objective-C，使用 Swift 1.2 开发（即将支持 2.0）
受益于 iOS 8 的新 API，可以方便的支持 iPhone / iPad 的各个方向，包括自动切换 6 Plus 横屏模式
遵守 Apple iOS 人机交互指南的设计理念

RubyMotion 的一个深坑

serco — Thu, 21 May 2015 13:52:22 +0800

项目中刚好用到 objective-c 的一个开源项目 Masonry 示例代码如下

[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
    make.edges.equalTo(superview).with.insets(padding);
}];

用 RubyMotion 和 motion-cocoapods 安装

Motion::Project::App.setup do |app|
  app.pods do
    pod 'Masonry'
  end
end

调用

label.mas_makeConstraints(lambda { |make| # Line 24
      make.center.equalTo(superview)
})

一切看上去都很美好，直到现实给了我一耳光

*** Terminating app due to uncaught exception 'ArgumentError', reason: 'guess_view_controller.rb:24:in `block in viewDidLoad': wrong number of arguments (1 for 0) (ArgumentError)

那就检查下到底哪里出了问题

p make.center.method('equalTo').arity # return 0

妹啊，为啥跟文档说的不一样的。。。看完源码才知道。。。 equalTo返回的是个 block，而 objective-c 的 block 就是 TM 的直接调用的。。。

- (MASConstraint * (^)(id))equalTo {
    return ^id(id attribute) {
        return self.equalToWithRelation(attribute, NSLayoutRelationEqual);
    };
}

好吧，改过来就好了

label.mas_makeConstraints(lambda { |make| # Line 24
      make.center.equalTo.call(superview)
})

本来这只是个小事情，可是难道以后 Objective-C 的库，类似的情况我都要去翻下源码才能确定是不是这个问题嘛。。。累觉。。还是爱

这里有没有 iOS 开发的程序员，进来讨论一个问题吧。

hanluner — Thu, 23 Apr 2015 22:23:51 +0800

ios 跟服务器结合登录问题，有没有一个比较好的，比较完整的解决方案。求推荐。讲讲思路也行。业务场景需要设备的 idfa，和 uuid 信息进行识别。目前这种登录之后拿一个 token 回来的方式，我感觉不是很好。。。我想问下，大家都是在用什么方式做登录的事情。

用 ReactNative 写了个 RubyChina 客户端，写得内牛满面

henter — Mon, 06 Apr 2015 10:00:14 +0800

内牛满面的是准备开始写的时候发现 RubyChina API 禁掉了... 于是转到kimono生成 API，折腾数据转换等等勉强可以用，继续开发

昨晚正快要昨晚第一版时，又一次内牛满面，突然发现 RubyChina 改版了，于是乎之前生成的 API 好几个不能用了继续折腾半天现在勉强可以用了 = =！

kimino 请求速度很慢，实时性也较差，等 rubychina 哪天再开放 API 了再切换过来吧～

@huacnlee 什么时候再开放 API？

基本功能

精选主题
分类节点
节点主题

部分截图

首页

分类节点

主题详细页

关于

TODO

缓存
用户页
下拉刷新
用户登录（等开放 API）
...

代码在： http://github.com/henter/ReactNativeRubyChina

git 协作开发 iOS .pbxproj 总是冲突，大家是怎么做的？

fresh_fish — Tue, 13 Jan 2015 11:42:30 +0800

希望有经验的可以分享一下

字符创和日期之间的转换

easonlovejiven — Thu, 08 Jan 2015 11:05:14 +0800

求大神。。。str = ”12/28/14 01:51 PM“转换成 "2014-12-28 01:51:00 Date，或者 Time 类里边儿有相应的转化方法没。。。。。

同一个 app 中如何处理类似多个 TabBar?

tsinghan — Wed, 07 Jan 2015 19:49:39 +0800

第一个是主界面的 tabbar，我在前面加了个 UITabBarController，第二个图是某个特殊的界面，也需要单独的一套 tabbar，我如果再加上一个 UITabBarController 第二个不会生效，于是我又加了个 Tab Bar 的控件，增加了多个 item 但是这样的话头部的 nav 就没法统一控制了，有什么办法实现这样的效果？

开发 app 的后台，用 ror 或者 Sinatra 能否合适？

alex_cheng — Tue, 30 Dec 2014 16:25:36 +0800

开放性问题，希望大家分享点经验。

Ruby China 社区 iOS 节点

Gear 浏览器对于「油猴」脚本的技术实现原理

油猴脚本

给 cocoapods 的 spec 类如何扩展方法

Ruby China iOS 12 原生应用

下载

介绍

开源

现在还推荐使用 Turbolinks + Native 来做 iOS app 吗

iOS 进程问题

写了一个协议方法

现在我播放 MIDI 音乐时，不断进入这两个判断，但是为什么 Label 的颜色不会一直变，而是播完后只显示最后一次的颜色蓝色？

苹果开发的一个八卦，大家怎么看

TesterHome iOS 客户端上架历程

原材料

第一步，修改 ruby-china-ios 客户端源码中的配置

第二步、配置推送证书

测试推送

第三步、app store 上架

坑

利用 Workflow 显示附近的免费 Wi-Fi

简介

1. 获取当前地理位置

2. 获取附近免费 Wi-Fi 信息

注意

使用 Set Name 动作

使用 Text 动作

3. 在系统地图显示 Wi-Fi 位置

使用

Pokemon GO - 国内玩家通过 Xcode 改 GPS 玩游戏教程

然后，你可以下载我的自动化工具

Ruby China iOS App 开始支持 3D Touch 了

给女朋友的 iOS 开发教程 iOS With Girlfriend

第零期：Intro

第一期：Design

第二期：Design An App

想学 iOS 开发，已经看了大部分 “斯坦福大学公开课” 了，接下来怎么自学好呢？

Ruby China iOS App 发布！

RubyMotion 的 一个深坑

这里有没有 iOS 开发的程序员，进来讨论一个问题吧。

用 ReactNative 写了个 RubyChina 客户端，写得内牛满面

基本功能

部分截图

首页

分类节点

主题详细页

关于

TODO

git 协作开发 iOS .pbxproj 总是冲突，大家是怎么做的？

字符创和日期之间的转换

同一个 app 中 如何处理类似多个 TabBar?

开发 app 的后台，用 ror 或者 Sinatra 能否合适？

RubyMotion 的一个深坑

同一个 app 中如何处理类似多个 TabBar?