├── .gitignore
├── README.md
├── WeAppTongCeng.xcodeproj
└── project.pbxproj
├── WeAppTongCeng
├── AppDelegate.h
├── AppDelegate.m
├── Assets.xcassets
│ ├── AccentColor.colorset
│ │ └── Contents.json
│ ├── AppIcon.appiconset
│ │ └── Contents.json
│ └── Contents.json
├── Base.lproj
│ ├── LaunchScreen.storyboard
│ └── Main.storyboard
├── Info.plist
├── LVTongCeng
│ ├── LVApiHandleDelegate-Protocol.h
│ ├── LVApiHandler.h
│ ├── LVApiHandler.m
│ ├── LVContainerView.h
│ ├── LVContainerView.m
│ ├── LVTongCengWebDelegate-Protocol.h
│ ├── LVTongCengWebMgr.h
│ ├── LVTongCengWebMgr.m
│ ├── LVTongCengWebView.h
│ ├── LVTongCengWebView.m
│ ├── LVWeakProxy.h
│ ├── LVWeakProxy.m
│ ├── LVWebViewBridge.h
│ ├── LVWebViewBridge.m
│ └── YYWAWebView.cpp
├── ViewController.h
├── ViewController.m
├── main.m
└── test
│ ├── LVTongCengWebController.h
│ ├── LVTongCengWebController.m
│ ├── LVWKWebController.h
│ ├── LVWKWebController.m
│ ├── LVWebViewBridge
│ ├── LVBridge.h
│ └── LVTongCengWebManager.h
│ └── tongceng.html
├── WeAppTongCengTests
├── Info.plist
└── WeAppTongCengTests.m
└── WeAppTongCengUITests
├── Info.plist
└── WeAppTongCengUITests.m
/.gitignore:
--------------------------------------------------------------------------------
1 | # OS X
2 | .DS_Store
3 |
4 | # Xcode
5 | build/
6 | *.pbxuser
7 | !default.pbxuser
8 | *.mode1v3
9 | !default.mode1v3
10 | *.mode2v3
11 | !default.mode2v3
12 | *.perspectivev3
13 | !default.perspectivev3
14 | xcuserdata/
15 | *.xccheckout
16 | profile
17 | *.moved-aside
18 | DerivedData
19 | *.hmap
20 | *.ipa
21 | .idea/
22 | *.xccheckout
23 | *.xcworkspace
24 |
25 | #CocoaPods
26 | Pods
27 | Manifest.lock
28 | Podfile.lock
29 | # We recommend against adding the Pods directory to your .gitignore. However
30 | # you should judge for yourself, the pros and cons are mentioned at:
31 | # https://guides.cocoapods.org/using/using-cocoapods.html#should-i-ignore-the-pods-directory-in-source-control
32 | #
33 | # Note: if you ignore the Pods directory, make sure to uncomment
34 | # `pod install` in .travis.yml
35 | #
36 | # Pods/
37 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | > 自微信小程序火了后, 个大头部厂商也纷纷效仿, 给自己的客户端提供了小程序框架支持. 然而小程序框架为了提升小程序页面的极致用户体验, 做了**同层渲染**.
2 |
3 | **抛砖引玉:**
4 |
5 | **我们今天的目标就是: 从0到1实现iOS端`WKWebView`同层渲染, 文章末尾有DEMO演示, 也有源码地址.**
6 |
7 | 
8 |
9 |
10 |
11 |
12 |
13 | # 同层渲染原理
14 |
15 | 「同层渲染」就是把原生组件绘制在 `WebView` 所渲染的页面中，与其他 `HTML` 控件在同一层级，效果如下图所示:
16 | 
17 |
18 | 这里我给大家找到三篇比较官方的文章, 建议跳过看总结:
19 |
20 | - 腾讯 [微信小程序同层渲染原理剖析](https://developers.weixin.qq.com/community/develop/article/doc/000c4e433707c072c1793e56f5c813?page=1)
21 | - 百度[【走进小程序原理】揭秘组件同层渲染](https://blog.csdn.net/Smartprogram/article/details/108124407) **(推荐)**
22 | - 阿里 [亿级用户高稳定性视频播放器养成计划|618淘系前端技术分享](https://mp.weixin.qq.com/s/jgsG-XrAKV6AHSrUCRhKtQ)
23 |
24 |
25 | > 总结
26 | >
27 | > 这些文章只阐述了基本实现思路, 并没有教你怎么实现, 然并卵.
28 | >
29 | > 看完之后各大技术论坛的“同层渲染原理分析”的你, 还是实现不了.
30 | > **下面我们一起来实现一个.**
31 |
32 |
33 |
34 | # 实现同层渲染
35 |
36 | ## 1. 我们在前端H5页面上创建一个需要生成原生组件的`DOM`节点.
37 |
38 | ```html
39 |
42 |
43 |
50 | ```
51 |
52 | ## 2. 前端会把原生组件类型如`cid`、`position`等信息通过`window.webkit.messageHandlers.handle.postMessage`发送给iOS端.
53 |
54 | ```javascript
55 |
109 | ```
110 |
111 | ## 3. iOS端WKWebView消息代理接收到前端发来的消息
112 |
113 | ```objective-c
114 | - (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
115 | // 收到前端的消息
116 | // message.name: handle
117 | // message.body: {"api":"insertInput","args":{"cid":"1","position":{"top":30,"width":200,"left":87.5,"height":40}}}
118 | }
119 | ```
120 |
121 | ## 4. iOS端可以通过消息中的`cid`匹配查找相应`WKChildScrollView`，并将原生组件挂载到该节点上作为其子View.
122 |
123 | 
124 |
125 |
126 |
127 | ## 5. 最后我们发现WKWebView中插入的原生组件是无法响应交互事件的，需要特殊处理.
128 |
129 | 这里我们需要处理两件事，一是屏蔽`WKContentView`手势拦截事件响应链的传递，让事件可以传递到原生组件中，命令如下：
130 |
131 | ```objective-c
132 | @implementation LVTongCengWebView
133 |
134 | - (void)_handleWKContentGestrues {
135 | UIScrollView *webViewScrollView = self.scrollView;
136 | if ([webViewScrollView isKindOfClass:NSClassFromString(@"WKScrollView")]) {
137 | UIView *_WKContentView = webViewScrollView.subviews.firstObject;
138 | if (![_WKContentView isKindOfClass:NSClassFromString(@"WKContentView")]) return;
139 | NSArray *gestrues = _WKContentView.gestureRecognizers;
140 | for (UIGestureRecognizer *gesture in gestrues) {
141 | gesture.cancelsTouchesInView = NO;
142 | gesture.delaysTouchesBegan = NO;
143 | gesture.delaysTouchesEnded = NO;
144 | }
145 | }
146 | }
147 |
148 | @end
149 | ```
150 |
151 | 二是重写iOS端`原生组件`容器`LVContainerView`协议检测方法`-conformsToProtocol:`，目的是绕过`WKNativelyInteractible`协议检测，从而在点击WKWebView的时候，容器`LVContainerView`及其子view（原生组件）可以正常进行事件响应。
152 |
153 | ```objective-c
154 | @implementation LVContainerView
155 |
156 | - (BOOL)conformsToProtocol:(Protocol *)aProtocol {
157 | if (aProtocol == NSProtocolFromString(@"WKNativelyInteractible")) {
158 | return YES;
159 | }
160 | return [super conformsToProtocol:aProtocol];
161 | }
162 |
163 | @end
164 | ```
165 |
166 |
167 |
168 | 到这里，经过前面这些步骤，我们就实现了iOS端`WKWebView`的`同层渲染`，下面让我们来看看实现效果：
169 |
170 | 1. 我们可以看到原生组件`UITextField`、`UITextView`响应聚焦输入，`UIButton`可以点击变颜色，实现了正常交互；
171 | 2. H5蒙层可以遮挡住`原生组件`，解决了`WKWebView`内嵌原生组件的层级限制问题，完美体现了`同层`的含义。
172 |
173 |
174 |
175 |
more content
80 |
81 |
82 |
83 |
84 |
149 |
150 |
151 |
--------------------------------------------------------------------------------
/WeAppTongCengTests/Info.plist:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | CFBundleDevelopmentRegion
6 | $(DEVELOPMENT_LANGUAGE)
7 | CFBundleExecutable
8 | $(EXECUTABLE_NAME)
9 | CFBundleIdentifier
10 | $(PRODUCT_BUNDLE_IDENTIFIER)
11 | CFBundleInfoDictionaryVersion
12 | 6.0
13 | CFBundleName
14 | $(PRODUCT_NAME)
15 | CFBundlePackageType
16 | $(PRODUCT_BUNDLE_PACKAGE_TYPE)
17 | CFBundleShortVersionString
18 | 1.0
19 | CFBundleVersion
20 | 1
21 |
22 |
23 |
--------------------------------------------------------------------------------
/WeAppTongCengTests/WeAppTongCengTests.m:
--------------------------------------------------------------------------------
1 | //
2 | // WeAppTongCengTests.m
3 | // WeAppTongCengTests
4 | //
5 | // Created by lionvoom on 2021/3/11.
6 | //
7 |
8 | #import
9 |
10 | @interface WeAppTongCengTests : XCTestCase
11 |
12 | @end
13 |
14 | @implementation WeAppTongCengTests
15 |
16 | - (void)setUp {
17 | // Put setup code here. This method is called before the invocation of each test method in the class.
18 | }
19 |
20 | - (void)tearDown {
21 | // Put teardown code here. This method is called after the invocation of each test method in the class.
22 | }
23 |
24 | - (void)testExample {
25 | // This is an example of a functional test case.
26 | // Use XCTAssert and related functions to verify your tests produce the correct results.
27 | }
28 |
29 | - (void)testPerformanceExample {
30 | // This is an example of a performance test case.
31 | [self measureBlock:^{
32 | // Put the code you want to measure the time of here.
33 | }];
34 | }
35 |
36 | @end
37 |
--------------------------------------------------------------------------------
/WeAppTongCengUITests/Info.plist:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | CFBundleDevelopmentRegion
6 | $(DEVELOPMENT_LANGUAGE)
7 | CFBundleExecutable
8 | $(EXECUTABLE_NAME)
9 | CFBundleIdentifier
10 | $(PRODUCT_BUNDLE_IDENTIFIER)
11 | CFBundleInfoDictionaryVersion
12 | 6.0
13 | CFBundleName
14 | $(PRODUCT_NAME)
15 | CFBundlePackageType
16 | $(PRODUCT_BUNDLE_PACKAGE_TYPE)
17 | CFBundleShortVersionString
18 | 1.0
19 | CFBundleVersion
20 | 1
21 |
22 |
23 |
--------------------------------------------------------------------------------
/WeAppTongCengUITests/WeAppTongCengUITests.m:
--------------------------------------------------------------------------------
1 | //
2 | // WeAppTongCengUITests.m
3 | // WeAppTongCengUITests
4 | //
5 | // Created by lionvoom on 2021/3/11.
6 | //
7 |
8 | #import
9 |
10 | @interface WeAppTongCengUITests : XCTestCase
11 |
12 | @end
13 |
14 | @implementation WeAppTongCengUITests
15 |
16 | - (void)setUp {
17 | // Put setup code here. This method is called before the invocation of each test method in the class.
18 |
19 | // In UI tests it is usually best to stop immediately when a failure occurs.
20 | self.continueAfterFailure = NO;
21 |
22 | // In UI tests it’s important to set the initial state - such as interface orientation - required for your tests before they run. The setUp method is a good place to do this.
23 | }
24 |
25 | - (void)tearDown {
26 | // Put teardown code here. This method is called after the invocation of each test method in the class.
27 | }
28 |
29 | - (void)testExample {
30 | // UI tests must launch the application that they test.
31 | XCUIApplication *app = [[XCUIApplication alloc] init];
32 | [app launch];
33 |
34 | // Use recording to get started writing UI tests.
35 | // Use XCTAssert and related functions to verify your tests produce the correct results.
36 | }
37 |
38 | - (void)testLaunchPerformance {
39 | if (@available(macOS 10.15, iOS 13.0, tvOS 13.0, *)) {
40 | // This measures how long it takes to launch your application.
41 | [self measureWithMetrics:@[[[XCTApplicationLaunchMetric alloc] init]] block:^{
42 | [[[XCUIApplication alloc] init] launch];
43 | }];
44 | }
45 | }
46 |
47 | @end
48 |
--------------------------------------------------------------------------------